Box
A white box to contain other elements
The box element is simply a container with a shadow, a border, a radius, and some padding.
For example, you can include a media object:
<div class="box">
<div class="media">
<div class="media-left">
<figure class="image is-48x48">
<img src="/static/img/avatar.svg" alt="Apolokak Lab">
</figure>
</div>
<div class="media-content">
<a class="is-name">Anonymous</a><br/>
<div class="is-text">
No system is safe.
</div>
</div>
</div>
</div>
Boxer
<div class="boxer">
<div class="media">
<div class="media-left">
<figure class="image is-48x48">
<img src="/static/img/avatar.svg" alt="Apolokak Lab">
</figure>
</div>
<div class="media-content">
<a class="is-name">Anonymous</a><br/>
<div class="is-text">
No system is safe.
</div>
</div>
</div>
</div>
As Link
<a class="box">
<div class="media">
<div class="media-left">
<figure class="image is-48x48">
<img src="/static/img/avatar.svg" alt="Apolokak Lab">
</figure>
</div>
<div class="media-content">
<a class="is-name">Anonymous</a><br/>
<div class="is-text">
No system is safe.
</div>
</div>
</div>
</a>
<a class="boxer">
<div class="media">
<div class="media-left">
<figure class="image is-48x48">
<img src="/static/img/avatar.svg" alt="Apolokak Lab">
</figure>
</div>
<div class="media-content">
<a class="is-name">Anonymous</a><br/>
<div class="is-text">
No system is safe.
</div>
</div>
</div>
</a>
Variables #
You can use these variables to customize, Simply set one or multiple of these variables before importing Buval. Learn how.
Name | Type | Default |
|---|---|---|
$box-color | color | $text |
$box-background-color | color | $scheme-main |
$box-radius | size | $radius-large |
$box-shadow | size | 0 0.5em 1em -0.125em rgba($scheme-invert, 0.1), 0 0px 0 1px rgba($scheme-invert, 0.02) |
$box-padding | size | 1.25rem |
$box-link-hover-shadow | size | 0 0.5em 1em -0.125em rgba($scheme-invert, 0.1), 0 0 0 1px $link |
$box-link-active-shadow | size | inset 0 1px 2px rgba($scheme-invert, 0.2), 0 0 0 1px $link |