Design System

Deprecated

The deprecated section contains components that, while still in use in parts of the website, are not going to be reused going forward. Please refer to the Components section for current versions of these components.

Story Types

Story

<section class="strap">
    <div class="strap__body">
            
        <article class="story story--premium-content has-wof">
            <figure class="story__lead">
                <a href="#" tabindex="-1" class="story__img">
                    <img src="../css/img/blank.svg" width="160" height="106">
                </a>
            </figure>
            <div class="story__wof">
                <h3 class="story__headline"><a href="javascript:;">Lorem ipsum dolor sit amet, consectetur</a></h3>
                <ul class="byline">
                    <li class="signpost signpost--live">Live</li>
                    <li class="external">Boss<span class="icon--external-link" title="external site"> External link</span></li>
                    <li class="update">Updated</li>
                    <li class="author">Anthony MacDonald</li>
                    <li class="time"><time datetime="2015-12-03T05:14:42+1000">45m ago</time></li>
                </ul>
                <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="meta">
                    <li class="is-vishidden">Contains:</li>
                    <li><a href="#"><span class="icon--comment" title="This article has 15 comments">total comments</span><span class="meta__count">15</span></a></li>
                    <li class="icon--video" title="This article contains a video">This article contains a video</li>
                    <li class="icon--photo" title="This article contains a photo gallery">This article contains a photo gallery</li>
                    <li class="icon--graph" title="This article contains a graph">This article contains a graph</li>
                </ul>
            </div>
        </article>

    </div>
</section>
<section class="strap">
    <div class="strap__body">
            
        <article class="story stack story--premium-content has-wof">
            <figure class="story__lead">
                <a href="#" tabindex="-1" class="story__img">
                    <img src="../css/img/blank.svg" width="160" height="106">
                </a>
            </figure>
            <div class="story__wof">
                <h3 class="story__headline"><a href="javascript:;">Lorem ipsum dolor sit amet, consectetur</a></h3>
                <ul class="byline">
                    <li class="signpost signpost--live">Live</li>
                    <li class="external">Boss<span class="icon--external-link" title="external site"> External link</span></li>
                    <li class="update">Updated</li>
                    <li class="author">Anthony MacDonald</li>
                    <li class="time"><time datetime="2015-12-03T05:14:42+1000">45m ago</time></li>
                </ul>
                <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="meta">
                    <li class="is-vishidden">Contains:</li>
                    <li><a href="#"><span class="icon--comment" title="This article has 15 comments">total comments</span><span class="meta__count">15</span></a></li>
                    <li class="icon--video" title="This article contains a video">This article contains a video</li>
                    <li class="icon--photo" title="This article contains a photo gallery">This article contains a photo gallery</li>
                    <li class="icon--graph" title="This article contains a graph">This article contains a graph</li>
                </ul>
            </div>
        </article>

    </div>
</section>
<section class="strap">
    <div class="strap__body">
            
        <article class="story stack story--premium-content has-wof">
            <figure class="story__lead">
                <a href="#" tabindex="-1" class="story__img">
                    <img src="../css/img/blank.svg" width="160" height="106">
                </a>
            </figure>
            <div class="story__wof">
                <h3 class="story__headline"><a href="javascript:;">Lorem ipsum dolor sit amet, consectetur</a></h3>
                <ul class="byline">
                    <li class="signpost signpost--live">Live</li>
                    <li class="external">Boss<span class="icon--external-link" title="external site"> External link</span></li>
                    <li class="update">Updated</li>
                    <li class="author">Anthony MacDonald</li>
                    <li class="time"><time datetime="2015-12-03T05:14:42+1000">45m ago</time></li>
                </ul>
                <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="meta">
                    <li class="is-vishidden">Contains:</li>
                    <li><a href="#"><span class="icon--comment" title="This article has 15 comments">total comments</span><span class="meta__count">15</span></a></li>
                    <li class="icon--video" title="This article contains a video">This article contains a video</li>
                    <li class="icon--photo" title="This article contains a photo gallery">This article contains a photo gallery</li>
                    <li class="icon--graph" title="This article contains a graph">This article contains a graph</li>
                </ul>
            </div>
        </article>

    </div>
</section>

Hero Story

