--- title: Box layout: documentation doc-tab: elements doc-subtab: box variables: - name: $box-color value: $text - name: $box-background-color value: $white - name: $box-radius value: $radius-large - name: $box-shadow value: 0 2px 3px rgba($black, 0.1), 0 0 0 1px rgba($black, 0.1) - name: $box-padding value: 1.25rem - name: $box-link-hover-shadow value: 0 2px 3px rgba($black, 0.1), 0 0 0 1px $link - name: $box-link-active-shadow value: inset 0 1px 2px rgba($black, 0.2), 0 0 0 1px $link --- {% include subnav-elements.html %} {% capture box_example %}
Image

John Smith @johnsmith 31m
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean efficitur sit amet massa fringilla egestas. Nullam condimentum luctus turpis.

{% endcapture %}

Box

A white box to contain other elements

{% include meta.html colors=false sizes=false variables=true %}

The .box element is simply a container with a shadow, a border, a radius, and some padding.
For example, you can include a media object:

{% include snippet.html content=box_example %} {% include variables.html %}