Components

<div class="gel-layout"> <!-- temporary wrapper div adds class to which all the new story styles are attached -->

    <article class="story story--imgright">
        <ul class="byline--top">
            <li class="signpost signpost--breaking">breaking</li>
            <li class="time">2 mins ago</li>
        </ul>
        <figure class="story__lead">
            <a href="#" tabindex="-1" class="story__img">
                <img src="../css/img/blank.svg" width="140" height="80">
            </a>
        </figure>
        <div class="story__wof">
            <h3 class="story__headline"><a href="javascript:;">Lorry lorry ipsy</a></h3>
            <div class="author">
                By <a href="" rel="author">Gustav Metzger</a>
            </div>
            <p>Whitehaven Coal has forecast a 25 per cent increase in production in 2014 as the company aims to start construction in early December.</p>
        </div>
    </article>

</div>

<div class="gel-layout"> <!-- temporary wrapper div adds class to which all the new story styles are attached -->
    
    <article class="story story--hero story--premium-content has-wof">
        <ul class="byline--top">
            <li class="signpost signpost--breaking">breaking</li>
            <li class="time">45 mins ago</li>
        </ul>
        <h3 class="story__headline"><a href="javascript:;">Hopes rise on China dairy deal</a></h3>
        <figure class="story__lead">
            <a href="#" tabindex="-1" class="story__img">
                <img src="../css/img/blank.svg" width="460" height="260">
            </a>
        </figure>
        <div class="story__wof">
            <div class="author">
                By <a href="" rel="author">Hannah Hoch</a>
            </div>
            <p>Whitehaven Coal has forecast a 25 per cent increase in production in 2014 as the company aims to start construction in early December.</p>
            <ul class="bullet-list">
                <li class="premium-content"><a class="icon--arrow--before" href="javascript:;">Whitehaven moves Newcastle port</a></li>
                <li class="premium-content"><a class="icon--arrow--before" href="javascript:;">Whitehaven moves Newcastle port</a></li>
            </ul>
        </div>
    </article>
    
</div>

<div class="gel-layout"> <!-- temporary wrapper div adds class to which all the new story styles are attached -->

    <article class="story story--list story--basic-content has-wof">
        <ul class="byline--top">
            <li class="signpost signpost--breaking">breaking</li>
            <li class="time">2 mins ago</li>
        </ul>
        <div class="story__wof">
            <h3 class="story__headline"><a href="javascript:;">Lorem ipsum dolor sit amet, consectetur</a></h3>
            <div class="author">
                By <a href="" rel="author">Claude Cahun</a>
            </div>
            <p>Whitehaven Coal has forecast a 25 per cent increase in production in 2014 as the company aims to start construction in early December.</p>
        </div>
    </article>
    
</div>

<div class="gel-layout"> <!-- temporary wrapper div adds class to which all the new story styles are attached -->

    <article class="story story--stacked story--premium-content has-wof">
        <ul class="byline--top">
            <li class="signpost signpost--breaking">breaking</li>
            <li class="time">45 mins ago</li>
        </ul>
        <h3 class="story__headline"><a href="javascript:;">Lorem ipsum dolor sit amet, consectetur</a></h3>
        <figure class="story__lead">
            <a href="#" tabindex="-1" class="story__img">
                <img src="../css/img/blank.svg" width="205" height="115">
            </a>
        </figure>
        <div class="story__wof">
            <div class="author">
                By <a href="" rel="author">Julie Ault</a>
            </div>
        </div>
    </article>

</div>

<div class="gel-layout"> <!-- temporary wrapper div adds class to which all the new story styles are attached -->

    <article class="story story--imgright story--promo has-wof">
        <ul class="byline--top">
            <li class="signpost signpost--sponsored">sponsored</li>
        </ul>
        <figure class="story__lead">
            <a href="#" tabindex="-1" class="story__img">
                <img src="../css/img/blank.svg" width="140" height="80">
            </a>
        </figure>
        <div class="story__wof">
            <h3 class="story__headline"><a href="javascript:;">Lorem ipsum dolor sit amet, consectetur</a></h3>
            <p><span class="promo__sponsor">Powered by <span>Commonwealth Bank</span></span></p>
        </div>
    </article>

</div>

<div class="gel-layout"> <!-- temporary wrapper div adds class to which all the new story styles are attached -->

    <article class="story story--stacked story--promo has-wof">
        <ul class="byline--top">
            <li class="signpost signpost--sponsored">sponsored</li>
        </ul>
        <figure class="story__lead">
            <a href="#" tabindex="-1" class="story__img">
                <img src="../css/img/blank.svg" width="300" height="169">
            </a>
        </figure>
        <div class="story__wof">
            <h3 class="story__headline"><a href="javascript:;">Lorem ipsum dolor sit amet, consectetur</a></h3>
            <p><span class="promo__sponsor">Powered by <span>Commonwealth Bank</span></span></p>
        </div>
    </article>

</div>

<div class="panel--error">
    <div class="error__info">
        <span class="icon--flag--before"></span>
        <p>Unfortunately, the page you requested cannot be displayed. This is usually because the page has moved, or there is a typo in the URL. If the problem persists, please <a href="http://www.afr.com/contact-us">contact us</a>.</p>
    </div>
</div>