Layout

On this page: Columns | Widths | Collapsibles | Tables | Other

Layout & Template Options

Columns

Single column

The first and single column inside this columns block. Does not make sense to have only one column, but it is possible and will take up all the available width. It’s the same as having only one block in a row, which functions similarly.

Also… note how a column has default padding (space) around it, while a Paragraph or Group in the same container does not.

Column combinations

The first of two equal columns. The columns have equal widths and heights by default.

The second of two columns. The columns have equal widths and heights by default.

The first of three equal columns at 33.33% wide.

The second of three columns at 33.33% wide.

The third of three columns and 33.33% wide. This column is intentionally longer to demonstrate a Top vertical alignment setting.

The first of two unequal columns and 75% wide. This column also has an extra third line of content, but the height of both columns should still match because of the flex styling. What is different in this case is that the columns are have a vertical alignment of Middle.

The second of two unequal columns and 25% wide.

Width Designations

Normal width

Exceaqui aut ommolutestet estrum nonse invello rescias min cor asperero coreceatiis estia denduntis ist, quamus doluptae cum cone reratus am verchit quuntotatem quodita sandignia accat alicienese maionsequis dolorestio voluptis volupturi idenet denisquodi ni consedio. Nemqui aut optin pel ius ipsandi arum aliquaecum reperivent

“Wide width”

“Full width”

Collapsibles

This is the content for the first tab. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

Column A

Column B

This is the content for the second tab. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

Details/Tipdowns

This is a detail/tipdown and shows collapsed by default

basic paragraph

This is an open tipdown; if you click it, it will close

This is a tipdown with a long name. It extends… for a while!
And while it could even keep going, note how a line break can be inserted… and the whole thing is clickable

Tables

Basic

sed do eiusmod tempor	incididunt ut labore	et dolore magna	aligua.
Ut enim ad	minim veniam	quis nostrud exercitation	ullamco laboris
nisi ut aliquip	ex ea commodo	consequat.	Duis aute irure dolor in reprehenderit

Basic (flex width), Header & Caption

Lorem ipsum	dolor sit amet	consectetur	adipiscing elit
sed do eiusmod tempor	incididunt ut labore	et dolore magna	aligua.
Ut enim ad	minim veniam	quis nostrud exercitation	ullamco laboris
nisi ut aliquip	ex ea commodo	consequat.	Duis aute irure dolor in reprehenderit

Ut aliquip ex ea commodo consequat.

Alternating rows + Header, Footer

Lorem ipsum	dolor sit amet	consectetur	adipiscing elit
sed do eiusmod tempor	incididunt ut labore	et dolore magna	aligua.
Ut enim ad	minim veniam	quis nostrud exercitation	ullamco laboris
nisi ut aliquip	ex ea commodo	consequat.	Duis aute irure dolor in reprehenderit
in voluptate	velit esse	cillum dolore	eu fugiat nulla pariatur.

Other

Rows

Full width – Group; colored background; inner blocks use content width

Full width – Group; colored background;

Full width – Column; colored background;

Patterns

Patterns are indicated by purple icons. They will vary by site and may be moved to a Custom page.