• Patterns
  • Boxes

Orange box

Usage notes

Normally used to highlight content not directly related to the content you are currently viewing.

 
<article class="box box--orange box--orange--separated-left">
  <div class="box__inner border box--padded has-icon">
    <header class="box__header">
      <h2 class="gamma">
        <a href="#">
          Personal Inflation Calculator
        </a>
      </h2>
    </header>
    <!-- /box__header -->

    <div class="box__content">
      <p>
        A first estimate of retail sales in volume and value terms, seasonally and non-seasonally adjusted.
      </p>
      <p class="description mini">(4,497 words)</p>
    </div>
    <!-- /box__content -->
  </div>
  <!-- /box__inner -->
</article>

Developer Notes

Any anchors and icons will be orange instead of the default blue.