<h2 class="toc">Arrow</h2>
<p>The <code>.arrow-&lt;color&gt;</code> classes create an arrow shape. Height can be controlled by adding a <code>.h1</code>, <code>.h2</code>, ... tag.</p>
{% apply view_source %}
<div class="row">
  <div class="col"><h1 class="arrow-primary">H1                   </h1></div>
  <div class="col"><div class="h1 arrow-info">.h1                 </div></div>
  <div class="col"><h1 class="arrow-success text-center">Centered </h1></div>
  <div class="col"><h1 class="arrow-warning shadow">Shadow        </h1></div>
</div>
<div class="row">
  <div class="col"><h2 class="arrow-primary">H2                   </h2></div>
  <div class="col"><div class="h2 arrow-info">.h2                 </div></div>
  <div class="col"><h2 class="arrow-success text-center">Centered </h2></div>
  <div class="col"><h2 class="arrow-warning shadow">Shadow        </h2></div>
</div>
<div class="row">
  <div class="col"><h3 class="arrow-primary">H3                   </h3></div>
  <div class="col"><div class="h3 arrow-info">.h3                 </div></div>
  <div class="col"><h3 class="arrow-success text-center">Centered </h3></div>
  <div class="col"><h3 class="arrow-warning shadow">Shadow        </h3></div>
</div>
<div class="row">
  <div class="col"><h4 class="arrow-primary">H4                   </h4></div>
  <div class="col"><div class="h4 arrow-info">.h4                 </div></div>
  <div class="col"><h4 class="arrow-success text-center">Centered </h4></div>
  <div class="col"><h4 class="arrow-warning shadow">Shadow        </h4></div>
</div>
{% end %}

<p>For large heights, use the <code>.display-*</code> classes.</p>

{% apply view_source %}
<h1 class="display-1 arrow-warning w-50 text-uppercase shadow">Display-1</h1>
<h1 class="display-2 arrow-warning w-50 text-uppercase shadow">Display-2</h1>
<h1 class="display-3 arrow-warning w-50 text-uppercase shadow">Display-3</h1>
<h1 class="display-4 arrow-warning w-50 text-uppercase shadow">Display-4</h1>
{% end %}


<h3>Stages</h3>
<p>To create phases / stages, add a <code>.arrow-tail</code> class to add a tail to the arrow.</p>

{% apply view_source %}
<div class="d-flex">
  <h5 class="mr-4 ml-3 arrow-primary">First</h5>
  <h5 class="mr-4 arrow-info arrow-tail">Second</h5>
  <h5 class="mr-4 arrow-success arrow-tail">Third</h5>
  <h5 class="mr-4 arrow-warning arrow-tail">Fourth</h5>
</div>
{% end %}

<p>TODO: Allow arrows to overlap.</p>
<!-- https://css-tricks.com/examples/ShapesOfCSS/ has examples -->
