Core layouts

Horizontal, image left

Default, core layout with image on the left, content on the right. At small screens, all content is stacked vertically. When a screen is 600px wide or more, the extra small and small layout blocks will snap to a 2-column layout when there is enough room in the grid container. Similarly, when the screen reaches 900px or more, the medium will snap to its 2-column layout when it detects enough room in the grid container.

The default gaps can be overridden by adding the following classes to the block metadata:

Alt text for your images can be written by clicking on the image in your core layout column blocks. ♿️

Extra small

The default size for this block is extra small. In DA, adding extra metadata classes will adjust the block layout. There's a simple 2-column layout, with an image in one column, and text in the other.

In the DA toolbar, a new icon button appears for adding the alt text.

Small

Adds the small modifier class.

The accent button communicates strong emphasis and is reserved for actions that are essential to an experience. Don't use more than 3 accent buttons in the same view. These give extra prominence to important actions and are meant to establish a clear hierarchy.

If you do not provide alt text for images, the image will be considered "decorative" and skipped in screen readers or other assistive technologies.

Medium

Adds the medium modifier class. This example also demonstrates the gap-xs modifier class to overwrite the default gap between the image and text content.

The accent button communicates strong emphasis and is reserved for actions that are essential to an experience. Don't use more than 3 accent buttons in the same view. These give extra prominence to important actions and are meant to establish a clear hierarchy.

Horizontal, image right

Image on the right and content on the left. When a screen is 600px wide or more, the extra small and small layout blocks will snap to a 2-column layout when there is enough room in the grid container. Similarly, when the screen reaches 900px or more, the medium will snap to its 2-column layout when it detects enough room in the grid container.

Extra small

The default size is extra small. In DA, text belongs in the first column with the image in the second column.

It is highly recommended to add valuable, descriptive alt text when your image is more the decorative. If it's critical to understanding the context of your content, add a lovely description!

Small

Adds the small modifier class.

The accent button communicates strong emphasis and is reserved for actions that are essential to an experience. Don't use more than 3 accent buttons in the same view. These give extra prominence to important actions and are meant to establish a clear hierarchy.

Medium

Adds the medium modifier class.

The accent button communicates strong emphasis and is reserved for actions that are essential to an experience. Don't use more than 3 accent buttons in the same view. These give extra prominence to important actions and are meant to establish a clear hierarchy.

Centered

Image appears above the content, with both being horizontally centered. Supports four image sizes, including large. Merge any cells in your columns block to a single column.

Extra small

The default size is extra small. The authoring experience is the same, where you put the image in the left column, and your content in the right column.

you can even have a caption in centered columns. Author it in a row after your content.

Small

Adds the extra small modifier class.

The accent button communicates strong emphasis and is reserved for actions that are essential to an experience. Don't use more than 3 accent buttons in the same view. These give extra prominence to important actions and are meant to establish a clear hierarchy.

Medium

Adds the extra medium modifier class.

The accent button communicates strong emphasis and is reserved for actions that are essential to an experience. Don't use more than 3 accent buttons in the same view. These give extra prominence to important actions and are meant to establish a clear hierarchy.

Large

Adds an extra large modifier class. Not all core layouts support large images.

The accent button communicates strong emphasis and is reserved for actions that are essential to an experience. Don't use more than 3 accent buttons in the same view. These give extra prominence to important actions and are meant to establish a clear hierarchy.

Vertical/stacked

Image appears above the content, both left-aligned. Supports four image sizes, including large. The only difference is to add the align-start modifier class to the columns.

Extra small

The default size is extra small. The authoring experience is the same, where you put the image in the left column, and your content in the right column.

Small

Adds the extra small modifier class.

The accent button communicates strong emphasis and is reserved for actions that are essential to an experience. Don't use more than 3 accent buttons in the same view. These give extra prominence to important actions and are meant to establish a clear hierarchy.

Medium

Adds the extra medium modifier class.

The accent button communicates strong emphasis and is reserved for actions that are essential to an experience. Don't use more than 3 accent buttons in the same view. These give extra prominence to important actions and are meant to establish a clear hierarchy.

Large

Adds an large modifier class. Not all core layouts support large images.

The accent button communicates strong emphasis and is reserved for actions that are essential to an experience. Don't use more than 3 accent buttons in the same view. These give extra prominence to important actions and are meant to establish a clear hierarchy.

Image only

A single full-width image with no text content. Omit the text column from the row.

Image-only core blocks most likely need alt text. Without it, it's not always clear which text is contextually-relevant to the image.

Side-by-side images

Putting 2 images into the columns block will render the images side-by-side. Define the desired image size in the metadata for the columns block. The example below uses medium images.

Putting 3 or more images into the columns block will render a 3-up grid. Define the desired image size in the metadata for the columns block. The example below uses small images.

Title + description

