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”

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

“Full 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


Collapsibles

Tabs

Contents

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

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

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

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

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

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

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

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

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


Tables

Basic

sed do eiusmod temporincididunt ut laboreet dolore magnaaligua.
Ut enim adminim veniamquis nostrud exercitationullamco laboris
nisi ut aliquipex ea commodoconsequat.Duis aute irure dolor in reprehenderit

Basic (flex width), Header & Caption

Lorem ipsumdolor sit ametconsectetur adipiscing elit
sed do eiusmod temporincididunt ut laboreet dolore magnaaligua.
Ut enim adminim veniamquis nostrud exercitationullamco laboris
nisi ut aliquipex ea commodoconsequat.Duis aute irure dolor in reprehenderit
Ut aliquip ex ea commodo consequat.

Alternating rows + Header, Footer

Lorem ipsumdolor sit ametconsectetur adipiscing elit
sed do eiusmod temporincididunt ut laboreet dolore magnaaligua.
Ut enim adminim veniamquis nostrud exercitationullamco laboris
nisi ut aliquipex ea commodoconsequat.Duis aute irure dolor in reprehenderit
in voluptatevelit essecillum doloreeu 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.