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.