Box

The box component styles an element in a box.

Class What it does?
box Styles an element with border and 0.8rem padding.

 

Basic usage

Example:
<p class="box">Nulla quis lorem ut libero malesuada feugiat. Curabitur aliquet quam id dui posuere blandit. Nulla porttitor accumsan tincidunt. Praesent sapien massa, convallis a pellentesque nec, egestas non nisi.</p>
Result:

Nulla quis lorem ut libero malesuada feugiat. Curabitur aliquet quam id dui posuere blandit. Nulla porttitor accumsan tincidunt. Praesent sapien massa, convallis a pellentesque nec, egestas non nisi.

Possible use

By using other components like card and color for example, you can achieve different looks.

Example: 
<p class="box card teal">Nulla quis lorem ut libero malesuada feugiat. Curabitur aliquet quam id dui posuere blandit. Nulla porttitor accumsan tincidunt. Praesent sapien massa, convallis a pellentesque nec, egestas non nisi.</p>
Result:

Nulla quis lorem ut libero malesuada feugiat. Curabitur aliquet quam id dui posuere blandit. Nulla porttitor accumsan tincidunt. Praesent sapien massa, convallis a pellentesque nec, egestas non nisi.

In blocks

Box can also be applied to blocks, either by adding a class on your twig template or using a contrib module that allows you to add block classes.

In SCSS

Using SCSS, there is a mixin you can use:

.block {
  @nclude box;
}

 

The book navigation block on this page uses the box mixin.