News updates
The news updates pattern contains a ⅔ width column for a featured news update and a ⅓ width column for two other updates. The pattern is intended for landing pages such as School websites and provides a place for articles such as news items.
Rules for news updates
- There must be only one news updates section on a page.
- Must only be used only within main content of the page.
- Images must be 360 × 240 pixels.
Options available
Default
Updates
Featured update
This section of text should not exceed 220 characters. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
Secondary update
10 June 2016
Secondary update
8 June 2016
<div class="container">
<h2>Updates</h2>
<div class="row">
<div class="col-md-8 news-updates big-target-click-zone">
<figure>
<img src="../../assets/docs/images/placeholders/360x240-10.jpg" alt="news story">
<figcaption><small>Photographer credit</small></figcaption>
</figure>
<h3><a href="#" class="big-target-anchor">Featured update</a></h3>
<p>This section of text should not exceed 220 characters. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
<p><a href="#" class="btn btn-primary">Continue reading</a></p>
</div>
<div class="col-md-4">
<div class="row">
<div class="col-xs-6 col-md-12 news-updates news-updates-small big-target-click-zone">
<figure>
<img src="../../assets/docs/images/placeholders/360x240-10.jpg" alt="news story">
</figure>
<h3><a href="#" class="big-target-anchor">Secondary update</a><br>
<small>10 June 2016</small></h3>
</div>
<div class="col-xs-6 col-md-12 news-updates big-target-click-zone">
<figure>
<img src="../../assets/docs/images/placeholders/360x240-10.jpg" alt="news story">
</figure>
<h3><a href="#" class="big-target-anchor">Secondary update</a><br>
<small>8 June 2016</small></h3>
</div>
</div>
</div>
</div>
</div>