Commentary

The box layout component is a simple container that holds items for display. Box provides its own padding.

Using the .box-shadow class instead, a border and shadow is added to provide a more distinctive look.

Usage

Classes:
.box sets up a parent HTML article tag
.box-shadow same as box but adds a shadow and corners with radius.
Dependencies:
File: box.css
Variables: --bg-component, --padding-normal, --radius, --shadow, --text

Examples

Box and Variants

Basic Box Example

Box with shadow

Box Example with shadow and Content


                <article class="box">
                    <h3>Basic Box Example</p>
                </article>

                <article class="box-shadow">
                    <h3>Box with shadow</p>
                </article>

                <article class="box-shadow">
                    <h3>Box Example with shadow and Content</p>

                    <label class="progress-wrapper" data-show="25%">
                        Some Interesting Relationship
                        <progress class="is-progress-primary" value="25" max="100">25%</progress>
                    </label>
                </article>