<article class="story story--hero story--premium-content has-wof stack">
    <h1 class="story__headline"><a href="javascript:;">Hopes rise on China dairy deal</a></h1>
    <figure class="story__lead">
        <a href="#" tabindex="-1" class="story__img">
            <img width="320" height="210" src="../css/img/blank.svg">
        </a>
    </figure>
    <div class="story__wof">
        <ul class="byline">
            <li class="signpost signpost--live">Live</li>
            <li class="external">Boss<span class="icon--external-link" title="external site"> External link</span></li>
            <li class="update">Updated</li>
            <li class="author">Anthony MacDonald</li>
            <li class="time"><time datetime="2015-12-03T05:14:42+1000">45m ago</time></li>
        </ul>
        <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="meta">
            <li class="is-vishidden">Contains:</li>
            <li><a href="#"><span class="icon--comment" title="This article has 15 comments">total comments</span><span class="meta__count">15</span></a></li>
            <li class="icon--video" title="This article contains a video">This article contains a video</li>
            <li class="icon--photo" title="This article contains a photo gallery">This article contains a photo gallery</li>
            <li class="icon--graph" title="This article contains a graph">This article contains a graph</li>
            <li class="icon--data" title="This article contains an infographic">This article contains an infographic</li>
        </ul>
        <ul class="bullet-list">
            <li class="premium-content"><a href="javascript:;">Whitehaven moves Newcastle port</a></li>
            <li class="premium-content"><a href="javascript:;">Whitehaven moves Newcastle port</a></li>
        </ul>
    </div>
</article>
<article class="story story--hero story--premium-content has-wof stack">
    <h1 class="story__headline"><a href="javascript:;">Hopes rise on China dairy deal</a></h1>
    <figure class="story__lead">
        <a href="#" tabindex="-1" class="story__img">
            <img width="320" height="210" src="../css/img/blank.svg">
        </a>
    </figure>
    <div class="story__wof">
        <ul class="byline">
            <li class="signpost signpost--live">Live</li>
            <li class="external">Boss<span class="icon--external-link" title="external site"> External link</span></li>
            <li class="update">Updated</li>
            <li class="author">Anthony MacDonald</li>
            <li class="time"><time datetime="2015-12-03T05:14:42+1000">45m ago</time></li>
        </ul>
        <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="meta">
            <li class="is-vishidden">Contains:</li>
            <li><a href="#"><span class="icon--comment" title="This article has 15 comments">total comments</span><span class="meta__count">15</span></a></li>
            <li class="icon--video" title="This article contains a video">This article contains a video</li>
            <li class="icon--photo" title="This article contains a photo gallery">This article contains a photo gallery</li>
            <li class="icon--graph" title="This article contains a graph">This article contains a graph</li>
            <li class="icon--data" title="This article contains an infographic">This article contains an infographic</li>
        </ul>
        <ul class="bullet-list">
            <li class="premium-content"><a href="javascript:;">Whitehaven moves Newcastle port</a></li>
            <li class="premium-content"><a href="javascript:;">Whitehaven moves Newcastle port</a></li>
        </ul>
    </div>
</article>
<article class="story story--hero story--premium-content has-wof stack">
    <h1 class="story__headline"><a href="javascript:;">Hopes rise on China dairy deal</a></h1>
    <figure class="story__lead">
        <a href="#" tabindex="-1" class="story__img">
            <img width="320" height="210" src="../css/img/blank.svg">
        </a>
    </figure>
    <div class="story__wof">
        <ul class="byline">
            <li class="signpost signpost--live">Live</li>
            <li class="external">Boss<span class="icon--external-link" title="external site"> External link</span></li>
            <li class="update">Updated</li>
            <li class="author">Anthony MacDonald</li>
            <li class="time"><time datetime="2015-12-03T05:14:42+1000">45m ago</time></li>
        </ul>
        <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="meta">
            <li class="is-vishidden">Contains:</li>
            <li><a href="#"><span class="icon--comment" title="This article has 15 comments">total comments</span><span class="meta__count">15</span></a></li>
            <li class="icon--video" title="This article contains a video">This article contains a video</li>
            <li class="icon--photo" title="This article contains a photo gallery">This article contains a photo gallery</li>
            <li class="icon--graph" title="This article contains a graph">This article contains a graph</li>
            <li class="icon--data" title="This article contains an infographic">This article contains an infographic</li>
        </ul>
        <ul class="bullet-list">
            <li class="premium-content"><a href="javascript:;">Whitehaven moves Newcastle port</a></li>
            <li class="premium-content"><a href="javascript:;">Whitehaven moves Newcastle port</a></li>
        </ul>
    </div>
</article>

List Story

<article class="story story--basic-content has-wof">
    <div class="story__wof">
        <h3 class="story__headline"><a href="javascript:;">Lorem ipsum dolor sit amet, consectetur</a></h3>
        <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>
