Box

The box layout is a simple way to create a visual style for contained components within a certain visual style.

As alt post it

px 

			
				<div class="l-box l-box--alt-post-it">
	<div class="l-box__container"></div>
</div>

As flyout

px 

			
				<div class="l-box l-box--flyout"></div>

As frame box

px 

			
				<div class="l-box l-box--framebox"></div>

As frame

px 

			
				<div class="l-box l-box--frame"></div>

As post it

px 

			
				<div class="l-box l-box--post-it"></div>

Default

px 

			
				<div class="l-box"></div>

Documentation

Modifiers

  • l-box--frame

    Create a frame-like box around the component.

  • l-box--framebox

    Create a similar frame-like box around the component.

  • l-box--flyout

    Create a flyout box around the component.

  • l-box--post-it

    Create a post-it like look around the component.

  • l-box--alt-post-it

    Create an alternative post-it like look around the component.