Layout

Component overview

The layout components in Mesh are:

• Box
• Container
• Section
• SplitSection
• Inline
• Stack
• Column and Columns
• Tiles
• Hidden

These components have been designed with responsiveness in mind using the custom spacing and screen breakpoint values provided by our Theme. This responsive feature can be very powerful and should be used in place of custom solutions.

All of these components can be nested within another and can be used as often as required to create the required layout.

Box

The Box component is the lowest-level utility component available in Mesh. The purpose of Box is to negate the need to create custom styles on elements by providing props for standard spacing, background, colors, display properties and more.

This component should be the most used component in your UI as many nested box components can be used for almost all styling requirements. You can never use too many Box components!

<Box display="flex" justifyContent="center" alignItems="center" padding={2} color="darkest" background="lightest" height="100px" borderRadius="standard">
  Lorem ipsum dolor sit amet.
</Box>

Container

The Container component is designed to limit pages and their content to a maximum width of 1200px. On screen sizes above this, the Container will be horizontally centered.

<Container>
  <Stack space={2}>
    <Heading size={2}>Singles health insurance</Heading>
    <Copy color="trueGreen">You want to take care of your health and wellbeing. You're after a health cover that fits the budget, but also gives you value for money.</Copy>
  </Stack>
</Container>

Section

A section of a page, with standardised, responsive padding across screen sizes and a nested Container component. A Section will expand to fill horizontal space and therefore has a range of use cases but was designed with full-width sections of a page in mind.

<>
  <Section background="warmWhite40">
    <Stack space={2}>
      <Heading size={2}>Singles health insurance</Heading>
      <Copy color="trueGreen">You want to take care of your health and wellbeing. You're after a health cover that fits the budget, but also gives you value for money.</Copy>
    </Stack>
  </Section>
  <Section background="sunsetPink40">
    <Stack space={2}>
      <Heading size={2}>Couples health insurance</Heading>
      <Copy>You and your partner are focused on your health and wellbeing. You may be thinking of starting a family, so you want to make sure you have the right level of cover.</Copy>
    </Stack>
  </Section>
</>

SplitSection

The SplitSection component is used to split the full screen width into two equal columns, whilst maintaining the standard container width for the content. It allows background colours to be applied to each side, to the edge of the screen, without affecting the positioning of the content.

<SplitSection padding={8} collapseBelow="md">
  <SplitSection.Item background="brandBase" color="white">
    <LargePlaceholder />
  </SplitSection.Item>
  <SplitSection.Item background="brandLight" color="black">
    <LargePlaceholder />
  </SplitSection.Item>
</SplitSection>

Stack

The Stack component is responsible for controling the vertical white space between elements. Stacks allow you to apply a standard spacing between direct children.

<Stack space={6}>
  <SmallPlaceholder>One</SmallPlaceholder>
  <Stack space={2}>
    <SmallPlaceholder>Two</SmallPlaceholder>
    <SmallPlaceholder>Three</SmallPlaceholder>
  </Stack>
  <SmallPlaceholder>Four</SmallPlaceholder>
</Stack>

Inline

The Inline component is responsible for controling the horizontal white space between elements. This can be thought of as the inverse of the Stack component which focuses on horizontal spacing, rather than vertical. Inline can also be used to manage the horizontal and vertical alignment of it's children.

<Inline space={4} collapseBelow="md" align="left" verticalAlign="bottom">
  <SmallPlaceholder>Left</SmallPlaceholder>
  <SmallPlaceholder>Right</SmallPlaceholder>
</Inline>

By default, Inline will wrap its children when their width exceeds it's surroundings and there isn't enough space to render the inline children on one line.

To prevent this, you may want to use the Column/s components to maintain this horizontal structure regardless of available space. Below is an example on how to achieve this.

Column and Columns

The Column and Columns are layout components that should also be used together. They are responsible for managing elements that need to be displayed in a columnar structure. Column components must be placed inside Columns.

The Column component defines the width and behaviour of the individual columns themselves. Multiple Column components should be used and each can have their own widths and behaviour.

The Columns component manages the horizontal structure surrounding the Column components, including the column positioning and alignment.

By default, the Column widths are equal unless the width prop states otherwise. To ensure the width of the Column only takes up as much space needed to fit the inner content, you can use width="content". The other columns will then take up the remaining space equally. This is demonstrated in the following example, where the first column with a width of content is as wide as the content inside. The second column is then 1/3 of the remaining space, which leaves the last two columns with equal widths sharing 2/3 of the remaining space.

