• Patterns
  • General

Actionable header, tight

Download this entire time series from 1956—2014

.csv .xls

Usage notes

Use where you'd want the headers and actions to appear nearly right next to each other, right-aligned, and behaving nicely responsively

  
<div class="actionable-header--tight">
  <h2 class="actionable-header--tight__title delta flush--bottom">Download this entire time series from 1956&#x2014;2014</h2>
  <div class="actionable-header--tight__action actionable-header--tight__action--left">
    <a class="btn btn--primary btn--small" href="#">
      .csv
      <span class="icon-download icon--button-inline" role="presentation"></span>
    </a>
    <a class="btn btn--primary btn--small" href="#">
      .xls
      <span class="icon-download icon--button-inline" role="presentation"></span>
    </a>
  </div>
</div>