Seventh > Sections > Rich text

Rich Text

The Rich Text section displays Rich Text Cards in a grid or slider layout. Each Rich Text Card combines text content with media (images or videos) in flexible layouts, perfect for storytelling, brand content, or feature highlights.

What It Does

This section displays Rich Text Cards that can contain:

  • Text content (headings, paragraphs, buttons)
  • Media (images or videos)
  • Flexible text and media positioning
  • Customizable layouts for each card

Section Settings Explained

Layout Options

Layout Controls how Rich Text Cards are displayed:

  • Grid - Standard grid layout with cards in rows and columns
  • Slider - Horizontal scrolling slider of cards

Cards Alignment Controls how cards align when they have different heights:

  • Top - Cards align at the top (default)
  • Center - Cards align in the middle
  • Bottom - Cards align at the bottom
  • Stretch - Cards stretch to match the tallest card

Stretch Alignment Type (Only appears when "Stretch" is selected)

  • Top - Content aligns to top when stretched
  • Center - Content aligns to center when stretched
  • Bottom - Content aligns to bottom when stretched
  • Space Between - Content spreads evenly with space between
  • Space Around - Content spreads evenly with space around

Grid Gap Controls the spacing between Rich Text Cards:

  • None - No space between cards
  • Default - Standard spacing
  • XXSmall through XXLarge - Various spacing sizes

Section Header

Position Where the section header appears:

  • Top - Header appears above the cards (default)
  • Left - Header appears to the left of the cards

Stick to Top

  • When enabled: Header stays visible when scrolling
  • When disabled: Header scrolls with the page

Section Header Block The Section Header block can contain:

  • Heading blocks for section titles
  • Text blocks for descriptions
  • Button blocks for call-to-actions
  • Icon blocks and other common blocks

Section Design Options

Color Scheme

  • Choose from your theme's color schemes
  • Applies to the entire section

Top Padding

  • Controls space above the section
  • Options: None, Smaller, Default, Larger, Largest

Bottom Padding

  • Controls space below the section
  • Options: None, Smaller, Default, Larger, Largest

Extend Section Width

  • When enabled: Section extends to full browser width
  • When disabled: Section stays within container width

Show Media Background

  • When enabled: You can add a background image or video
  • When disabled: Uses solid color background

Background Image/Video (Only appears when "Show Media Background" is enabled)

  • Upload an image or video for the section background

Background Overlay (Only appears when background is set)

  • Add a color overlay on top of the background
  • Adjust transparency for subtle effects

Parallax Effect (Only appears when background is set)

  • Adds a scrolling parallax effect to the background
  • Options: None, Subtle, Medium, Strong

Push Content Down (Only appears when background is set)

  • Adjusts how content sits on the background

Make Section Full Height

  • Makes the section fill the entire viewport height

Rich Text Card Options

Each card in the Rich Text section is a Rich Text Card with these options:

Media Options

Image/Video

  • Upload an image or video for the card
  • Supports both images and videos

Minimal Media Aspect Ratio

  • Controls the aspect ratio of the media area
  • Options: Wide (2:1), Landscape (16:9), Standard (3:2), 4:3, Square (1:1), Portrait (5:6), Tall (2:3)
  • Affects card height when fixed height is enabled

Media Position (Desktop) Where the media appears relative to text:

  • Left - Media on the left, text on the right
  • Right - Media on the right, text on the left (default)
  • No Image - Hide media completely

Media Position (Mobile) Where the media appears on mobile devices:

  • Top - Media above text (default)
  • Bottom - Media below text
  • No Image - Hide media on mobile

Media Width (Only appears when media position is left or right)

  • Controls how much space the media takes
  • Options: 25%, 33%, 50%, 75%
  • Remaining space is for text content

Text Content Options

Text Width Controls how wide the text content area is

Inner Content Alignment Controls how content aligns vertically within the card:

  • Top - Content aligns to the top
  • Center - Content aligns to the center (default)
  • Bottom - Content aligns to the bottom
  • Stretch - Content stretches to fill the card height

Stretch Type (Only appears when "Stretch" is selected)

  • Space Between - Content spreads with space between elements
  • Space Around - Content spreads with space around elements

