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 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 |
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;