BRAID
Braid Logo
 

ContentBlock

Open in Playroom
Provides a container to constrain the maximum width of the content it wraps.

Alternatives

Maximum width

Use the width prop to adjust the maximum width of the container.
Open in Playroom

Alignment

By default, the content will be center-aligned to its parent, but this can be customised via the align prop.
Center aligned (default)
Left aligned
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.
<ContentBlock
  data={{ testid: 'content-block-1' }}
  // => data-testid="content-block-1"
>
  ...
</ContentBlock>
Open in Playroom