BRAID
Braid Logo
 

Inline

Open in Playroom
The Inline component is designed for laying out flowing content that is allowed to wrap over multiple lines.

Alternatives

  • Columns — For fine-grained control of widths, spacing and alignment.
  • Tiles — For laying out content over many columns and rows.
  • Box — For custom layouts.

Spacing

The spacing between children can be adjusted using the space prop.Responsive values are supported, e.g. space={{ mobile: 'small', tablet: 'medium', desktop: 'large', wide: 'xlarge' }}
Open in Playroom

Vertical alignment

Items of varying height can be vertically aligned using the alignY prop. Responsive values are supported.
top
center
bottom
Open in Playroom

Horizontal alignment

Items can be aligned horizontally using the align prop. Responsive values are supported.
left
center
right
Open in Playroom

Collapsing across breakpoints

Inlines can be collapsed into a single vertical stack responsively using the collapseBelow prop and specifying the name of the breakpoint, e.g. collapseBelow=“tablet”.The following results in three inline elements from the tablet breakpoint upwards, and collapses into a vertical stack on mobile.
On “tablet” and above
Below “tablet”
Open in Playroom

Reversing the order

By default, Inline renders its content in document order, which also doubles as the screen reader order. The visual order can be flipped using the reverse prop.This is useful when navigating forward within a flow, where the primary action is on the right when inline, and on top when collapsed. For this reason, the default horizontal alignment when reversed is to the right.
On “tablet” and above
Second
First
Below “tablet”
First
Second
Open in Playroom

Semantic elements

By default, Inline renders a div element. You can customise this via the component prop.
<Inline component="span" space="small">
  <Placeholder width={40} height={40} />
  <Placeholder width={40} height={40} />
</Inline>
Open in Playroom

Data attributes

Braid components are very explicit about the properties they accept, which makes providing arbitrary data attributes not possible. Instead, a data prop can be provided as a single collection of data attributes.
<Inline
  data={{ testid: 'inline-1' }}
  // => data-testid="inline-1"
>
  ...
</Inline>
Open in Playroom