<Columns space={2} collapseBelow="md" align="left" verticalAlign="top">
  <Column width="content">
    <LargePlaceholder>First column</LargePlaceholder>
  </Column>
  <Column width="1/3">
    <LargePlaceholder>Second column</LargePlaceholder>
  </Column>
  <Column>
    <LargePlaceholder>Third column</LargePlaceholder>
  </Column>
  <Column>
    <LargePlaceholder>Fourth column</LargePlaceholder>
  </Column>
</Columns>

Tiles

The Tiles component is used to render a grid layout with equal spacing between the elements.

This grid layout can also be achieved using a combination of other layout components, however this is a simplified and flexible method.

There may be a situation where the Column/s or Tiles components can both achieve the desired layout. Please refer to our FAQ on When to use Column/s or Tiles.

<Tiles space={4} columns={2}>
  <LargePlaceholder>First tile</LargePlaceholder>
  <LargePlaceholder>Second tile</LargePlaceholder>
  <LargePlaceholder>Third tile</LargePlaceholder>
  <LargePlaceholder>Fourth tile</LargePlaceholder>
  <LargePlaceholder>Fifth tile</LargePlaceholder>
</Tiles>

Hidden

The Hidden component is used to manage the responsive visibility of elements.

It is not a structural component like the others, but instead a wrapper around elements that dynamically controls their visibility to users and screen readers.

<Hidden below="xs" screen={false} print={true} screenReader={false}>
  <SmallPlaceholder>Hidden content (below xs screen size)</SmallPlaceholder>
</Hidden>

Examples

Card grid layout

Although this could be done with the Column/s components, the simplest way to do this is with Tiles.

The flex prop (also available on Column) is used to grow the children to the space available, ensuring consistent height. Remove the flex prop in the editor below to see this change in behaviour applied to the cards.

<GreyBox>
  <Tiles space={4} columns={2} flex>
    <Card>
      <Card.Content title="Card Heading">
        <Copy>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</Copy>
        <Link href="/">Click me</Link>
      </Card.Content>
    </Card>

    <Card>
      <Card.Content title="Card Heading">
        <Copy>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</Copy>
      </Card.Content>
    </Card>
    <Card>
      <Card.Content title="Card Heading">
        <Copy>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</Copy>
        <Copy>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</Copy>
      </Card.Content>
    </Card>
    <Card>
      <Card.Content title="Card Heading">
        <Copy>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</Copy>
        <Link href="/">Click me</Link>
      </Card.Content>
    </Card>
  </Tiles>
</GreyBox>

Inline vs. Column/s for horizontal structure

Let's take this simple example using the Inline component:

<GreyBox>
  <Inline space={3} verticalAlign="center">
    <Tag type="info">10</Tag>
    <Copy>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</Copy>
  </Inline>
</GreyBox>

You can see that when the content no longer fits, the children will wrap down to a new line; breaking the initial horizontal structure.

This is often not how you expect the Inline component to behave. If you want the horizontal relationship between the children to remain, you should use the Column/s components:

<GreyBox>
  <Columns space={3} verticalAlign="center">
    <Column width="content">
      <Tag type="info">10</Tag>
    </Column>
    <Column>
      <Copy>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</Copy>
    </Column>
  </Columns>
</GreyBox>

Note the use of width="content". This ensures the Column containing the Tag is only as big as the tag itself.

As you can see, instead of stacking the elements, it now maintains the horizontal structure of the Columns and wraps the copy within its column when the screen width is reduced.

Using Hidden with other layout components

The Hidden component works well with both UI components and other layout components. For example, you may want to responsively hide a Column on small screens.

Resize the screen to watch the example below responsively show and hide the first column.

<GreyBox>
  <Columns space={4} collapseBelow="md">
    <Hidden below="md">
      <Column>
        <Copy>Column 1</Copy>
      </Column>
    </Hidden>
    <Column>
      <Copy>Column 2</Copy>
    </Column>
  </Columns>
</GreyBox>

In this example, we can see that at the md breakpoint, the column wrapped in the Hidden is no longer visible.

FAQs

Can I use layout components together?

Yes! Layout components are utility components and can be used in any combination required.

Here is a playroom example showing how multiple nested layout components can work.

When should I use Column/s or Tiles?

We recommend using Column/s in most cases as it provides more flexibility and customisation. However, there are a number of layouts that benefit from the Tiles.

Use Tiles over Column/s if:

• A grid structure with multiple rows are required
• The layout uses a dynamic number of columns at different screen sizes
• You want to display a collection of identical components (such as Card)

Resources

• Braid Design System: Layout
  • Our layout components were inspired by Seek's Braid design system.

Credits

Author: Jordan Collins

Reviewers: Laurie Jones, Michael Troy

Published: 15 June 2021