Awesomeness

Box

Simple Box

Boxes can be used to group elements visually on your page. Use the class .box to activate a box.

Example

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

Imports

  • SASS:
    @import "base";
@import "imports/modules/box";

Code

<p class="box">
	Lorem...
</p>

Colored Box

Of course boxes can also come in different colors to match other elements on your page. Use the class .box--colored in addtion to the .box class

Example

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

Imports

  • SASS:
    @import "base";
@import "imports/modules/box";

Code

<p class="box box--colored">
	Lorem...
</p>

Selectable Box

Sometimes boxes need to be selectable, for example if they are part of a checkout process. Use the class .box--selectable to make such a selectable box

Example

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

Imports

  • SASS:
    @import "base";
@import "imports/modules/box";

Code

<p class="box box--selectable">
	Lorem...
</p>

Selected Box

To activate the selected state of a box set the class .box--is-selected in addition to the .box--selectable class

Example

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

Imports

  • SASS:
    @import "base";
@import "imports/modules/box";

Code

<p class="box box--selectable box--is-selected">
	Lorem...
</p>