Text and image

A single ‘feature’ area that comprises of:

  1. A title
  2. A summary
  3. An optional featured image
  4. A text block
<div class="pinboard bg-steel-85-light small-padding">
    <section class="pinned-items small-padding stack-section">
        <!-- Section header -->
        <header class="text-center">
            <div class="row column">
                <div class="section-header">
                    <h1 class="section-heading">Section heading</h1>
                    <p>Lorem ipsum dolor sit amet consectetur adipiscing elit tempus, morbi nascetur pellentesque per donec arcu hac cursus risus.</p>
                </div>
                <hr class="section-header-divider" />
            </div>
        </header>
        <div class="row column">
            <div class="flex-wrapper small-padding">
                <article class="single-item">
                    <figure>
                        <img src="https://farm5.staticflickr.com/4522/38584729412_9bcf671f91_o_d.jpg" alt="A student making an important point">
                    </figure>
                    <!-- Text block -->
                    <div class="markdown">
                        <p class="summary">Lorem ipsum dolor sit amet consectetur adipiscing elit, id venenatis accumsan condimentum platea pharetra convallis phasellus, fringilla libero ridiculus faucibus enim parturient.</p>
                        <p>Lorem ipsum dolor sit amet consectetur adipiscing elit, convallis eget quam pharetra ultrices varius vitae nascetur, purus orci odio netus ad cubilia.</p>
                        <p>Phasellus nascetur at et accumsan etiam duis a posuere vulputate convallis, gravida litora quis inceptos volutpat dignissim condimentum elit.</p>
                        <p>Sit eu dignissim condimentum dui sociosqu <a href="#">cubilia id sollicitudin molestie</a> class, euismod lobortis erat hac orci pharetra quis massa sociis, dolor non proin vivamus tortor platea montes facilisi dictumst.</p>
                        <p>Cursus semper sapien erat posuere inceptos gravida, habitasse tortor ut facilisi egestas sollicitudin, aptent quisque laoreet aliquet penatibus.</p>
                        <p>Fusce commodo vivamus accumsan massa tellus ultrices netus parturient nam habitasse, malesuada congue laoreet lectus egestas ut turpis vitae.</p>
                    </div>
                </article>
            </div>
        </div>
        <footer class="text-center">
            <div class="row column">
                <!-- COMPONENT: Standard button -->
                <a href="#" class="button">Button text</a>
                <!-- End component: Standard button -->
            </div>
        </footer>
    </section>
</div>