Alternating Rows

About this block

Alternating Rows opens with a centered heading and supporting line, then walks through three features in rows that swap sides as you scroll: text left and media right, then flipped, then back again. The text side of each row carries an icon in a soft square, a feature title, two sentences of copy, and a short check list. The media side is a framed app fragment drawn entirely from theme tokens: a sprint task list with done states, a weekly usage bar chart with a delta badge, and a settings panel with working toggles built on the shadcn Switch primitive.

The rows are driven by one typed data array, so you can rewrite titles, copy, and check list items, or reorder rows, and the alternation follows automatically from position. Each panel is an independent component you can swap for your own product fragment, and on mobile every row collapses to text first, so the reading order stays sensible.

When to use

Reach for this block when a features page needs a proper product tour rather than a scannable summary: three capabilities that each deserve a paragraph, proof points, and a visual of the product doing the work. It sits well as the deep dive after a denser overview such as the Bento Grid Features, trading breadth for narrative pace, since the alternating rhythm keeps a long section from feeling like a wall.

A natural flow around it on a Marketing Pro page:

Before

• A block from Heroes to set the promise the three rows then substantiate
• A logo cloud to add credibility before the detailed walkthrough

After

• A block from Testimonials to back the tour with real customer voices
• A pricing section to convert readers once the value is established

What you can display

Each row is a self contained argument, so the frame flexes to many stories beyond the default plan, measure, and tune sequence:

• Product tour. Walk through your three core surfaces in the order a new user meets them, with each panel showing that screen.
• Workflow story. Tell one process end to end, from capturing work to reviewing results, so the section reads as a single narrative.
• Persona angles. Aim each row at a different audience, such as makers, managers, and admins, so every reader finds their row.

Tip: keep every check list item to one line at desktop width so the three rows stay level with their panels.