• Patterns
  • Boxes

Vertically sectioned box

Usage notes

This will add top and bottom borders to a box.

 
<article class="box border-vertical">
  <div class="box__inner box--padded-vertical">
    <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>

Developer Notes

Keep in mind vertical spacing and responsiveness as two borders near/ on top of each other look really awful. This may need to be combined with panels or other means of keeping the distance between elements.