Column Options

One Column

A simple column that stretches to fit its parent.

scaled: true
---
<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.

scaled: true
---
const IslandColumnExample = () => {
    [organization, setOrganization]= React.useState(0)
    return (
        <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>
    )
}
render ( IslandColumnExample )

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

scaled: true
---
<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

scaled: true
---
<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

scaled: true
---
<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(https://amp.businessinsider.com/images/585812ecdd08951a208b478e-1536-768.jpg)',
                    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(https://i0.wp.com/makingstarwars.net/wp-content/uploads/2017/11/IMG_6937.jpg?fit=1200%2C487&ssl=1)',
                    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(http://media.comicbook.com/2016/05/ig88-181139.jpg)',
                    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(https://amp.businessinsider.com/images/585812ecdd08951a208b478e-1536-768.jpg)',
                    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(https://i0.wp.com/makingstarwars.net/wp-content/uploads/2017/11/IMG_6937.jpg?fit=1200%2C487&ssl=1)',
                    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(http://media.comicbook.com/2016/05/ig88-181139.jpg)',
                    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(http://media.comicbook.com/2016/05/ig88-181139.jpg)',
                    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(https://amp.businessinsider.com/images/585812ecdd08951a208b478e-1536-768.jpg)',
                    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.

scaled: true
---
const LeftSupportLayoutExample = () => {
    const [organization, setOrganization] = React.useState(0)
    return (
        <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>
    )
}
render ( LeftSupportLayoutExample )

Right-Support Layout

scaled: true
---
const RightSupportLayoutExample = () => {
    const [organization, setOrganization] = React.useState(0)
    return (

        <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>
    )
}
render (RightSupportLayoutExample)

Spacing

Layout's gutters can be altered. The default is a compact gutter (16px), but can be relaxed (32px), or remove the gutter.

scaled: true
---
<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(https://amp.businessinsider.com/images/585812ecdd08951a208b478e-1536-768.jpg)',
                    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(https://i0.wp.com/makingstarwars.net/wp-content/uploads/2017/11/IMG_6937.jpg?fit=1200%2C487&ssl=1)',
                    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(http://media.comicbook.com/2016/05/ig88-181139.jpg)',
                    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(https://amp.businessinsider.com/images/585812ecdd08951a208b478e-1536-768.jpg)',
                    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(https://i0.wp.com/makingstarwars.net/wp-content/uploads/2017/11/IMG_6937.jpg?fit=1200%2C487&ssl=1)',
                    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(http://media.comicbook.com/2016/05/ig88-181139.jpg)',
                    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(http://media.comicbook.com/2016/05/ig88-181139.jpg)',
                    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(https://amp.businessinsider.com/images/585812ecdd08951a208b478e-1536-768.jpg)',
                    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">
        <Layout.Section>
            <Card hoverable>
                <Card.Section>
                    <Headline size="small" className="m-0 m-b-1">Card 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.Section>
            <Card hoverable>
                <Card.Section>
                    <Headline size="small" className="m-0 m-b-1">Card 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.Section>
            <Card hoverable>
                <Card.Section>
                    <Headline size="small" className="m-0 m-b-1">Card 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.Section>
            <Card hoverable>
                <Card.Section>
                    <Headline size="small" className="m-0 m-b-1">Card 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.Section>
            <Card hoverable>
                <Card.Section>
                    <Headline size="small" className="m-0 m-b-1">Card 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.Section>
            <Card hoverable>
                <Card.Section>
                    <Headline size="small" className="m-0 m-b-1">Card 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">
        <Layout.Section>
            <Card hoverable>
                <Card.Section>
                    <Headline size="small" className="m-0 m-b-1">Card 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.Section>
            <Card hoverable>
                <Card.Section>
                    <Headline size="small" className="m-0 m-b-1">Card 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.Section>
            <Card hoverable>
                <Card.Section>
                    <Headline size="small" className="m-0 m-b-1">Card 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.Section>
            <Card hoverable>
                <Card.Section>
                    <Headline size="small" className="m-0 m-b-1">Card 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.

scaled: true
---
<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">
        <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>

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.

scaled: true
---
<div className="p-4 bg-white">
    <Headline className="m-b-1">Left Aligned</Headline>
    <Layout
        type="4Col"
        justifyContent="left"
    >
        <Layout.Section>
            <Card className="m-b-1" light>
                <Card.Section>
                    <Headline size="small" className="m-0">Column Item</Headline>
                    <BodyText size="small" className="m-0 m-t-1">Text description</BodyText>
                </Card.Section>
            </Card>
        </Layout.Section>
        <Layout.Section>
            <Card className="m-b-1">
                <Card.Section light>
                    <Headline size="small" className="m-0">Column Item</Headline>
                    <BodyText size="small" className="m-0 m-t-1">Text description</BodyText>
                </Card.Section>
            </Card>
        </Layout.Section>
        <Layout.Section>
            <Card className="m-b-1">
                <Card.Section light>
                    <Headline size="small" className="m-0">Column Item</Headline>
                    <BodyText size="small" className="m-0 m-t-1">Text description</BodyText>
                </Card.Section>
            </Card>
        </Layout.Section>
        <Layout.Section>
            <Card className="m-b-1">
                <Card.Section light>
                    <Headline size="small" className="m-0">Column Item</Headline>
                    <BodyText size="small" className="m-0 m-t-1">Text description</BodyText>
                </Card.Section>
            </Card>
        </Layout.Section>
        <Layout.Section>
            <Card className="m-b-1">
                <Card.Section light>
                    <Headline size="small" className="m-0">Column Item</Headline>
                    <BodyText size="small" className="m-0 m-t-1">Text description</BodyText>
                </Card.Section>
            </Card>
        </Layout.Section>
        <Layout.Section>
            <Card className="m-b-1">
                <Card.Section light>
                    <Headline size="small" className="m-0">Column Item</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"
    >
        <Layout.Section>
            <Card className="m-b-1">
                <Card.Section light>
                    <Headline size="small" className="m-0">Column Item</Headline>
                    <BodyText size="small" className="m-0 m-t-1">Text description</BodyText>
                </Card.Section>
            </Card>
        </Layout.Section>
        <Layout.Section>
            <Card className="m-b-1">
                <Card.Section light>
                    <Headline size="small" className="m-0">Column Item</Headline>
                    <BodyText size="small" className="m-0 m-t-1">Text description</BodyText>
                </Card.Section>
            </Card>
        </Layout.Section>
        <Layout.Section>
            <Card className="m-b-1">
                <Card.Section light>
                    <Headline size="small" className="m-0">Column Item</Headline>
                    <BodyText size="small" className="m-0 m-t-1">Text description</BodyText>
                </Card.Section>
            </Card>
        </Layout.Section>
        <Layout.Section>
            <Card className="m-b-1">
                <Card.Section light>
                    <Headline size="small" className="m-0">Column Item</Headline>
                    <BodyText size="small" className="m-0 m-t-1">Text description</BodyText>
                </Card.Section>
            </Card>
        </Layout.Section>
        <Layout.Section>
            <Card className="m-b-1">
                <Card.Section light>
                    <Headline size="small" className="m-0">Column Item</Headline>
                    <BodyText size="small" className="m-0 m-t-1">Text description</BodyText>
                </Card.Section>
            </Card>
        </Layout.Section>
        <Layout.Section>
            <Card className="m-b-1">
                <Card.Section light>
                    <Headline size="small" className="m-0">Column Item</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"
    >
        <Layout.Section>
            <Card className="m-b-1">
                <Card.Section light>
                    <Headline size="small" className="m-0">Column Item</Headline>
                    <BodyText size="small" className="m-0 m-t-1">Text description</BodyText>
                </Card.Section>
            </Card>
        </Layout.Section>
        <Layout.Section>
            <Card className="m-b-1">
                <Card.Section light>
                    <Headline size="small" className="m-0">Column Item</Headline>
                    <BodyText size="small" className="m-0 m-t-1">Text description</BodyText>
                </Card.Section>
            </Card>
        </Layout.Section>
        <Layout.Section>
            <Card className="m-b-1">
                <Card.Section light>
                    <Headline size="small" className="m-0">Column Item</Headline>
                    <BodyText size="small" className="m-0 m-t-1">Text description</BodyText>
                </Card.Section>
            </Card>
        </Layout.Section>
        <Layout.Section>
            <Card className="m-b-1">
                <Card.Section light>
                    <Headline size="small" className="m-0">Column Item</Headline>
                    <BodyText size="small" className="m-0 m-t-1">Text description</BodyText>
                </Card.Section>
            </Card>
        </Layout.Section>
        <Layout.Section>
            <Card className="m-b-1">
                <Card.Section light>
                    <Headline size="small" className="m-0">Column Item</Headline>
                    <BodyText size="small" className="m-0 m-t-1">Text description</BodyText>
                </Card.Section>
            </Card>
        </Layout.Section>
        <Layout.Section>
            <Card className="m-b-1">
                <Card.Section light>
                    <Headline size="small" className="m-0">Column Item</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"
    >
        <Layout.Section>
            <Card className="m-b-1">
                <Card.Section light>
                    <Headline size="small" className="m-0">Column Item</Headline>
                    <BodyText size="small" className="m-0 m-t-1">Text description</BodyText>
                </Card.Section>
            </Card>
        </Layout.Section>
        <Layout.Section>
            <Card className="m-b-1">
                <Card.Section light>
                    <Headline size="small" className="m-0">Column Item</Headline>
                    <BodyText size="small" className="m-0 m-t-1">Text description</BodyText>
                </Card.Section>
            </Card>
        </Layout.Section>
        <Layout.Section>
            <Card className="m-b-1">
                <Card.Section light>
                    <Headline size="small" className="m-0">Column Item</Headline>
                    <BodyText size="small" className="m-0 m-t-1">Text description</BodyText>
                </Card.Section>
            </Card>
        </Layout.Section>
        <Layout.Section>
            <Card className="m-b-1">
                <Card.Section light>
                    <Headline size="small" className="m-0">Column Item</Headline>
                    <BodyText size="small" className="m-0 m-t-1">Text description</BodyText>
                </Card.Section>
            </Card>
        </Layout.Section>
        <Layout.Section>
            <Card className="m-b-1">
                <Card.Section light>
                    <Headline size="small" className="m-0">Column Item</Headline>
                    <BodyText size="small" className="m-0 m-t-1">Text description</BodyText>
                </Card.Section>
            </Card>
        </Layout.Section>
        <Layout.Section>
            <Card className="m-b-1">
                <Card.Section light>
                    <Headline size="small" className="m-0">Column Item</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>

<Layout type="4Col">
    <div>Layout column</div>
    <div>Layout column</div>
    <div>Layout column</div>
    <div>Layout column</div>
</Layout>

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.

const Items = (
    <React.Fragment>
        <Layout.Section>Layout column</Layout.Section>
        <Layout.Section>Layout column</Layout.Section>
        <Layout.Section>Layout column</Layout.Section>
        <Layout.Section>Layout column</Layout.Section>
        <Layout.Section>Layout column</Layout.Section>
        <Layout.Section>Layout column</Layout.Section>
    </React.Fragment>
);
render (
    <Layout type="4Col" autoSections={false}>
        {Items}
    </Layout>
)

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