You are currently on Anvil1, which is now in maintenance mode. Visit Anvil2 to get the latest version of the design system.
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> <Page header={ <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> <Banner status="info" icon 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> <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> <Page header={ <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> <Banner status="info" icon 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> <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.Radio label="Rebel Alliance" value="1" checked={organization === 1} onChange={() => setOrganization(1)} /> <Form.Radio label="Galactic Empire" value="2" checked={organization === 2} onChange={() => setOrganization(2)} /> <Form.Radio label="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
<Page header={ <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
<Page header={ <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
<Page header={ <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> <Layout style={{ 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.Radio label="Rebel Alliance" value="1" checked={organization === 1} onChange={() => setOrganization(1)} /> <Form.Radio label="Galactic Empire" value="2" checked={organization === 2} onChange={() => setOrganization(2)} /> <Form.Radio label="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> <Banner status="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.
<Page header={ <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> <Layout style={{ 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.
<Page header={ <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> <Banner status="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> <Layout type="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> <Layout type="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> <Layout type="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> <Layout type="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';