.png?2026-05-22T17%3A28%3A18.665Z)
"Content" Block
Styleguide Overview
This page is created automatically when the app starts and no styleguide page exists.
Use it as a visual QA checklist for core page-builder blocks, typography, imagery, buttons, cards, forms, and collection sections.
"Content" Block (H2)
Primarily Used as Editorial Blocks (H3)
Content areas available in Full, Half, 1/3, and 2/3 (H4)
This is a standard paragraph used to demonstrate body copy, line height, font size, spacing, and overall readability. The sample should be long enough to wrap across several lines.
Block quote: Thoughtful design helps people find the information they need while creating a consistent and recognizable experience across every page of a website.
This sentence contains bold text for emphasis within standard body copy. This sentence contains italic text for emphasis within standard body copy1. This sentence contains bold and italic text.
"Content" Block (H4)
1/2 Column 1 (H3)
Unordered List
- First list item
- Second list item
- Third list item
- Nested list item
- Another nested item
- Fourth list item
"Content" Block (H4)
1/2 Column 2 (H3)
Ordered List (Normal Text Bold)
- First step
- Second step
- Third step
- Nested step
- Another nested step
- Fourth step
"Columns" Block
The Columns Block provides a flexible way to organize related content into structured, side-by-side sections. Each column can include a title, description, content, image, and multiple links.
Columns can be configured to display 1, 2, 3, or 4 columns per row. When multiple columns appear together, their heights remain consistent and are determined by the tallest column in the row.
Columns Blocks do not have an "Intro Content" editor and will need a Content Block to list introductory text.
Column images are available in four different aspect ratios to accommodate a variety of content and layouts (This example uses the 1:1 square image format):
- 1:1 — Square
- 3:2 — Photo
- 4:3 — Standard
- 16:9 — Widescreen
****Notice the big space between this block and the columns below
Column 1
Column Description
Column blocks include Title, Description, Content, Images, and multiple Links
Column 2
Column Description
Columns can have 1, 2, 3, or 4 columns in each row. The height stays fixed at the longest block. This example is 3 Columns wide.
Column 3
Column Description
Columns photos can have 4 different photo heights, include 16:9 and square. (This block is square).
Alternating Cards - Problem with bullets
"Content" Block (H4)
1/2 Column 1 (H3)
Unordered List
- First list item
- Second list item
- Third list item
- Nested list item
- Another nested item
- Fourth list item
Alternating Cards
Primarily Used as Editorial Blocks (H3)
Content areas available in Full, Half, 1/3, and 2/3 (H4)
This is a standard paragraph used to demonstrate body copy, line height, font size, spacing, and overall readability. The sample should be long enough to wrap across several lines.
Block quote: Thoughtful design helps people find the information they need while creating a consistent and recognizable experience across every page of a website.
This sentence contains bold text for emphasis within standard body copy. This sentence contains italic text for emphasis within standard body copy1. This sentence contains bold and italic text.
Alternating Cards
The Alternating Cards provides a flexible way to highlight quotes, reviews, or endorsements throughout the website.
Each testimonial can include a quote, author name, role or position, and company. There is no limit to the number of testimonials that can be added.
"Feature" Blocks
There are a few key differences between Features and Featured Blocks.
- Features are text-based and are best suited for highlighting key information, services, or benefits.
- Featured Blocks incorporate photos and are designed to serve as more visual, engaging links to additional content.
"Features" Blocks do not have an "Intro Content" editor and will need a Content Block to list introductory text.
This example is 3 columns wide.
Grid Layout Example
Blocks can have List or Grid form (this is a grid) and 2-4 columns.
Feature Block
Feature cards can explain capabilities without relying on imagery.
Feature Block Emoji
Blocks can feature and Emoji or Text in the top right corner
List Layout Example
Blocks can have List or Grid form (this is a grid) and 2-4 columns.
Feature Block
Feature cards can explain capabilities without relying on imagery.
Feature Block Emoji
Blocks can feature and Emoji or Text in the top right corner
“FAQ” Blocks
The FAQ Block functions similarly to the Accordion Block but is specifically structured for frequently asked questions. Each entry includes a Question and Answer field rather than the Title, Description, and Content fields used by Accordions.
There is no limit to the number of FAQ entries that can be added. FAQs can be configured to allow multiple answers to remain open at the same time or to automatically collapse an open answer when another question is selected.
Display Options
Testimonials can be displayed in two modes:
- Single — Displays an individual testimonial.
- Carousel — Displays multiple testimonials that visitors can cycle through.
The Testimonial Block can be displayed with or without a background, allowing it to work within a variety of page layouts and designs.
Developer
Sample Role, 3twenty9
“Testimonial” Block
The Testimonial Block provides a flexible way to highlight quotes, reviews, or endorsements throughout the website.
Each testimonial can include a quote, author name, role or position, and company. There is no limit to the number of testimonials that can be added
Content Editor
Sample Role, RDI Cleanouts
“Reviews” Block
What is the difference between Testimonial and Review
The Reviews Block provides a flexible way to highlight quotes, reviews, or endorsements throughout the website. Each testimonial can include a quote and author name. There is no limit to the number of testimonials that can be added
Content Editor
The Reviews Block provides a flexible way to highlight quotes, reviews, or endorsements throughout the website. Each testimonial can include a quote and author name. There is no limit to the number of testimonials that can be added
Content Editor
Sample Pre-heading
Call To Action (Left Position)
CTA blocks combine a bold heading, supporting copy, background media, and action links.
This block is "Content Width" - the same width as content blocks on the page.
"Gallery" Block
- The Gallery Block provides a flexible way to display groups of images throughout the website.
- Galleries can be configured to display 2–4 images per row and are available in four different aspect ratios to accommodate a variety of image styles and layouts.
- A Featured Image can be used to give additional emphasis to a specific gallery item. Featured Images display larger than the other images in the gallery, helping draw attention to important or highlighted content.
"Gallery" Blocks do not have an "Intro Content" editor and will need a Content Block to list introductory text.
This example is 3 columns wide.
"Carousel" Block
Use carousel items for compact, visual storytelling. Each slide can pair an image with a short headline and supporting copy to highlight related content, features, or information.
- The Carousel Block provides an image-led way to highlight multiple pieces of content within a compact area of the page.
- Carousels can be configured with several image heights and can be set to auto-play or allow visitors to navigate manually using arrows.
- There is no limit to the number of slides that can be included in a carousel. For the best user experience, keep slide content concise and easy to read, particularly on smaller screens.
Carousel blocks are available in four different aspect ratios to accommodate a variety of content and layouts (This example uses the 1:1 square image format):
- 1:1 — Square
- 3:2 — Photo
- 4:3 — Standard
- 16:9 — Widescreen
"Carousel" Blocks do not have an "Intro Content" editor and will need a Content Block to list introductory text.
Carousel
Carousels can auto-play and have several image heights
Carousel 2
A second slide for navigation QA.
Carousel 3
A third slide checks looping behavior.
"Video" Block
The Video Block provides a simple way to embed video content directly within a page. Videos can be added from YouTube, Vimeo, or a direct video source.
Use the Video Block for interviews, demonstrations, event footage, educational content, promotional videos, or other media that benefits from being viewed directly within the page.
"Team" Block
The Team Block is designed to highlight individual profiles for team members, staff, authors, board members, leadership, or other individuals who require recognition on the website.
The Team Block contains individual Team Member sub-blocks, with no limit to the number of profiles that can be added.
Team Member Fields can include:
- Name
- Role / Position
- Bio
- Photo
- Email Address
- Social Media Links
Display Options
Team members can be displayed using either a Grid or Row layout, depending on the amount of information being presented and the desired visual treatment.
The Grid layout can be configured to display 2, 3, or 4 team members per row. This example uses a two-column layout.
Use the Team Block for content where individual identity, role, and biographical information are important, while maintaining a consistent presentation across multiple profiles.
"Team" Blocks do not have an "Intro Content" editor and will need a Content Block to list introductory text.
"Team" Block
Content Editor
The Team Block contains individual Team Member sub-blocks, with no limit to the number of profiles that can be added.
Display Options
Content Manager
The Grid layout can be configured to display 2, 3, or 4 team members per row. This example uses a two-column layout.
“Pricing Table” Block
Example membership tiers
- ✓The Pricing Table Block provides a clear, easy-to-compare way to display membership levels, subscription plans, dues, or other pricing options
- ✓"Pricing Table" Blocks do not have an "Intro Content" editor and will need a Content Block to list introductory text.
- ✓There is no limit to the number of plans that can be added to a Pricing Table.
Highlighted Plan
Highlighted Plan example tier
- ✓An individual plan can be highlighted to give it greater visual emphasis
- ✓Use the Pricing Table Block when visitors need to quickly compare pricing, features, and benefits across multiple options.
- ✓Use the Pricing Table Block when visitors need to quickly compare pricing, features, and benefits across multiple options.
PROCESS - Sample Subtitle
A sequence of
steps from beginning to end
Intro Content
The block combines structured copy with optional imagery or color treatments to create a section that is easy to scan and follow.
Process
The block contains individual Step Blocks for each stage of the process.
Publish
Preview, test, and publish with confidence.