Self-contained components
Need to grab the viewers attention? Use these triangles to point them in the right direction. Triangles can be added to any element with a colored background class.
<div class="row center">
<div class="col-6">
<div class="box bg-primary clr-white align-center triangle-left mb-2">
<span>This is a box with a triangle at the left.</span>
</div>
</div>
</div>
<div class="row center">
<div class="col-6">
<div class="box bg-primary clr-white align-center triangle-right mb-2">
<span>This is a box with a triangle at the right.</span>
</div>
</div>
</div>
All triangles can be used from the smallest screens and up (.triangle-{direction}
), but also starting from specific breakpoints (.triangle-{direction}-{size}
). For example the combination of .triangle-bottom
and .triangle-left-md
will give a triangle at the bottom and from screen size md
and up it will be moved to the left.