Components

Triangles

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.

Bottom

<div class="row center">
  <div class="col-6">
    <div class="box bg-primary clr-white align-center triangle-bottom">
      <span>This is a box with a triangle at the bottom.</span>
    </div>
  </div>
</div>

Left

<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>

Right

<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>

Top

<div class="row center">
  <div class="col-6">
    <div class="box bg-primary clr-white align-center triangle-top">
      <span>This is a box with a triangle at the top.</span>
    </div>
  </div>
</div>

Responsiveness

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.