Content with a title and body text and no image. Omit the image column from the row.

Accent button

The accent button communicates strong emphasis and is reserved for actions that are essential to an experience. Don't use more than 3 accent buttons in the same view. These give extra prominence to important actions and are meant to establish a clear hierarchy.

Description only

Body text with no image and no title. Omit the image column from the row.

The accent button communicates strong emphasis and is reserved for actions that are essential to an experience. Don't use more than 3 accent buttons in the same view. These give extra prominence to important actions and are meant to establish a clear hierarchy.

Two-up

When looking to create a two-column grid, multiple core layout content can be added to a single columns block. CSS will size the image as medium. To determine the gap between items, use one of the available gap-* modifier classes.

Always use consistent core block content (for example, an image plus text) in each core block in the grid- don't mix text-only layouts with image plus text layouts. The example below uses all text-only core blocks, with the gap-l class to render a grid with 24px between core blocks.

Text-only layout

Adds the small modifier class.

The accent button communicates strong emphasis and is reserved for actions that are essential to an experience. Don't use more than 3 accent buttons in the same view. These give extra prominence to important actions and are meant to establish a clear hierarchy.

row 1/col 1

Text-only layout

Adds the small modifier class.

The accent button communicates strong emphasis and is reserved for actions that are essential to an experience. Don't use more than 3 accent buttons in the same view. These give extra prominence to important actions and are meant to establish a clear hierarchy.

row 1/col 2

Text-only layout

The accent button communicates strong emphasis and is reserved for actions that are essential to an experience. Don't use more than 3 accent buttons in the same view. These give extra prominence to important actions and are meant to establish a clear hierarchy.

row 2/col 1

Text-only layout

The accent button communicates strong emphasis and is reserved for actions that are essential to an experience. Don't use more than 3 accent buttons in the same view. These give extra prominence to important actions and are meant to establish a clear hierarchy.

row 2/col 2

Text-only layout

The accent button communicates strong emphasis and is reserved for actions that are essential to an experience. Don't use more than 3 accent buttons in the same view. These give extra prominence to important actions and are meant to establish a clear hierarchy.

row 3/col 1

Three-up

When looking to create a three-column grid, multiple core layouts content can be added to a single columns block. CSS will size the image as small. To determine the gap between items, use one of the available gap-* modifier classes.

Always use consistent core block content (for example, an image plus text) in each core block in the grid- don't mix text-only layouts with image plus text layouts. The example below uses all the default image plus text core blocks, with the gap-l class to render a grid with 24px between core blocks.

row 1, column 1
row 1, column 2
row 1, column 3

Small

The accent button communicates strong emphasis and is reserved for actions that are essential to an experience. Don't use more than 3 accent buttons in the same view. These give extra prominence to important actions and are meant to establish a clear hierarchy.

row 1/col 1

Small

The accent button communicates strong emphasis and is reserved for actions that are essential to an experience. Don't use more than 3 accent buttons in the same view. These give extra prominence to important actions and are meant to establish a clear hierarchy.

row 1/col 2

Small

The accent button communicates strong emphasis and is reserved for actions that are essential to an experience. Don't use more than 3 accent buttons in the same view. These give extra prominence to important actions and are meant to establish a clear hierarchy.

row 1/col 3

row 2, column 1
row 2, column 2
row 2, column 3

Small

The accent button communicates strong emphasis and is reserved for actions that are essential to an experience. Don't use more than 3 accent buttons in the same view. These give extra prominence to important actions and are meant to establish a clear hierarchy.

row 2/col 1

Small

The accent button communicates strong emphasis and is reserved for actions that are essential to an experience. Don't use more than 3 accent buttons in the same view. These give extra prominence to important actions and are meant to establish a clear hierarchy.

row 2/col 2

Small

The accent button communicates strong emphasis and is reserved for actions that are essential to an experience. Don't use more than 3 accent buttons in the same view. These give extra prominence to important actions and are meant to establish a clear hierarchy.

row 2/col 3

row 3, column 1

Small

The accent button communicates strong emphasis and is reserved for actions that are essential to an experience. Don't use more than 3 accent buttons in the same view. These give extra prominence to important actions and are meant to establish a clear hierarchy.

row 3/col 1

With captions

In a separate row, add captions to images in the same columns. Captions are recommended for single-image core blocks (i.e. not for use in grids)

Small

The authored size is small. In DA, text belongs in the first column with the image in the second column.

It is highly recommended to add valuable, descriptive alt text when your image is more the decorative. If it's critical to understanding the context of your content, add a lovely description!
image caption here
Alt text for your images can be written by clicking on the image in your core layout column blocks. ♿️

Small

The authored size for this block is small. In DA, adding extra metadata classes will adjust the block layout. There's a simple 2-column layout, with an image in one column, and text in the other.

image caption here