4.3 components.box Box
A simple box style.
A Drupal block is often styled as a box. However, this design component is not applied to any blocks by default; it is used as an example of how to build and document a CSS component.
"box" is the name of our component, so we define a .box class that we can
apply to any HTML element that needs the box styling. We also provide a
%box placeholder selector so that we can easily extend the basic box
component with @extend %box;.
Take a look at the source code for this component for more information about building a good component.
Examples
Default styling
Box title
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
:hover
The hover/focus styling.
Box title
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
.box--highlight
The "highlight" box variant.
Box title
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
Markup: components/box/box.twig
<div class="box {{modifier_class}}">
<h2 class="box__title">{{title}}</h2>
<div class="box__content">
{{content}}
</div>
</div>
Source:
sass/components/box/_box.scss, line 1