Editorial Nonprofit Membership Pricing Section for Divi 5: Two-Plan Highlight

The layout uses an intentionally asymmetric two-column row: the left column takes up 8 of 24 flex units at desktop width, acting as an editorial aside, while the right column fills the remaining 16 units with the plan cards themselves. The 56px column gap and alignItems: center keep the intro text optically anchored to the midpoint of the card pair rather than the top, which prevents the section from reading as a stacked checklist. Section padding steps down cleanly across breakpoints (120px desktop, 80px tablet, 56px phone), and both columns switch to full-width on tablet then stack vertically on phone, so the pitch copy always appears before the plans.

The two plan cards live inside a CSS grid container set to two equal columns at desktop and a single column on phone. Each card carries its own internal flex column with 16px row gaps between label, heading, price, a feature list, and a CTA button. The Individual card uses a warm off-white fill (#faf7f2) with a 1px #e3dccf border, while the Household card inverts the palette entirely, filling with near-black (#1c1a17) and reversing all text to #faf7f2. This hard inversion is the sole visual signal for the recommended plan -- no badge ribbon or drop shadow -- which is in keeping with the editorial restraint of the design.

Typographic hierarchy is split between two typefaces used consistently throughout. Playfair Display (serif) handles all display-weight text: the H2 section heading at 40px, plan names at H3 28px, and prices at 56px with letterSpacing: -1px and lineHeight: 1em to make the numeral feel weighty without becoming decorative. Source Sans 3 handles everything at the reading scale: body text at 17px with 1.6em line height, plan labels as 13px uppercase with 2px letter-spacing, feature list items at 16px, and button labels at 600 weight. The price is rendered as a divi/text paragraph module, not a heading, which keeps it out of the document outline while still benefiting from Playfair Display's lining figures.

Feature lists inside each card use horizontal divi/group rows pairing a 15px Font Awesome check icon (, weight 900) with a divi/text item. A 2px top border on the feature list container creates a visual divider between the price block and the benefits, with 24px top padding to give it breathing room. The button at the bottom of each card inherits the card's inverse logic: the Individual card button is borderless with transparent fill and dark text, while the Household card button uses the off-white fill and dark text, keeping it readable against the dark card background.