Blocks

Content Blocks

Article listing

Check out article listing block to explore it's capabilities.

Article listing block illustration

CTA Inline block

Call to Action (CTA) inline block provides way to get people to take action, obvi.

Image block

Image block provides a way to add image block to a page template

Image-block

Block quote

Block quote block is used to show a quote on a page. Keep this block in mind while providing strong reasoning for the reader to relate to content. 

Block-quote

Video & transcript block

Video & transcript block allows content author to add video and transcript to the page template.

Video transcript block

Site alert

Site alerts provide contextually relevant feedback to the user about helpful information, warnings, errors, and success states.

Promo block

Promo block allows content authors to have a section of a page for promotional purposes.

Layouts

Page layout is the arrangement of visual elements on a page.

30/70 panel block

The 30% section can be used for quick intro, primary button, advertisements. The 70% section can be used to display content, such as articles, detailed information, or other data.

30-70 panel block illustration

Accordion block

An accordion is a user interface pattern that allows users to expand and collapse sections of content.

Accordion block illustration

Button grouping block

The button grouping block is a container of multiple buttons whose actions are related to each other.

Button grouping block illustration

Cards

Cards

A card contains content about a single subject. It provides a way for a user to access more detailed information.

Condensed card block

Condensed card block is used to show a list of objects that can be logically represented as grid of cards and rows

Slide-show image

Solid card block

Solid card block is used to represent a single product or content about a single subject and provides a way for a user to access more detailed information.

Solid card illustration

Borderless card block

Borderless card block is used to show a list of items that can be logically represented as grid of cards and rows.

Content card block

Content cards are a design pattern used in user interfaces to present information or functionality in a visually distinct and organized manner. Use this type of card to promote a single subject.

Content card illustration

Rich text card block

Rich text card block utilizes the rich text editor within the card. Common formatting options within the rich text editor allow for styling text (such as bold and italics) in a way that is unavailable with plain text.

Rich text card block illustration

Collections

Slideshow block

Slideshow block is used to show multiple images on a small portion of a screen

Slide-show image

Collection types

Explore this section to learn about card collection and quick links.

Forms

Forms

Explore this section to learn about forms with multiple question types.

Mini form

The mini form block is a simple form within a container in which facilitates interactions with our customers

Hero mini form block illustration

Other Block Types

Rich text

Rich text is text that is formatted with common formatting options, such as bold and italics, that are unavailable with plain text.

Section header

The section header block helps organize content by displaying a header, description, and optional button. It makes the content easy to scan, contributing to a clear structure that users can understand.

iFrame

An inline frame (iframe) is a HTML element that loads another HTML page within the initial website page. Explore this block to learn more about iFrame.

Site alert

Site alerts provide contextually relevant feedback to the user about helpful information, warnings, errors, and success states.