Inline

Examples
Space: gutter
Theme: seekAnz
Theme: seekBusiness
Theme: jobsDbRebrand
Theme: jobsDb
Theme: jobStreet
Theme: jobStreetClassic
Theme: wireframe
Code:
<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>
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>
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>
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>
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>
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>
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>
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>
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>
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>
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>
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>

Required props

space
ResponsiveProp<"medium" | "gutter" | "xxsmall" | "xsmall" | "small" | "large" | "xlarge" | "xxlarge" | "none">
children
ReactNodeNoStrings

Optional props

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

Further References