Article
Sample HTML for Article page example
<div class="ds_wrapper">
<nav aria-label="Breadcrumb">
<ol class="ds_breadcrumbs">
<li class="ds_breadcrumbs__item">
<a class="ds_breadcrumbs__link" href="#">Home</a>
</li>
<li class="ds_breadcrumbs__item">
<a class="ds_breadcrumbs__link" href="#">Health, social care and wellbeing</a>
</li>
<li class="ds_breadcrumbs__item">
<a class="ds_breadcrumbs__link" href="#">Sport</a>
</li>
<li class="ds_breadcrumbs__item" aria-current="page">Volunteer to help with sport in Scotland</li>
</ol>
</nav>
<main id="main-content" class="ds_layout ds_layout--article">
<div class="ds_layout__header">
<header class="ds_page-header">
<h1 class="ds_page-header__title">Volunteer to help with sport in Scotland</h1>
<dl class="ds_page-header__metadata ds_metadata">
<div class="ds_metadata__item">
<dt class="ds_metadata__key">Last updated</dt>
<dd class="ds_metadata__value">7 Aug 2023</dd>
</div>
</dl>
</header>
</div>
<div class="ds_layout__content">
<p>Volunteering to help with sports clubs and organisations in Scotland can help you meet new people and take on new challenges.</p>
<p>The <a href="#">sportscotland website</a> gives more information on volunteering to help with sport, including:</p>
<ul>
<li>the benefits of volunteering</li>
<li>where to get involved</li>
<li>how to volunteer</li>
<li>opportunities available</li>
<li>safeguarding (making sure children are safe)</li>
</ul>
<p>You can also find more information about the opportunities available at the <a href="#">Scottish Sports Association website</a>.</p>
</div>
</main>
</div>An article is a simple wrapper for your content. It’s the default page pattern in the Design System.
When to use this pattern
Use this pattern to create a standard web page containing body content.
When not to use this pattern
Do not use this pattern to create a:
Alternatives to articles
If you are planning to create more than one article on a topic, consider whether the multi-page guide pattern might better meet your users’ needs.
Read guidance on how to choose between a guide or articles in the Digital Scotland Service Manual.
How to use this pattern
The article layout is applied automatically to the middle area of the page template if you do not specify another layout.
Articles can vary in length. For example:
- Using a property factor has 450 words of information about using a factor to organise maintenance in a block of flats
- Get a new or replacement bin contains 66 words but signposts users to their local council
Website analytics
To understand user behaviour, you can track interactions with the components in your article.
The Design System’s ‘tracking’ script automatically adds these data attributes.