Before and After Section
Before
- Two cards sit side by side, one for the before state and one for the after.
- Each card carries its own heading and a short bulleted list of points.
- Card width and padding are adjustable.
- The before and after cards keep separate background, heading, and text colors.
- List item spacing is shared so both columns line up neatly down the page.
After
- A product image floats between the two cards and can be tilted a few degrees.
- On mobile the image follows a set aspect ratio and the cards stack in order.
- A small floating image can be pinned on top.
- The two card headings share one set of font, size, and max width controls together.
- Colors and content stay split per card, so each side reads on its own clearly.
Show contrast
- This pairing flips the palette, putting a light card on the before side.
- The center image shrinks or grows with a single width control here.
- Top and bottom dividers can be added.
- Each card still keeps its own background and text colors set apart from the other.
- The shared heading controls keep both card titles at one matching size and weight.
Or two topics
- The after card uses a muted tone so the contrast between the two stays clear.
- Bulleted points keep an even rhythm thanks to the shared list spacing setting.
- Image rotation can be set to zero so the center image sits upright.
- The section heading sits above the cards and the intro paragraph sits below them, each with their own color and type rules.
- An optional sliding effect can be turned off, as it is on this second instance here.
Before and After Section
The Left List
- Matching card backgrounds make the two columns read as a single paired set.
- Heading margin and header gap space the title away from the list cleanly.
- Card padding adapts on smaller screens.
- Body font, size override, and max width are set per card if the two should differ.
- The lists keep equal item spacing so the before and after rows align across both.
The Right List
- A center image bridges the columns and can be sized small for a tighter layout.
- Borders along the top and bottom of the section are available when needed here.
- Corner radius applies to the center image.
- The whole section draws from a color scheme or from individual color pickers instead.
- Side by side on desktop, the two cards frame a clear before versus after comparison.
This version sets both cards to the same width, with the center image scaled down so the two lists sit closer together. The optional intro paragraph sits below the two cards and explains the comparison, and the section text has its own font, color, and max width controls apart from the cards.