components / Structure
Layout
Structure
Layout
The layout is used to create the main building blocks of a page. A Layout is typically the direct child of the Page component.
Column Options
One Column
A simple column that stretches to fit its parent.
<div><Pageheader={<Stack alignItems="center" spacing="0"><Stack.Item fill><Headline size="large">One Column</Headline><BodyText subdued>Simple column that stretches to fit its parent</BodyText></Stack.Item><Button primary>Action</Button></Stack>}><style>{`.box {background: #9013fe;color: white;padding: 16px;display: flex;justify-content: center;align-items: center;min-height: 40px;line-height: 2;}.Layout:nth-of-type(even) .box { background: #007e7e; }`}</style><Layout><Layout.Section><div className="box">Item 1</div></Layout.Section><Layout.Section><div className="box">Item 2</div></Layout.Section><Layout.Section><div className="box">Item 3</div></Layout.Section></Layout><Headline className="m-t-4 m-b-2">Practical Example</Headline><Layout><Layout.Section><Bannerstatus="info"icononClose={() => {}}title="Something of note"className="m-b-3"><p>This is a pretty big notification for something of some significance. Here is an even longer message that is sure to reach a second line if you believe in yourself.</p></Banner><Card className="m-t-2">Item 2 — That's how we're gonna win. Not fighting what we hate, saving what we love.</Card><Card placeholder className="m-t-2"><Button primary fill='subtle' inactive iconName="add_circle" iconPosition="right">Add Section</Button></Card></Layout.Section></Layout></Page></div>
Island Column
A shortened single column. Can be used in small, simple forms.
<State initial={0}>{([organization, setOrganization]) => (<div><Pageheader={<Stack alignItems="center" spacing="0"><Stack.Item fill><Headline size="large">One Column</Headline><BodyText subdued>Simple column that stretches to fit its parent</BodyText></Stack.Item><Button primary>Action</Button></Stack>}width="narrow"><style>{`.box {background: #9013fe;color: white;padding: 16px;display: flex;justify-content: center;align-items: center;min-height: 40px;line-height: 2;}.Layout:nth-of-type(even) .box { background: #007e7e; }`}</style><Layout type="island"><Headline className="m-t-4 m-b-0">Island Column</Headline><BodyText subdued>A shortened single column</BodyText><Layout.Section><div className="box">Item 1</div></Layout.Section><Layout.Section><div className="box">Item 2</div></Layout.Section><Layout.Section><div className="box">Item 3</div></Layout.Section></Layout><Layout type="island"><Headline className="m-t-5 m-b">Practical Example</Headline><Layout.Section><Bannerstatus="info"icononClose={() => {}}title="Something of note"className="m-b-3"><p>This is a pretty big notification for something of some significance. Here is an even longer message that is sure to reach a second line if you believe in yourself.</p></Banner><Form><Headline el="div" className="m-b-4" size="small">Add Contact</Headline><Form.Group widths="equal"><Form.Input label="First Name" placeholder="Leia" /><Form.Input label="Last Name" placeholder="Organa" /></Form.Group><Form.Select label="Home Planet" placeholder="Choose Planet" options={[{key:1, value: 1, text: 'Alderaan'},{key:2, value: 2, text: 'Bespin'},{key:3, value: 3, text: 'Coruscant'},{key:4, value: 4, text: 'Dagobah'},{key:5, value: 5, text: 'Hoth'},{key:6, value: 6, text: 'Kashyyyk'},{key:7, value: 7, text: 'Naboo',},{key:8, value: 8, text: 'Tatooine'},{key:9, value: 9, text: 'Yavin'},]} /><Form.Field><Grid columns="equal"><Grid.Column><Form.Group grouped><label>Organization</label><Form.Radiolabel="Rebel Alliance"value="1"checked={organization === 1}onChange={() => setOrganization(1)}/><Form.Radiolabel="Galactic Empire"value="2"checked={organization === 2}onChange={() => setOrganization(2)}/><Form.Radiolabel="Trade Federation"value="3"checked={organization === 3}onChange={() => setOrganization(3)}/></Form.Group></Grid.Column><Grid.Column><Form.Group grouped><label>Attributes</label><Form.Checkbox label="Force User" /><Form.Checkbox label="Pilot" /><Form.Checkbox label="Bounty Hunter" /></Form.Group></Grid.Column></Grid></Form.Field><Form.TextArea label="Quotes" placeholder="Aren't you a little short for a stormtrooper?" /></Form><Card className="m-t-2">Item 2 — That's how we're gonna win. Not fighting what we hate, saving what we love.</Card></Layout.Section></Layout></Page></div>)}</State>
Equal Sized Columns
There can be 2, 3, and 4 equal width columns in a layout. The gutters can also be configured to be relaxed, compact, or gutters at all.
Two Columns
<Pageheader={<Stack alignItems="center" spacing="0"><Stack.Item fill><Headline size="large">Two Columns</Headline><BodyText subdued>This is a page description within the page component.</BodyText></Stack.Item><Button primary>Action</Button></Stack>}><style>{`.box {background: #9013fe;color: white;padding: 16px;display: flex;justify-content: center;align-items: center;min-height: 40px;line-height: 2;}.Layout:nth-of-type(even) .box { background: #007e7e; }`}</style><Headline className="m-t-4 m-b-1">Two Columns, Compact Gutter</Headline><Layout type="2Col"><Layout.Section><div className="box">Item 1</div></Layout.Section><Layout.Section><div className="box">Item 2</div></Layout.Section><Layout.Section><div className="box">Item 3</div></Layout.Section><Layout.Section><div className="box">Item 4</div></Layout.Section></Layout><br /><Headline className="m-t-4 m-b-1">Practical Examples, Equal Columns, Compact Gutter</Headline><Layout type="2Col"><Layout.Section><Card hoverable><Card.Section><p className="h3 m-0 m-b-1">Card Section</p><p className="fs-2 m-0">This card has supporting text below as a natural lead-in to additional content.</p></Card.Section><Card.Section light className="c-neutral-90 fs-2">Last updated 3 mins ago</Card.Section></Card></Layout.Section><Layout.Section><Card hoverable><Card.Section><p className="h3 m-0 m-b-1">Card Section</p><p className="fs-2 m-0">This card has supporting text below as a natural lead-in to additional content.</p></Card.Section><Card.Section light className="c-neutral-90 fs-2">Last updated 3 mins ago</Card.Section></Card></Layout.Section><Layout.Section><Card hoverable><Card.Section><p className="h3 m-0 m-b-1">Card Section</p><p className="fs-2 m-0">This card has supporting text below as a natural lead-in to additional content.</p></Card.Section><Card.Section light className="c-neutral-90 fs-2">Last updated 3 mins ago</Card.Section></Card></Layout.Section><Layout.Section><Card hoverable><Card.Section><p className="h3 m-0 m-b-1">Card Section</p><p className="fs-2 m-0">This card has supporting text below as a natural lead-in to additional content.</p></Card.Section><Card.Section light className="c-neutral-90 fs-2">Last updated 3 mins ago</Card.Section></Card></Layout.Section></Layout></Page>
Three Columns
<Pageheader={<Stack alignItems="center" spacing="0"><Stack.Item fill><Headline size="large">Three Columns</Headline><BodyText subdued>This is a page description within the page component.</BodyText></Stack.Item><Button primary>Action</Button></Stack>}><style>{`.box {background: #9013fe;color: white;padding: 16px;display: flex;justify-content: center;align-items: center;min-height: 40px;line-height: 2;}.Layout:nth-of-type(even) .box { background: #007e7e; }`}</style><Headline className="m-t-4 m-b-1">Three Columns, Compact Gutter</Headline><Layout type="3Col"><Layout.Section><div className="box">Item 1</div></Layout.Section><Layout.Section><div className="box">Item 2</div></Layout.Section><Layout.Section><div className="box">Item 3</div></Layout.Section><Layout.Section><div className="box">Item 4</div></Layout.Section><Layout.Section><div className="box">Item 5</div></Layout.Section><Layout.Section><div className="box">Item 6</div></Layout.Section><Layout.Section><div className="box">Item 7</div></Layout.Section><Layout.Section><div className="box">Item 8</div></Layout.Section></Layout><br /><Layout type="3Col"><Layout.Section><Card hoverable><Card.Section><p className="h3 m-0 m-b-1">Card Section</p><p className="fs-2 m-0">This card has supporting text below as a natural lead-in to additional content.</p></Card.Section><Card.Section light className="c-neutral-90 fs-2">Last updated 3 mins ago</Card.Section></Card></Layout.Section><Layout.Section><Card hoverable><Card.Section><p className="h3 m-0 m-b-1">Card Section</p><p className="fs-2 m-0">This card has supporting text below as a natural lead-in to additional content.</p></Card.Section><Card.Section light className="c-neutral-90 fs-2">Last updated 3 mins ago</Card.Section></Card></Layout.Section><Layout.Section><Card hoverable><Card.Section><p className="h3 m-0 m-b-1">Card Section</p><p className="fs-2 m-0">This card has supporting text below as a natural lead-in to additional content.</p></Card.Section><Card.Section light className="c-neutral-90 fs-2">Last updated 3 mins ago</Card.Section></Card></Layout.Section><Layout.Section><Card hoverable><Card.Section><p className="h3 m-0 m-b-1">Card Section</p><p className="fs-2 m-0">This card has supporting text below as a natural lead-in to additional content.</p></Card.Section><Card.Section light className="c-neutral-90 fs-2">Last updated 3 mins ago</Card.Section></Card></Layout.Section><Layout.Section><Card hoverable><Card.Section><p className="h3 m-0 m-b-1">Card Section</p><p className="fs-2 m-0">This card has supporting text below as a natural lead-in to additional content.</p></Card.Section><Card.Section light className="c-neutral-90 fs-2">Last updated 3 mins ago</Card.Section></Card></Layout.Section><Layout.Section><Card hoverable><Card.Section><p className="h3 m-0 m-b-1">Card Section</p><p className="fs-2 m-0">This card has supporting text below as a natural lead-in to additional content.</p></Card.Section><Card.Section light className="c-neutral-90 fs-2">Last updated 3 mins ago</Card.Section></Card></Layout.Section></Layout></Page>
Four Columns
<Pageheader={<Stack alignItems="center" spacing="0"><Stack.Item fill><Headline size="large">Four Columns</Headline><BodyText subdued>This is a page description within the page component.</BodyText></Stack.Item><Button primary>Action</Button></Stack>}><style>{`.box {background: #9013fe;color: white;padding: 16px;display: flex;justify-content: center;align-items: center;min-height: 40px;line-height: 2;}.Layout:nth-of-type(even) .box { background: #007e7e; }`}</style><Headline className="m-t-4 m-b-1">Four Columns, Compact Gutter</Headline><Layout type="4Col"><Layout.Section><div className="box">Item 1</div></Layout.Section><Layout.Section><div className="box">Item 2</div></Layout.Section><Layout.Section><div className="box">Item 3</div></Layout.Section><Layout.Section><div className="box">Item 4</div></Layout.Section><Layout.Section><div className="box">Item 5</div></Layout.Section><Layout.Section><div className="box">Item 6</div></Layout.Section><Layout.Section><div className="box">Item 7</div></Layout.Section><Layout.Section><div className="box">Item 8</div></Layout.Section></Layout><br /><Headline className="m-t-4 m-b-1">Practical Examples, Equal Columns, Relaxed Gutter</Headline><Layoutstyle={{display: 'flex',}}type="4Col"className="m-b-3"><Layout.Section><Card className="m-b-1" style={{flexBasis: '33%'}}><div style={{paddingBottom: '75%',backgroundImage: `url(${GrandMoffTarkin})`,backgroundPosition: 'center center',backgroundSize: 'cover'}} /><Card.Section><Headline size="small" className="m-0">Grand Moff Tarkin</Headline><BodyText size="small" className="m-0 m-t-1">Don't worry, we'll deal with your rebel friends soon enough!<br/><br/></BodyText></Card.Section><Card.Section light><Button outline primary full>View Character</Button></Card.Section></Card></Layout.Section><Layout.Section><Card className="m-b-1" style={{flexBasis: '33%'}}><div style={{paddingBottom: '75%',backgroundImage: `url(${RoseTico})`,backgroundPosition: 'center center',backgroundSize: 'cover'}} /><Card.Section><Headline size="small" className="m-0">Rose Tico</Headline><BodyText size="small" className="m-0 m-t-1">That's how we're gonna win. Not fighting what we hate, saving what we love.</BodyText></Card.Section><Card.Section light><Button outline primary full>View Character</Button></Card.Section></Card></Layout.Section><Layout.Section><Card className="m-b-1" style={{flexBasis: '33%'}}><div style={{paddingBottom: '75%',backgroundImage: `url(${IG88})`,backgroundPosition: 'center center',backgroundSize: 'cover'}} /><Card.Section><Headline size="small" className="m-0">IG-88</Headline><BodyText size="small" className="m-0 m-t-1">*bzzz*<br />*whirrrrr*<br/>*zippp*</BodyText></Card.Section><Card.Section light><Button outline primary full>View Character</Button></Card.Section></Card></Layout.Section><Layout.Section><Card className="m-b-1" style={{flexBasis: '33%'}}><div style={{paddingBottom: '75%',backgroundImage: `url(${GrandMoffTarkin})`,backgroundPosition: 'center center',backgroundSize: 'cover'}} /><Card.Section><Headline size="small" className="m-0">Grand Moff Tarkin</Headline><BodyText size="small" className="m-0 m-t-1">Don't worry, we'll deal with your rebel friends soon enough!<br/><br/></BodyText></Card.Section><Card.Section light><Button outline primary full>View Character</Button></Card.Section></Card></Layout.Section><Layout.Section><Card className="m-b-1" style={{flexBasis: '33%'}}><div style={{paddingBottom: '75%',backgroundImage: `url(${RoseTico})`,backgroundPosition: 'center center',backgroundSize: 'cover'}} /><Card.Section><Headline size="small" className="m-0">Rose Tico</Headline><BodyText size="small" className="m-0 m-t-1">That's how we're gonna win. Not fighting what we hate, saving what we love.</BodyText></Card.Section><Card.Section light><Button outline primary full>View Character</Button></Card.Section></Card></Layout.Section><Layout.Section><Card className="m-b-1" style={{flexBasis: '33%'}}><div style={{paddingBottom: '75%',backgroundImage: `url(${IG88})`,backgroundPosition: 'center center',backgroundSize: 'cover'}} /><Card.Section><Headline size="small" className="m-0">IG-88</Headline><BodyText size="small" className="m-0 m-t-1">*bzzz*<br />*whirrrrr*<br/>*zippp*</BodyText></Card.Section><Card.Section light><Button outline primary full>View Character</Button></Card.Section></Card></Layout.Section><Layout.Section><Card className="m-b-1" style={{flexBasis: '33%'}}><div style={{paddingBottom: '75%',backgroundImage: `url(${IG88})`,backgroundPosition: 'center center',backgroundSize: 'cover'}} /><Card.Section><Headline size="small" className="m-0">IG-88</Headline><BodyText size="small" className="m-0 m-t-1">*bzzz*<br />*whirrrrr*<br/>*zippp*</BodyText></Card.Section><Card.Section light><Button outline primary full>View Character</Button></Card.Section></Card></Layout.Section><Layout.Section><Card className="m-b-1" style={{flexBasis: '33%'}}><div style={{paddingBottom: '75%',backgroundImage: `url(${GrandMoffTarkin})`,backgroundPosition: 'center center',backgroundSize: 'cover'}} /><Card.Section><Headline size="small" className="m-0">Grand Moff Tarkin</Headline><BodyText size="small" className="m-0 m-t-1">Don't worry, we'll deal with your rebel friends soon enough!<br/><br/></BodyText></Card.Section><Card.Section light><Button outline primary full>View Character</Button></Card.Section></Card></Layout.Section></Layout></Page>
Support Layout
Support Layouts have one small and one large column to a row.
Left Support Layout
Left-support columns have one small and one large column to a row. This can be useful in dedicated Settings Pages.
<State initial={0}>{([organization, setOrganization]) => (<Page><style>{`.box {background: #9013fe;color: white;padding: 16px;display: flex;justify-content: center;align-items: center;min-height: 40px;line-height: 2;}.Layout:nth-of-type(even) .box { background: #007e7e; }`}</style><Headline className="m-t-4 m-b-3">Left Support Layout, Compact</Headline><Layout type="support" direction="left"><Layout.Section><div className="box">Item 1</div></Layout.Section><Layout.Section><div className="box">Item 2</div></Layout.Section></Layout><Headline className="m-t-4 m-b-3">Support Practical Example</Headline><Layout type="support" direction="left"><Layout.Section className="p-r-5"><Headline size="small">Title section</Headline><BodyText size="small" subdued>Don't worry, we'll deal with your rebel friends soon enough!</BodyText></Layout.Section><Layout.Section><Card><Card.Section><Form><Form.Input placeholder='1,200' label='Cost' shortLabel='$' small/><Form.Input placeholder='1,200' label='Cost' shortLabel='$' shortLabelPosition='right'/><Form.Input placeholder='XX/XX/XXXX' label='Date' shortLabel={<Icon name='event' />} large/></Form></Card.Section></Card></Layout.Section><Layout.Section className="p-r-5"><Headline size="small">Another Section</Headline><BodyText size="small" subdued>Don't worry, we'll deal with your rebel friends soon enough! That's how we're gonna win. Not fighting what we hate, saving what we love.</BodyText></Layout.Section><Layout.Section><Card><Card.Section><Form><Form.Group widths="equal"><Form.Input label="First Name" placeholder="Leia" /><Form.Input label="Last Name" placeholder="Organa" /></Form.Group><Form.Select label="Home Planet" placeholder="Choose Planet" options={[{key:1, value: 1, text: 'Alderaan'},{key:2, value: 2, text: 'Bespin'},{key:3, value: 3, text: 'Coruscant'},{key:4, value: 4, text: 'Dagobah'},{key:5, value: 5, text: 'Hoth'},{key:6, value: 6, text: 'Kashyyyk'},{key:7, value: 7, text: 'Naboo',},{key:8, value: 8, text: 'Tatooine'},{key:9, value: 9, text: 'Yavin'},]} /><Form.Field><Grid columns="equal"><Grid.Column><Form.Group grouped><label>Organization</label><Form.Radiolabel="Rebel Alliance"value="1"checked={organization === 1}onChange={() => setOrganization(1)}/><Form.Radiolabel="Galactic Empire"value="2"checked={organization === 2}onChange={() => setOrganization(2)}/><Form.Radiolabel="Trade Federation"value="3"checked={organization === 3}onChange={() => setOrganization(3)}/></Form.Group></Grid.Column><Grid.Column><Form.Group grouped><label>Attributes</label><Form.Checkbox label="Force User" /><Form.Checkbox label="Pilot" /><Form.Checkbox label="Bounty Hunter" /></Form.Group></Grid.Column></Grid></Form.Field><Form.TextArea label="Quotes" placeholder="Aren't you a little short for a stormtrooper?" /><Form.Group className="m-0"><Form.Button primary>Save Contact</Form.Button><Form.Button>Cancel</Form.Button></Form.Group></Form></Card.Section></Card></Layout.Section></Layout></Page>)}</State>
Right-Support Layout
<State initial={0}>{([organization, setOrganization]) => (<Page><style>{`.box {background: #9013fe;color: white;padding: 16px;display: flex;justify-content: center;align-items: center;min-height: 40px;line-height: 2;}.Layout:nth-of-type(even) .box { background: #007e7e; }`}</style><Headline className="m-t-4 m-b-3">Right Support Layout, Compact</Headline><Layout type="support" direction="right"><Layout.Section><div className="box">Item 1</div></Layout.Section><Layout.Section><div className="box">Item 2</div></Layout.Section></Layout><Headline className="m-t-4 m-b-3">Support Practical Example</Headline><Layout type="support" direction="right"><Layout.Section><Card className="m-b-2"><Card.Section><ButtonGroup attached className="m-b-2"><Tooltip direction='br' text='Bold ⌘ + B'><Button iconName='format_bold' /></Tooltip><Tooltip direction='b' text='Italic ⌘ + I'><Button iconName='format_italic' /></Tooltip><Tooltip direction='b' text='Underline ⌘ + U'><Button iconName='format_underlined' /></Tooltip><Tooltip direction='b' text='Strikethrough ⌘ + Shift + X'><Button iconName='format_strikethrough' /></Tooltip><Tooltip direction='b' text='Align Left ⌘ + Shift + L'><Button iconName='format_align_left' /></Tooltip><Tooltip direction='b' text='Align Center ⌘ + Shift + E'><Button iconName='format_align_center' /></Tooltip><Tooltip direction='bl' text='Align Right ⌘ + Shift + R'><Button iconName='format_align_right' /></Tooltip></ButtonGroup><Form className="m-0"><Form.TextArea placeholder="Aren't you a little short for a stormtrooper?" /></Form></Card.Section></Card><Bannerstatus="info"title="Something of note"className="m-b-2"><p>This is a pretty big notification for something of some significance. Here is an even longer message that is sure to reach a second line if you believe in yourself.</p></Banner><Card className="m-b-2"><Card.Section>Information related to this</Card.Section></Card><Card className="m-b-2"><Card.Section><Form><Form.Input placeholder='1,200' label='Cost' shortLabel='$' small/><Form.Input placeholder='1,200' label='Cost' shortLabel='$' shortLabelPosition='right'/><Form.Input placeholder='XX/XX/XXXX' label='Date' shortLabel={<Icon name='event' />} large/></Form></Card.Section></Card></Layout.Section><Layout.Section><Card className="m-b-2"><Card.Section light>Information related to this</Card.Section></Card><Card className="m-b-2"><Card.Section light><Form className="m-0"><Form.Group grouped><label>Attributes</label><Form.Checkbox label="Force User" /><Form.Checkbox label="Pilot" /><Form.Checkbox label="Bounty Hunter" /><Form.Checkbox label="Force User" /><Form.Checkbox label="Pilot" /><Form.Checkbox label="Bounty Hunter" /></Form.Group></Form></Card.Section></Card><Card className="m-b-2"><Card.Section light>Information related to this</Card.Section></Card><ButtonGroup><Button primary>Save</Button><Button>Discard</Button></ButtonGroup></Layout.Section></Layout></Page>)}</State>
Spacing
Layout's gutters can be altered. The default is a compact gutter (16px), but can be relaxed (32px), or remove the gutter.
<Pageheader={<Stack alignItems="center" spacing="0"><Stack.Item fill><Headline size="large">Page Title</Headline><BodyText subdued>A short page description.</BodyText></Stack.Item><Button primary>Action</Button></Stack>}><Headline className="m-t-4 m-b-1">Practical Examples, Equal Columns, Relaxed Gutter</Headline><Layoutstyle={{display: 'flex',}}type="4Col"className="m-b-3"spacing="relaxed"><Layout.Section><Card className="m-b-1" style={{flexBasis: '33%'}}><div style={{paddingBottom: '75%',backgroundImage: `url(${GrandMoffTarkin})`,backgroundPosition: 'center center',backgroundSize: 'cover'}} /><Card.Section><Headline size="small" className="m-0">Grand Moff Tarkin</Headline><BodyText size="small" className="m-0 m-t-1">Don't worry, we'll deal with your rebel friends soon enough!<br/><br/></BodyText></Card.Section><Card.Section light><Button outline primary full>View Character</Button></Card.Section></Card></Layout.Section><Layout.Section><Card className="m-b-1" style={{flexBasis: '33%'}}><div style={{paddingBottom: '75%',backgroundImage: `url(${RoseTico})`,backgroundPosition: 'center center',backgroundSize: 'cover'}} /><Card.Section><Headline size="small" className="m-0">Rose Tico</Headline><BodyText size="small" className="m-0 m-t-1">That's how we're gonna win. Not fighting what we hate, saving what we love.</BodyText></Card.Section><Card.Section light><Button outline primary full>View Character</Button></Card.Section></Card></Layout.Section><Layout.Section><Card className="m-b-1" style={{flexBasis: '33%'}}><div style={{paddingBottom: '75%',backgroundImage: `url(${IG88})`,backgroundPosition: 'center center',backgroundSize: 'cover'}} /><Card.Section><Headline size="small" className="m-0">IG-88</Headline><BodyText size="small" className="m-0 m-t-1">*bzzz*<br />*whirrrrr*<br/>*zippp*</BodyText></Card.Section><Card.Section light><Button outline primary full>View Character</Button></Card.Section></Card></Layout.Section><Layout.Section><Card className="m-b-1" style={{flexBasis: '33%'}}><div style={{paddingBottom: '75%',backgroundImage: `url(${GrandMoffTarkin})`,backgroundPosition: 'center center',backgroundSize: 'cover'}} /><Card.Section><Headline size="small" className="m-0">Grand Moff Tarkin</Headline><BodyText size="small" className="m-0 m-t-1">Don't worry, we'll deal with your rebel friends soon enough!<br/><br/></BodyText></Card.Section><Card.Section light><Button outline primary full>View Character</Button></Card.Section></Card></Layout.Section><Layout.Section><Card className="m-b-1" style={{flexBasis: '33%'}}><div style={{paddingBottom: '75%',backgroundImage: `url(${RoseTico})`,backgroundPosition: 'center center',backgroundSize: 'cover'}} /><Card.Section><Headline size="small" className="m-0">Rose Tico</Headline><BodyText size="small" className="m-0 m-t-1">That's how we're gonna win. Not fighting what we hate, saving what we love.</BodyText></Card.Section><Card.Section light><Button outline primary full>View Character</Button></Card.Section></Card></Layout.Section><Layout.Section><Card className="m-b-1" style={{flexBasis: '33%'}}><div style={{paddingBottom: '75%',backgroundImage: `url(${IG88})`,backgroundPosition: 'center center',backgroundSize: 'cover'}} /><Card.Section><Headline size="small" className="m-0">IG-88</Headline><BodyText size="small" className="m-0 m-t-1">*bzzz*<br />*whirrrrr*<br/>*zippp*</BodyText></Card.Section><Card.Section light><Button outline primary full>View Character</Button></Card.Section></Card></Layout.Section><Layout.Section><Card className="m-b-1" style={{flexBasis: '33%'}}><div style={{paddingBottom: '75%',backgroundImage: `url(${IG88})`,backgroundPosition: 'center center',backgroundSize: 'cover'}} /><Card.Section><Headline size="small" className="m-0">IG-88</Headline><BodyText size="small" className="m-0 m-t-1">*bzzz*<br />*whirrrrr*<br/>*zippp*</BodyText></Card.Section><Card.Section light><Button outline primary full>View Character</Button></Card.Section></Card></Layout.Section><Layout.Section><Card className="m-b-1" style={{flexBasis: '33%'}}><div style={{paddingBottom: '75%',backgroundImage: `url(${GrandMoffTarkin})`,backgroundPosition: 'center center',backgroundSize: 'cover'}} /><Card.Section><Headline size="small" className="m-0">Grand Moff Tarkin</Headline><BodyText size="small" className="m-0 m-t-1">Don't worry, we'll deal with your rebel friends soon enough!<br/><br/></BodyText></Card.Section><Card.Section light><Button outline primary full>View Character</Button></Card.Section></Card></Layout.Section></Layout><Layout type="3Col" spacing="relaxed">{[1,2,3,4].map(section => (<Layout.Section><Card hoverable><Card.Section><Headline size="small" className="m-0 m-b-1">Card Section {section}</Headline><BodyText size="small" className="m-0">This card has supporting text below as a natural lead-in to additional content.</BodyText></Card.Section><Card.Section light className="c-neutral-90 fs-2">Last updated 3 mins ago</Card.Section></Card></Layout.Section>))}</Layout><br /><Layout type="2Col" spacing="relaxed">{[1,2,3,4].map(section => (<Layout.Section><Card hoverable><Card.Section><Headline size="small" className="m-0 m-b-1">Card Section {section}</Headline><BodyText size="small" className="m-0">This card has supporting text below as a natural lead-in to additional content.</BodyText></Card.Section><Card.Section light className="c-neutral-90 fs-2">Last updated 3 mins ago</Card.Section></Card></Layout.Section>))}</Layout></Page>
Multiple Layouts in one Page
An individual page is capable of having multiple layouts, for different contexts. For example, single/islands can be used for notifications and page actions, paired with equal column layouts to show other content.
<Pageheader={<Stack alignItems="center" spacing="0"><Stack.Item fill><Headline size="large">Page Title</Headline><BodyText subdued>A short page description.</BodyText></Stack.Item><Button primary>Action</Button></Stack>}><style>{`table {width: 100%; border-collapse: collapse; border: 1px solid #D8D8D8; border-radius: 6px;}th { background: #F5F5F5; text-align: left; padding: 8px; }tr { border-bottom: 1px solid #D8D8D8; }td { padding: 8px; }`}</style><Layout type="island"><Layout.Section><Bannerstatus="warning"onClose={() => {}}title="Something of note"className="m-b-3"><p>This is a pretty big notification for something of some significance. Here is an even longer message that is sure to reach a second line if you believe in yourself.</p></Banner></Layout.Section></Layout><Layout className="m-b-3"><Card><table className="ui celled table"><thead><tr><th>Name</th><th>Age</th><th>Job</th></tr></thead><tbody><tr><td data-label="Name">James</td><td data-label="Age">24</td><td data-label="Job">Engineer</td></tr><tr><td data-label="Name">Jill</td><td data-label="Age">26</td><td data-label="Job">Engineer</td></tr><tr><td data-label="Name">Elyse</td><td data-label="Age">24</td><td data-label="Job">Designer</td></tr></tbody></table></Card></Layout><Layout type="3Col">{[1,2,3,4,5,6].map(section => (<Layout.Section><Card hoverable><Card.Section><p className="h3 m-0 m-b-1">Card Section {section}</p><p className="fs-2 m-0">This card has supporting text below as a natural lead-in to additional content.</p></Card.Section><Card.Section light className="c-neutral-90 fs-2">Last updated 3 mins ago</Card.Section></Card></Layout.Section>))}</Layout></Page>
Align trailing columns
The alignment of columns at the end of a layout can be customized. They can be aligned left, right, or center. They can also be distributed across the row with space between.
<div className="p-4 bg-white"><Headline className="m-b-1">Left Aligned</Headline><Layouttype="4Col"justifyContent="left">{[1,2,3,4,5,6].map(section => (<Layout.Section><Card className="m-b-1" light><Card.Section><Headline size="small" className="m-0">Column Item {section}</Headline><BodyText size="small" className="m-0 m-t-1">Text description</BodyText></Card.Section></Card></Layout.Section>))}</Layout><Headline className="m-b-1 m-t-6">Center Aligned</Headline><Layouttype="4Col">{[1,2,3,4,5,6].map(section => (<Layout.Section><Card className="m-b-1"><Card.Section light><Headline size="small" className="m-0">Column Item {section}</Headline><BodyText size="small" className="m-0 m-t-1">Text description</BodyText></Card.Section></Card></Layout.Section>))}</Layout><Headline className="m-b-1 m-t-6">Right Aligned</Headline><Layouttype="4Col"justifyContent="right">{[1,2,3,4,5,6].map(section => (<Layout.Section><Card className="m-b-1"><Card.Section light><Headline size="small" className="m-0">Column Item {section}</Headline><BodyText size="small" className="m-0 m-t-1">Text description</BodyText></Card.Section></Card></Layout.Section>))}</Layout><Headline className="m-b-1 m-t-6">Space Between</Headline><Layouttype="4Col"justifyContent="space-between">{[1,2,3,4,5,6].map(section => (<Layout.Section><Card className="m-b-1"><Card.Section light><Headline size="small" className="m-0">Column Item {section}</Headline><BodyText size="small" className="m-0 m-t-1">Text description</BodyText></Card.Section></Card></Layout.Section>))}</Layout></div>
Autowrapping Layout Sections
Layout columns work by wrapping children in a <Layout.Section>. By default, the Layout component can auto-wrap this section around each direct child of the component.
Each <div> is automatically wrapped in a <Layout.Section>
Autowrapping can be problematic when abstracting out Layout children. This issue can be avoided by turning off auto-wrapping (via autoSections={false}) and manually adding a <Layout.Section> for each column.
Best Practices
- The layout in general should be paired with the Page component.
- Layout Density Guidelines by Material Design.
- Use equal-width columns when each section has the same importance.
- For more detailed content usage guidelines, see the Page Layout and Page Header patterns.
Importing
import { Layout } from '@servicetitan/design-system';