Breakout
Allows components to "break out" of a <Container>
.
Examples
Contained
I'm free!
Contained
Code
<Containergap="16px"maxInlineSize="reading"><Placeholder>Contained</Placeholder><Breakout><Placeholder>I'm free!</Placeholder></Breakout><Placeholder>Contained</Placeholder></Container>
<Breakout>
also works when the container alignment is set to start
.
Contained
I'm free!
Contained
Code
<Containeralign="start"gap="16px"maxInlineSize="reading"><Placeholder>Contained</Placeholder><Breakout><Placeholder>I'm free!</Placeholder></Breakout><Placeholder>Contained</Placeholder></Container>
It also works when the container has padding.
Contained
I'm free!
Contained
Code
<Containergap="16px"maxInlineSize="reading"withPadding><Placeholder>Contained</Placeholder><Breakout><Placeholder>I'm free!</Placeholder></Breakout><Placeholder>Contained</Placeholder></Container>