Hero Summary Featured {% include 'components/hero-summaries/hero-summary-featured' %}
#
HTML
<div class="inner">
    <div class="hero-summary clearfix">
        <div class="large-col-8">
            <div class="hero-summary-top flexbox flexboxlegacy">
                <span class="hero-summary-top-responsive ">
                    <picture>
                        <source media="(min-width: 1400px)" srcset="http://placehold.it/940x360?mw=400&amp;mh=300, http://placehold.it/940x360?mw=800&amp;mh=600 2x">
                        <source media="(min-width: 768px)" srcset="http://placehold.it/940x360?mw=223&amp;mh=168, http://placehold.it/940x360?mw=446&amp;mh=336 2x">
                        <source media="(min-width: 647px)" srcset="http://placehold.it/940x360?mw=400&amp;mh=300, http://placehold.it/940x360?mw=800&amp;mh=600 2x">
                        <source media="(min-width: 375px)" srcset="http://placehold.it/940x360?mw=343&amp;mh=248, http://placehold.it/940x360?mw=686%mh=496 2x">
                        <img src="http://placehold.it/940x360" alt="">
                    </picture>
                </span>
            </div>
        </div>
        <div class="large-col-4">
            <h2 class="hero-summary-title animate" style="height: 20px;">
                A Title
            </h2>
            <p class="animate">A short summary text block goes in here to give more information about this section.</p>
            <a class="hero-summary-link button animate" href="">See more</a>
        </div>
    </div>
</div>
Twig
<div class="inner">
    <div class="hero-summary clearfix">
        <div class="large-col-8">
            <div class="hero-summary-top flexbox flexboxlegacy">
                <span class="hero-summary-top-responsive ">
                    <picture>
                        <source media="(min-width: 1400px)" srcset="http://placehold.it/940x360?mw=400&amp;mh=300, http://placehold.it/940x360?mw=800&amp;mh=600 2x">
                        <source media="(min-width: 768px)" srcset="http://placehold.it/940x360?mw=223&amp;mh=168, http://placehold.it/940x360?mw=446&amp;mh=336 2x">
                        <source media="(min-width: 647px)" srcset="http://placehold.it/940x360?mw=400&amp;mh=300, http://placehold.it/940x360?mw=800&amp;mh=600 2x">
                        <source media="(min-width: 375px)" srcset="http://placehold.it/940x360?mw=343&amp;mh=248, http://placehold.it/940x360?mw=686%mh=496 2x">
                        <img src="http://placehold.it/940x360" alt="">
                    </picture>
                </span>
            </div>
        </div>
        <div class="large-col-4">
            <h2 class="hero-summary-title animate" style="height: 20px;">
                A Title
            </h2>
            <p class="animate">A short summary text block goes in here to give more information about this section.</p>
            <a class="hero-summary-link button animate" href="">See more</a>
        </div>
    </div>
</div>
{}

A Title

A short summary text block goes in here to give more information about this section.

See more