post.html

---
layout: has-masthead
---

<article class="c-blog-post">
  <header class="[ c-masthead c-masthead--cover ] js-masthead-cover">
    <figure class="c-masthead__media">
      <img src="images/placeholder-square.jpg" alt="">
      <figcaption class="c-masthead__caption">Lorem ipsum dolor sit amet, consectetur adipiscing elit.<span class="c-masthead__credit">Julian Dawson for Carlisle Photo</span></figcaption>
    </figure>
    <div class="c-masthead__content">
      <div class="o-wrapper">
        <h1 class="c-masthead__headline">Phasellus et augue ut nisl cursus fermentum</h1>
        <p class="c-masthead__text">Quisque in justo tellus. Suspendisse sit amet aliquam eros vitae efficitur arcu.</p>
      </div>
    </div>
  </header>
  <main>
    <div class="c-band">
      <div class="o-wrapper o-wrapper--narrow">
        <div class="c-blog-post__meta o-layout-flex">
          <div class="o-layout-flex__item u-flex-1/2">
            <span class="c-blog-post__badge c-masthead__badge [ c-badge c-badge--blog-post ]">Blog</span>
            <time class="c-blog-post__date">17 April 2017</time>
          </div>
          <div class="c-blog-post__social c-social o-layout-flex__item u-flex-1/2">
            <ul class="c-social__list">
              <li class="c-social__item">
                <p class="c-blog-post__share">Share on:</p>
              </li>
              <li class="c-social__item">
                <a aria-label="Twitter" class="c-social__link" href="/" target="_blank">
                  <svg aria-hidden="true" class="c-social__icon" role="img">
                    <use xlink:href="#icon-twitter" xmlns:xlink="http://www.w3.org/1999/xlink"></use>
                  </svg>
                </a>
              </li>
              <li class="c-social__item">
                <a aria-label="Facebook" class="c-social__link" href="/" target="_blank">
                  <svg aria-hidden="true" class="c-social__icon" role="img">
                    <use xlink:href="#icon-facebook" xmlns:xlink="http://www.w3.org/1999/xlink"></use>
                  </svg>
                </a>
              </li>
            </ul>
          </div>
        </div>
        <div class="c-blog-post__content s-blog-post">

          {% include blog-post.html %}

        </div>
      </div>
    </div>
  </main>
</article>

<section class="c-band c-band--dark">
  <div class="o-wrapper">
    <h2>Related</h2>
    <div class="o-layout-flex">
      <div class="o-layout-flex__item u-flex-1/2">

        {% include teaser.html %}

      </div>
      <div class="o-layout-flex__item u-flex-1/2">

        {% include teaser.html %}

      </div>
    </div>
  </div>
</section>