Hero overlay

This hero is built with a flex layout, aligned and justified so that the content will always be centered horizontally and vertically. To change this section’s background, select the “Hero Overlay” then scroll to the background section of the Style panel and replace the image. You can also adjust the opacity of the overlay’s black background for better contrast.

#ff8c00#f5761a#ff9234#fa8128#ff5e0e#f5761a#fc6a03#ed820e#ed7117

Colour #cc5801

Use these cards when you want to display content with an image, such as a blog post or product. They’re built with CSS grid to enable the 3-column layout. When you select the “Cards Grid Container,” you’ll see a red icon on the top right. Click the icon to edit the number of columns, the column gap, and more!

Colour #dd571c

The card images have fit set to cover, so they fill their masking container without stretching. Try making the “Cards Image Mask” a circle using border-radius or adjusting the size ratio using top padding. Don’t forget to set an alt description for each image, which will help with accessibility.

Colour #bb5500

The card images have fit set to cover, so they fill their masking container without stretching. Try making the “Cards Image Mask” a circle using border-radius or adjusting the size ratio using top padding. Don’t forget to set an alt description for each image, which will help with accessibility.

Card one

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique.

Card two

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique.

Card three

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique.

Feature section

The feature layout is built with flex, like the hero layout. Don’t like our typesetting? You can update every detail in the typography section of the Style panel.

You can also add spacing between the heading and paragraph, swap a video in for the image, or add a button. Just make sure to drop your button into the div block that contains this content.

Main content

The rich text element allows you to create and format headings, paragraphs, blockquotes, images, and video all in one place, instead of having to add and format them individually. Just double-click and start writing.

Static and dynamic content editing

A rich text element can be used with static or dynamic content. For static content, just drop the element into any page and begin editing. For dynamic content, add a rich text field to any collection and then connect a rich text element to that field in the settings panel. Voila!

To style the headings, paragraphs, blockquotes, figures, images, and captions inside your rich text element, first:

  1. Give the rich text element a class
  2. Select the element within the rich text that you want to style — a blockquote, for example
  3. Click the + sign below the selector field to “Nest selector inside of” your rich text element’s class

How to customize formatting for each rich text element

And this would be an H5
  • A rich text element can be used with static or dynamic content. For static content, just drop it into any page and begin editing.
  • For dynamic content, add a rich text field to any collection and then connect a rich text element to that field in the settings panel.

The rich text element allows you to create and format headings, paragraphs, blockquotes, images, and video all in one place instead of having to add and format them individually. Just double-click and start writing.

Headings, paragraphs, blockquotes, figures, images, and figure captions can all be styled after a class is added to the rich text element using the “When inside of” nested selector system.

CTA with #ff9234

This section uses a container element to ensure the content looks right on every device. It’s centered with the class “Centered Container.”

Convert!

Feature section

The feature layout is built with flex, like the hero layout. Don’t like our typesetting? You can update every detail in the typography section of the Style panel.

You can also add spacing between the heading and paragraph, swap a video in for the image, or add a button. Just make sure to drop your button into the div block that contains this content.

A CTA with #cc5801

This section uses a container element to ensure the content looks right on every device. It’s centered with the class “Centered Container.”

Convert!

Feature section

The feature layout is built with flex, like the hero layout. Don’t like our typesetting? You can update every detail in the typography section of the Style panel.

You can also add spacing between the heading and paragraph, swap a video in for the image, or add a button. Just make sure to drop your button into the div block that contains this content.

A CTA with #ff8c00

This section uses a container element to ensure the content looks right on every device. It’s centered with the class “Centered Container.”

Convert!

Feature section

The feature layout is built with flex, like the hero layout. Don’t like our typesetting? You can update every detail in the typography section of the Style panel.

You can also add spacing between the heading and paragraph, swap a video in for the image, or add a button. Just make sure to drop your button into the div block that contains this content.

CTA with #dd571c

This section uses a container element to ensure the content looks right on every device. It’s centered with the class “Centered Container.”

Convert!

Feature section

The feature layout is built with flex, like the hero layout. Don’t like our typesetting? You can update every detail in the typography section of the Style panel.

You can also add spacing between the heading and paragraph, swap a video in for the image, or add a button. Just make sure to drop your button into the div block that contains this content.

CTA with #fa8128

This section uses a container element to ensure the content looks right on every device. It’s centered with the class “Centered Container.”

Convert!

Feature section

The feature layout is built with flex, like the hero layout. Don’t like our typesetting? You can update every detail in the typography section of the Style panel.

You can also add spacing between the heading and paragraph, swap a video in for the image, or add a button. Just make sure to drop your button into the div block that contains this content.

CTA with #bb5500

This section uses a container element to ensure the content looks right on every device. It’s centered with the class “Centered Container.”

Convert!