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:
gap-xsgap-sgap-mgap-lgap-xlgap-xxl
Extra small
Adds the extra extra-small modifier class. 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.
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. 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
Adds the extra extra-small modifier class. In DA, text belongs in the first column with the image in the second column.
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
Adds the extra extra-small modifier class. 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 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
Adds the extra extra-small modifier class. 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.
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.
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.
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
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
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
To add captions to images in the same columns, add the content under your image in the same cell. 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.
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.
Text-align center
Add the text-align-center modifier to the columns metadata to align the text cell to the center of the image. This is supported in extra small, small, and medium, in uncentered columns.
Medium
The authored size is medium. In DA, text belongs in the first column with the image in the second column. In this example, the text should align to the center of the image.
image caption here
Medium
The authored size is medium. In DA, text belongs in the first column with the image in the second column. In this example, the text should align to the center of the image.
Medium
The authored size is medium. In DA, text belongs in the first column with the image in the second column. In this example, the text should align to the center of the image.
Private content
You'll have to log in to see this extra small, private columns block.