Breakout

Allows components to "break out" of a <Container>.

Examples

Breakout

Contained

I'm free!

Contained

Code

<Container
  gap="16px"
  maxInlineSize="reading"
>
  <Placeholder>
    Contained
  </Placeholder>
  <Breakout>
    <Placeholder>
      I'm free!
    </Placeholder>
  </Breakout>
  <Placeholder>
    Contained
  </Placeholder>
</Container>

Start Alignment

View standalone

<Breakout> also works when the container alignment is set to start.

Contained

I'm free!

Contained

Code

<Container
  align="start"
  gap="16px"
  maxInlineSize="reading"
>
  <Placeholder>
    Contained
  </Placeholder>
  <Breakout>
    <Placeholder>
      I'm free!
    </Placeholder>
  </Breakout>
  <Placeholder>
    Contained
  </Placeholder>
</Container>

Breakout From Container with Padding

View standalone

It also works when the container has padding.

Contained

I'm free!

Contained

Code

<Container
  gap="16px"
  maxInlineSize="reading"
  withPadding
>
  <Placeholder>
    Contained
  </Placeholder>
  <Breakout>
    <Placeholder>
      I'm free!
    </Placeholder>
  </Breakout>
  <Placeholder>
    Contained
  </Placeholder>
</Container>

Props

`atoms`

Applies permitted design system styles. See styling documentation for more.