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.

"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

"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.

“Media” Block

The Media Block is a simple container designed for displaying a single image. Images can include both a caption and alt text for additional context and accessibility.

The Media Block does not include an introductory content editor and is not intended for displaying multiple images. When presenting a collection of photos, use a Gallery Block or Carousel Block instead.

"Media" Blocks do not have an "Intro Content" editor and will need a Content Block to list introductory text.

"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.

"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.

Timeline Block

The Timeline Block provides a structured way to present events, milestones, historical information, or other content in chronological order.

• Each timeline item can include a date, title, description. 
• Timeline cards are position to the right of the timeline and can feature the year, text or emoji.
• Timeline Markers: By default, the date is used as the timeline marker. The marker can also be customized to display an emoji or text, making the Timeline Block suitable for content that may not follow a traditional date-based chronology.