BRAID

<Inline space="gutter">
  <Placeholder height={48} width={48} />
  <Placeholder height={48} width={48} />
  <Placeholder height={48} width={48} />
  <Placeholder height={48} width={48} />
  <Placeholder height={48} width={48} />
  <Placeholder height={48} width={48} />
  <Placeholder height={48} width={48} />
  <Placeholder height={48} width={48} />
  <Placeholder height={48} width={48} />
  <Placeholder height={48} width={48} />
</Inline>

Open in Playroom

Space: xxsmall

Theme: seekAnz

Theme: seekBusiness

Theme: jobsDbRebrand

Theme: jobsDb

Theme: jobStreet

Theme: jobStreetClassic

Theme: wireframe

Code:

<Inline space="xxsmall">
  <Placeholder height={48} width={48} />
  <Placeholder height={48} width={48} />
  <Placeholder height={48} width={48} />
  <Placeholder height={48} width={48} />
  <Placeholder height={48} width={48} />
  <Placeholder height={48} width={48} />
  <Placeholder height={48} width={48} />
  <Placeholder height={48} width={48} />
  <Placeholder height={48} width={48} />
  <Placeholder height={48} width={48} />
</Inline>

Open in Playroom

Space: xsmall

Theme: seekAnz

Theme: seekBusiness

Theme: jobsDbRebrand

Theme: jobsDb

Theme: jobStreet

Theme: jobStreetClassic

Theme: wireframe

Code:

<Inline space="xsmall">
  <Placeholder height={48} width={48} />
  <Placeholder height={48} width={48} />
  <Placeholder height={48} width={48} />
  <Placeholder height={48} width={48} />
  <Placeholder height={48} width={48} />
  <Placeholder height={48} width={48} />
  <Placeholder height={48} width={48} />
  <Placeholder height={48} width={48} />
  <Placeholder height={48} width={48} />
  <Placeholder height={48} width={48} />
</Inline>

Open in Playroom

Space: small

Theme: seekAnz

Theme: seekBusiness

Theme: jobsDbRebrand

Theme: jobsDb

Theme: jobStreet

Theme: jobStreetClassic

Theme: wireframe

Code:

<Inline space="small">
  <Placeholder height={48} width={48} />
  <Placeholder height={48} width={48} />
  <Placeholder height={48} width={48} />
  <Placeholder height={48} width={48} />
  <Placeholder height={48} width={48} />
  <Placeholder height={48} width={48} />
  <Placeholder height={48} width={48} />
  <Placeholder height={48} width={48} />
  <Placeholder height={48} width={48} />
  <Placeholder height={48} width={48} />
</Inline>

Open in Playroom

Space: medium

Theme: seekAnz

Theme: seekBusiness

Theme: jobsDbRebrand

Theme: jobsDb

Theme: jobStreet

Theme: jobStreetClassic

Theme: wireframe

Code:

<Inline space="medium">
  <Placeholder height={48} width={48} />
  <Placeholder height={48} width={48} />
  <Placeholder height={48} width={48} />
  <Placeholder height={48} width={48} />
  <Placeholder height={48} width={48} />
  <Placeholder height={48} width={48} />
  <Placeholder height={48} width={48} />
  <Placeholder height={48} width={48} />
  <Placeholder height={48} width={48} />
  <Placeholder height={48} width={48} />
</Inline>

Open in Playroom

Space: large

Theme: seekAnz

Theme: seekBusiness

Theme: jobsDbRebrand

Theme: jobsDb

Theme: jobStreet

Theme: jobStreetClassic

Theme: wireframe

Code:

<Inline space="large">
  <Placeholder height={48} width={48} />
  <Placeholder height={48} width={48} />
  <Placeholder height={48} width={48} />
  <Placeholder height={48} width={48} />
  <Placeholder height={48} width={48} />
  <Placeholder height={48} width={48} />
  <Placeholder height={48} width={48} />
  <Placeholder height={48} width={48} />
  <Placeholder height={48} width={48} />
  <Placeholder height={48} width={48} />
</Inline>

Open in Playroom

Space: xlarge

Theme: seekAnz

Theme: seekBusiness

Theme: jobsDbRebrand

Theme: jobsDb

Theme: jobStreet

Theme: jobStreetClassic

Theme: wireframe

Code:

<Inline space="xlarge">
  <Placeholder height={48} width={48} />
  <Placeholder height={48} width={48} />
  <Placeholder height={48} width={48} />
  <Placeholder height={48} width={48} />
  <Placeholder height={48} width={48} />
  <Placeholder height={48} width={48} />
  <Placeholder height={48} width={48} />
  <Placeholder height={48} width={48} />
  <Placeholder height={48} width={48} />
  <Placeholder height={48} width={48} />
</Inline>

Open in Playroom

Space: xxlarge

Theme: seekAnz

Theme: seekBusiness

Theme: jobsDbRebrand

Theme: jobsDb

Theme: jobStreet

Theme: jobStreetClassic

Theme: wireframe

Code:

<Inline space="xxlarge">
  <Placeholder height={48} width={48} />
  <Placeholder height={48} width={48} />
  <Placeholder height={48} width={48} />
  <Placeholder height={48} width={48} />
  <Placeholder height={48} width={48} />
  <Placeholder height={48} width={48} />
  <Placeholder height={48} width={48} />
  <Placeholder height={48} width={48} />
  <Placeholder height={48} width={48} />
  <Placeholder height={48} width={48} />
</Inline>

Open in Playroom

Responsive space, e.g. ['xxsmall', 'medium']

Theme: seekAnz

Theme: seekBusiness

Theme: jobsDbRebrand

Theme: jobsDb

Theme: jobStreet

Theme: jobStreetClassic

Theme: wireframe

Code:

<Inline space={["xxsmall", "medium"]}>
  <Placeholder height={48} width={48} />
  <Placeholder height={48} width={48} />
  <Placeholder height={48} width={48} />
  <Placeholder height={48} width={48} />
  <Placeholder height={48} width={48} />
  <Placeholder height={48} width={48} />
  <Placeholder height={48} width={48} />
  <Placeholder height={48} width={48} />
  <Placeholder height={48} width={48} />
  <Placeholder height={48} width={48} />
</Inline>

Open in Playroom

Align to center

Theme: seekAnz

Theme: seekBusiness

Theme: jobsDbRebrand

Theme: jobsDb

Theme: jobStreet

Theme: jobStreetClassic

Theme: wireframe

Code:

<Inline align="center" space="small">
  <Placeholder height={48} width={48} />
  <Placeholder height={48} width={48} />
  <Placeholder height={48} width={48} />
  <Placeholder height={48} width={48} />
  <Placeholder height={48} width={48} />
  <Placeholder height={48} width={48} />
  <Placeholder height={48} width={48} />
  <Placeholder height={48} width={48} />
  <Placeholder height={48} width={48} />
  <Placeholder height={48} width={48} />
</Inline>

Open in Playroom

Align to right

Theme: seekAnz

Theme: seekBusiness

Theme: jobsDbRebrand

Theme: jobsDb

Theme: jobStreet

Theme: jobStreetClassic

Theme: wireframe

Code:

<Inline align="right" space="small">
  <Placeholder height={48} width={48} />
  <Placeholder height={48} width={48} />
  <Placeholder height={48} width={48} />
  <Placeholder height={48} width={48} />
  <Placeholder height={48} width={48} />
  <Placeholder height={48} width={48} />
  <Placeholder height={48} width={48} />
  <Placeholder height={48} width={48} />
  <Placeholder height={48} width={48} />
  <Placeholder height={48} width={48} />
</Inline>

Open in Playroom

Responsive alignment (e.g. center on mobile, left from tablet upwards)

Theme: seekAnz

Theme: seekBusiness

Theme: jobsDbRebrand

Theme: jobsDb

Theme: jobStreet

Theme: jobStreetClassic

Theme: wireframe

Code:

<Inline align={["center", "left"]} space="small">
  <Placeholder height={48} width={48} />
  <Placeholder height={48} width={48} />
  <Placeholder height={48} width={48} />
  <Placeholder height={48} width={48} />
  <Placeholder height={48} width={48} />
  <Placeholder height={48} width={48} />
  <Placeholder height={48} width={48} />
  <Placeholder height={48} width={48} />
  <Placeholder height={48} width={48} />
  <Placeholder height={48} width={48} />
</Inline>

Open in Playroom

Required props

space

children

ReactNodeNoStrings

Optional props

align

ResponsiveProp<"left" | "right" | "center">

Further References

View Source

Tools

Guides

Foundations

Layout Components

Content Components

Interaction Components

Logic Components

All Components

Inline

Required props

Optional props

Further References