• Patterns
  • Boxes

Dark lifted box

Usage notes

Adds a dark drop-shadow to a box element. To be used for visual emphasis when the box sits on a light grey background.

  
<article class="box solid lifted--dark">
  <div class="box__inner border box--padded" id="lifteddark">
    <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

Uses box-shadow, so comes with the normal CSS3 browser compatibility caveats. Don't rely solely on this to create a visual emphasis.