4.1 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
<span class="xml"><span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"box </span></span></span><span class="hljs-template-variable">{{modifier_class}}</span><span class="xml"><span class="hljs-tag"><span class="hljs-string">"</span>></span>
<span class="hljs-tag"><<span class="hljs-name">h2</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"box__title"</span>></span></span><span class="hljs-template-variable">{{title}}</span><span class="xml"><span class="hljs-tag"></<span class="hljs-name">h2</span>></span>
<span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"box__content"</span>></span>
</span><span class="hljs-template-variable">{{content}}</span><span class="xml">
<span class="hljs-tag"></<span class="hljs-name">div</span>></span>
<span class="hljs-tag"></<span class="hljs-name">div</span>></span>
</span>
Source:
components/box/_box.scss, line 1