• Patterns
  • Boxes

Box with border

Usage notes

The background is usually white, but may also be tinted off-white using the class .muted.

  
<!-- Top border-->
<article class="box box--padded muted sectioned sectioned-ons-top">
  <div class="box__inner">
    <header class="box__header">
      <h2 class="delta">
        Contact Details for Business Prices
      </h2>
    </header>
    <!-- /box__header -->

    <div class="box__content">
      <div class="vcard">
        <div class="name">Kat Pegler</div>
        <div class="organisation">Business Prices</div>
        <div class="email">
          <a href="mailto:ppi@ons.gsi.gov.uk">ppi@ons.gsi.gov.uk</a>
        </div>
        <div class="tel">Telephone: +44 (0)1633 456468</div>
      </div>
    </div>
    <!-- /box__content -->

    <footer class="box__footer">
      <a class="link-complex mini" href="#">
        <span class="link-complex__target box__action__text">View all contacts</span>
        <span class="icon-book" role="presentation"></span>
      </a>
    </footer>
  </div>
</article>