Row

Easily create interactive, expandable content panels with headings, icons, rich text, images, videos, and action buttons, all fully customizable for responsive design, mobile performance, and accessibility within Accordion layouts.

Last updated 2 months ago

Overview

The Row block brings expandable, interactive content to your Accordion. Use it to organize information with headings, icons, text, images, videos, and action buttons, creating engaging and accessible layouts that help users scan and interact with content easily.

⚠️ Important: The Row block allows you to combine media, calls-to-action, and text for a fully interactive Accordion experience that works on any device.

Row content and display

This section provides the core settings for what appears in each Row block. You’ll find controls for headings, linked content, default open state, and interactive elements like buttons and icons. These options help users quickly navigate, discover, and act on key content.

Each row can feature a custom heading, connect to dynamic or static content, display excerpts, and use icons to visually enhance navigation.

  1. Display open by default
    Decide if the row starts expanded on page load. Use this to highlight important or time-sensitive content.

  2. Blog post
    Link a blog post for timely articles or updates within your row.

  3. Page
    Connect the row to a specific page for detailed reference or static information.

  4. Show excerpt
    Show the excerpt from your linked blog post or page to give a quick intro or summary.
    Default: false

  5. Show link to content
    Enable a clear link, helping visitors reach the referenced blog post or page directly.

  6. Heading icon
    Add an icon to your row heading for emphasis and quick visual cues.

  7. Heading
    Enter a title for your row, improving navigation and clarity.
    Default: Row

  8. Content
    Use a rich text field for your main message. You can include formatting such as bold, italic, and links for effective storytelling.


    Default:

    <p>Add relevant text content with the richtext editor. Note that you can also include <a href="#">links</a> and basic formatting in this content, e.g. <b>bold</b> and <em>italic</em>.</p>

  9. Button icon
    Add an icon to your action button for extra visual impact.

  10. Button text
    Set the button’s label. Leave empty for icon-only or minimalist buttons.

  11. Button link
    Set the destination URL for your call-to-action.

  12. Button style
    Choose the button’s appearance for maximum clarity or subtlety.
    1. Primary 2. Secondary 3. Extra large 4. Plain 5. Small 6. Small secondary 7. Circle

  13. Button layout
    Decide how your button’s icon and text are arranged.
    1. Icon left 2. Icon right 3. Icon only

Imagery and video

The imagery and video settings let you enhance each Row block with images and video for added visual context, storytelling, and engagement. These controls allow careful placement, embed options, and sizing flexibility for your media.

Position visuals above or below your main content and adjust aspect ratios for a professional appearance on any screen.

  1. Imagery layout
    Select whether media should appear above or below the content for optimized narrative flow.
    Default: bottom

  2. Image
    Upload or select an image that visually supports your message.

  3. Video service URL
    Embed a YouTube or Vimeo video with a supported link.

  4. Hosted video
    Use a video from your media library for controlled quality and load speeds.

  5. Video poster image
    Choose a placeholder image to display before your video plays.

  6. Aspect ratio
    Adjust the shape and size of your visual media for a consistent, modern design.
    1. Default 2. Landscape 3. Portrait 4. Square 5. Ultrawide 6. Widescreen
    Default: default

  7. Autoplay video
    Set your video to start automatically when the row opens.

  8. Loop video
    Replay your video continuously for looping demos or visual effects.

  9. Mute video
    Decide if video should start muted—recommended for better usability.
    Default: true

  10. Show video player controls
    Let users start, pause, or adjust video playback with visible controls.
    Default: true

Visibility

Visibility controls allow you to manage where and when the Row block displays so you can target the right content to the right device. Use these options to keep your Accordion organized and responsive.

Strategically show or hide rows on desktop or mobile to streamline the user experience.

  1. Visibility
    Pick which device shows the row:
    1. Do not hide 2. Hide on desktop 3. Hide on mobile
    Default: do not hide

Available in sections

The Row block can be added to the following section:

  1. Accordion

Usage notes

  1. Responsive design
    Adjust aspect ratio and imagery placement to provide consistent layouts across devices, and use visibility controls for tailored desktop or mobile experiences.

  2. Performance
    Optimize images and videos before upload, and use autoplay and looping settings carefully for better speed and usability.

  3. Accessibility
    Always provide clear row headings, descriptive button text, and alt text for all images and videos. Keep videos muted by default and ensure important information in visuals has a text alternative.

💡 Tip: The most effective Row block setups blend concise content, strong visuals, and precise device targeting for a dynamic, accessible Accordion.