Tiles

Examples
3 columns
Theme: seekAnz
Theme: seekBusiness
Theme: jobsDbRebrand
Theme: jobsDb
Theme: jobStreet
Theme: jobStreetClassic
Theme: wireframe
Code:
<Tiles columns={3} space="small">
  <Placeholder height={40} />
  <Placeholder height={40} />
  <Placeholder height={40} />
  <Placeholder height={40} />
  <Placeholder height={40} />
  <Placeholder height={40} />
  <Placeholder height={40} />
  <Placeholder height={40} />
  <Placeholder height={40} />
</Tiles>
Responsive columns (e.g. 1 on mobile, 4 from tablet upwards
Theme: seekAnz
Theme: seekBusiness
Theme: jobsDbRebrand
Theme: jobsDb
Theme: jobStreet
Theme: jobStreetClassic
Theme: wireframe
Code:
<Tiles columns={[1, 4]} space="xsmall">
  <Placeholder height={40} />
  <Placeholder height={40} />
  <Placeholder height={40} />
  <Placeholder height={40} />
  <Placeholder height={40} />
  <Placeholder height={40} />
  <Placeholder height={40} />
  <Placeholder height={40} />
  <Placeholder height={40} />
  <Placeholder height={40} />
  <Placeholder height={40} />
  <Placeholder height={40} />
</Tiles>
Dividers (when in a single column)
Theme: seekAnz
Tile
Tile
Tile
Tile
Tile
Tile
Theme: seekBusiness
Tile
Tile
Tile
Tile
Tile
Tile
Theme: jobsDbRebrand
Tile
Tile
Tile
Tile
Tile
Tile
Theme: jobsDb
Tile
Tile
Tile
Tile
Tile
Tile
Theme: jobStreet
Tile
Tile
Tile
Tile
Tile
Tile
Theme: jobStreetClassic
Tile
Tile
Tile
Tile
Tile
Tile
Theme: wireframe
Tile
Tile
Tile
Tile
Tile
Tile
Code:
<Box background="neutralLight" padding="small">
  <Tiles columns={[1, 2]} dividers={true} space={["none", "small"]}>
    <Card>
      <Text>Tile</Text>
    </Card>
    <Card>
      <Text>Tile</Text>
    </Card>
    <Card>
      <Text>Tile</Text>
    </Card>
    <Card>
      <Text>Tile</Text>
    </Card>
    <Card>
      <Text>Tile</Text>
    </Card>
    <Card>
      <Text>Tile</Text>
    </Card>
  </Tiles>
</Box>

Required props

children
ReactNodeNoStrings
space
ResponsiveProp<"medium" | "gutter" | "xxsmall" | "xsmall" | "small" | "large" | "xlarge" | "xxlarge" | "none">
columns
ResponsiveProp<1 | 3 | 2 | 4 | 5>

Optional props

dividers
boolean

Further References