Card Styling

Text Alignment

  • Align text to left, center, or right

Inner Blocks Spacing

  • Controls gap between blocks inside the card

Padding

  • Controls space inside the card
  • Options: XSmall, Small, Regular, Large, XLarge, XXLarge
  • Only visible when background is shown

Add Padding to Media

  • When enabled: Adds extra padding around images and videos
  • Only visible when background is shown

Remove Card Background

  • When enabled: Card has no background
  • When disabled: Card shows background with padding

Border Radius

  • Controls rounded corners on the card
  • Only visible when background is shown

Color Scheme

  • Apply theme color schemes to the card

Card Background

Show Background

  • When enabled: You can add a background image or video to the card

Background Image/Video (Only appears when "Show Background" is enabled)

  • Upload an image or video for the card background

Background Overlay (Only appears when background is set)

  • Add a color overlay on top of the background
  • Adjust transparency

Available Blocks in Rich Text Cards

Each Rich Text Card can contain any of these blocks:

Common Blocks:

  • Heading
  • Text
  • Button
  • Icon
  • Divider
  • Empty Space
  • Caption
  • Star Rating
  • Group (to organize multiple blocks)

Special Blocks:

  • Custom (for custom HTML/Liquid)
  • App blocks (from installed apps)

💡 Note: Rich Text Cards already have a media area, so you typically don't need to add Image or Video blocks separately.

Common Use Cases

Brand Storytelling

  • Use multiple Rich Text Cards to tell your brand story
  • Mix text and images for engaging narratives
  • Use different media positions for visual variety
  • Perfect for "About Us" or brand pages

Feature Highlights

  • Showcase product features or benefits
  • Use left/right media positioning
  • Combine text descriptions with feature images
  • Great for product detail pages

Content Grid

  • Create a grid of content cards
  • Each card tells a different story
  • Mix media positions for visual interest
  • Perfect for homepage content sections

Testimonials with Images

  • Display customer testimonials
  • Include customer photos or product images
  • Use center alignment for focus
  • Combine with Star Rating blocks

Tips for Success

Media Positioning

  • Left/Right - Works well for desktop, creates side-by-side layouts
  • Mobile - Media automatically moves to top on mobile
  • No Media - Use text-only cards for variety
  • Media Width - 50% creates balanced text/media split

Text Content

  • Text Width - 70% works well for readability
  • Use Groups - Organize multiple blocks with Group blocks
  • Spacing - Adjust inner blocks spacing for readability
  • Alignment - Center alignment works well for hero-style cards

Layout

  • Card Count - 2-4 cards work well in a row
  • Consistent Styling - Use similar card styles for cohesion
  • Varied Positions - Mix left and right media positions for interest

Design

  • Color Schemes - Use consistent color schemes
  • Backgrounds - Subtle card backgrounds help content stand out
  • Media Quality - Use high-quality images for best results

Troubleshooting

Media Not Positioning Correctly

Problem: Media doesn't appear in the expected position.

Solutions:

  1. Check Media Position - Verify desktop and mobile position settings
  2. Media Width - Adjust media width if text/media split looks wrong
  3. Mobile Behavior - Remember media moves to top/bottom on mobile

Text Overlapping Media

Problem: Text content overlaps with media.

Solutions:

  1. Media Position - Ensure "No Image" isn't selected
  2. Text Width - Reduce text width if using left/right media
  3. Card Padding - Increase card padding for more space

Cards Too Tall or Short

Problem: Cards have inconsistent heights.

Solutions:

  1. Use Stretch Alignment - Set section cards alignment to "Stretch"
  2. Content Amount - Cards with more content will be taller
  3. Media Aspect Ratio - Adjust aspect ratio for consistent heights

Mobile Display Issues

Problem: Cards don't look good on mobile.

Solutions:

  1. Mobile Media Position - Adjust mobile-specific media position
  2. Text Width - Use full width (100%) on mobile for readability
  3. Test Responsively - Always preview on mobile devices
Did this answer your question? Thanks for the feedback There was a problem submitting your feedback. Please try again later.