Row types and components

How rows work

A row is a reusable content component inside a section. Rows are ordered within the section, can attach desktop and mobile images, can hold rich text body and raw_html, and can be styled with row_classes, row_styles, inline_styles, header/body classes, and image_styles.

The section decides how rows are arranged. A cards section may place rows into a grid, a slider section turns rows into slides, a pricing section turns rows into offer cards, and a navbar section turns rows into links.

Several row types share common fields: header is usually the title or primary value, subheader is a label or supporting line, body is rich content, raw_html is custom markup, num_value stores numbers such as star counts, and CTA fields create links or buttons where supported.

• Use image_desktop for the primary image. image_mobile is available for responsive variants in row records even when a specific partial may only render the desktop image today.
• Use content_type raw_html on split rows when the text pane should be custom markup instead of rich text body.
• Use card_variant feature_text to reveal details on hover and focus; with reduced motion or animation disabled, details are shown without the hover transition.
• Use card_variant centered_top_icon for ShipPlay-style process cards: centered icon or numbered badge, short eyebrow, clear step title, and concise body copy.
• Pricing sections only allow offer rows. Navbar sections only allow navbar_link rows.

image

An image-oriented row type. Use image_variant text for compact media-and-copy, slider_item for image strip rows, caption for captioned image content, or the default for a standalone image.

testimonial

A quote card. header is the headline or customer name, body is the quote, subheader is rendered near the avatar as attribution, num_value can create star ratings, and image_desktop becomes a circular avatar.

card

A flexible card row. Use card_variant grid for linked feature tiles, header_body for structured title/body cards, icon for icon-labeled cards, inline_image for compact media cards, feature_text for animated metric callouts, numbered_step for process cards, and centered_top_icon for centered icon-first step cards.

collapsible

An expandable card for FAQ or disclosure content. header and subheader stay visible, body and raw_html appear inside the collapsible area, and collapsed_status controls whether it starts open or closed.

split

A row-level two-column layout. leading_cols controls the image/media column width, alignment controls whether text or image appears first on desktop, mobile_image_position controls mobile order, and vertical_text_alignment controls the text pane.

When image_type is background, the image becomes the row background. When it is foreground, the image renders as media in the image column. content_type raw_html renders raw_html in the text column; otherwise the row renders header, subheader, and rich body.

offer

A pricing plan card. header is the price, subheader is the plan name, body is the feature list or details, and its first action creates the plan button. Pricing sections force this row type for consistency.

navbar_link

A navigation item for navbar sections. Its single action supplies the visible label, destination, analytics, and optional advanced action classes; row_classes styles the nav item wrapper.

Component patterns you can make

Rows and sections combine into higher-level page components. Use hero for landing intros, text or split_pane for copy blocks, cards with card rows using icon, grid, or numbered_step variants for feature grids and multi-row processes, rows_in_columns for natural-height text/collapsible rows or exactly one card per column, slider with controls for browsable stories, slider with split_rows for image/copy slides, pricing with offer rows for plan tables, collapsible rows for FAQs, card rows with feature_text for stats, slider with image rows for logo strips, and navbar with navbar_link rows for site navigation.