<article class="story story--basic-content has-wof">
    <div class="story__wof">
        <h3 class="story__headline"><a href="javascript:;">Lorem ipsum dolor sit amet, consectetur</a></h3>
        <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>
<article class="story story--basic-content has-wof">
    <div class="story__wof">
        <h3 class="story__headline"><a href="javascript:;">Lorem ipsum dolor sit amet, consectetur</a></h3>
        <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>

Stacked Story

<div class="strap--columns">
    <div class="strap__row">
        <div>
            <article class="story story--premium-content stack">
                <figure class="story__lead">
                    <a href="#" tabindex="-1" class="story__img">
                        <img width="280" height="186" src="../css/img/blank.svg">
                    </a>
                </figure>
                <div class="story__wof">
                    <h3 class="story__headline"><a href="javascript:;">Lorem ipsum dolor sit amet, consectetur</a></h3>
                    <ul class="meta">
                        <li class="is-vishidden">Contains:</li>
                        <li><a href="#"><span class="icon--comment" title="This article has 15 comments">total comments</span><span class="meta__count">15</span></a></li>
                        <li class="icon--video" title="This article contains a video">This article contains a video</li>
                        <li class="icon--photo" title="This article contains a photo gallery">This article contains a photo gallery</li>
                        <li class="icon--graph" title="This article contains a graph">This article contains a graph</li>
                    </ul>
                </div>
            </article>
        </div>
    </div>
</div>
<div class="strap--columns">
    <div class="strap__row">
        <div>
            <article class="story story--premium-content stack">
                <figure class="story__lead">
                    <a href="#" tabindex="-1" class="story__img">
                        <img width="280" height="186" src="../css/img/blank.svg">
                    </a>
                </figure>
                <div class="story__wof">
                    <h3 class="story__headline"><a href="javascript:;">Lorem ipsum dolor sit amet, consectetur</a></h3>
                    <ul class="meta">
                        <li class="is-vishidden">Contains:</li>
                        <li><a href="#"><span class="icon--comment" title="This article has 15 comments">total comments</span><span class="meta__count">15</span></a></li>
                        <li class="icon--video" title="This article contains a video">This article contains a video</li>
                        <li class="icon--photo" title="This article contains a photo gallery">This article contains a photo gallery</li>
                        <li class="icon--graph" title="This article contains a graph">This article contains a graph</li>
                    </ul>
                </div>
            </article>
        </div>
    </div>
</div>
<div class="strap--columns">
    <div class="strap__row">
        <div>
            <article class="story story--premium-content stack">
                <figure class="story__lead">
                    <a href="#" tabindex="-1" class="story__img">
                        <img width="280" height="186" src="../css/img/blank.svg">
                    </a>
                </figure>
                <div class="story__wof">
                    <h3 class="story__headline"><a href="javascript:;">Lorem ipsum dolor sit amet, consectetur</a></h3>
                    <ul class="meta">
                        <li class="is-vishidden">Contains:</li>
                        <li><a href="#"><span class="icon--comment" title="This article has 15 comments">total comments</span><span class="meta__count">15</span></a></li>
                        <li class="icon--video" title="This article contains a video">This article contains a video</li>
                        <li class="icon--photo" title="This article contains a photo gallery">This article contains a photo gallery</li>
                        <li class="icon--graph" title="This article contains a graph">This article contains a graph</li>
                    </ul>
                </div>
            </article>
        </div>
    </div>
</div>

Overlay Story

<article class="story story--overlay story--premium-content">
    <figure class="story__lead">
        <a href="#" tabindex="-1" class="story__img">
            <img width="280" height="auto" src="../css/img/blank.svg">
        </a>
    </figure>
    <div class="story__wof">
        <h3 class="story__headline"><a href="javascript:;">Lorem ipsum dolor sit amet, consectetur</a></h3>
    </div>
</article>
<article class="story story--overlay story--premium-content">
    <figure class="story__lead">
        <a href="#" tabindex="-1" class="story__img">
            <img width="280" height="auto" src="../css/img/blank.svg">
        </a>
    </figure>
    <div class="story__wof">
        <h3 class="story__headline"><a href="javascript:;">Lorem ipsum dolor sit amet, consectetur</a></h3>
    </div>
</article>
<article class="story story--overlay story--premium-content">
    <figure class="story__lead">
        <a href="#" tabindex="-1" class="story__img">
            <img width="280" height="auto" src="../css/img/blank.svg">
        </a>
    </figure>
    <div class="story__wof">
        <h3 class="story__headline"><a href="javascript:;">Lorem ipsum dolor sit amet, consectetur</a></h3>
    </div>
</article>