Article list

The article list pattern shows key information about a particular article or item, linking to further details. This can be used for a wide range of content such as news articles, blog posts, publications or events.

Rules for article list

An article list item can be used standalone or combined with others to form a list.
Must be at least half the width of the available screen space.
While the thumbnail is not strictly required, if used in a list where the majority of items are missing suitable images then consider using a different pattern such as search results.
The description must be no more than 220 characters.
The recommended thumbnail image size is 360px wide by 240px high.
Thumbnails in a list of items should use the same consistent image size.
The metadata list pattern is used to provide additional supporting information.
If there are more than ten items in a list, then pagination should be used.
On small screen widths the description text is removed, this behaviour can be overridden by adding the class article-list__description--show-always alongside the article-list__description class.

Options available

Article (event example)
Article with description always visible (publication example)
Article with minimal metadata (news example)
List of articles (blog example)

Article (event example)

This example includes metadata that would typically feature on an event, as the metadata could be seen as greater importance than the description it has been placed above it and overridden the lighter grey text colour by using the inherit--colour class. The description is hidden on smaller widths while the image makes use of lazyloading.

Example

Event title

Date: 18 July 2019
Time: 8.00am to 10.00am
Location: Byre Theatre

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. Lorem ipsum dolor sit amet, consectetuor.

Code

<!-- Begin pattern: article-list //-->
<article class="article-list">
    <figure class="article-list__image">
        <a href="#article" tabindex="-1"><img src="data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==" data-src="../../assets/docs/images/placeholders/360x240.png" alt="Event title" class="lazyload"></a>
    </figure>
    <div class="article-list__snippet">
        <h3 class="article-list__heading"><a href="#article">Event title</a></h3>
        <dl class="metadata-list inherit--colour">
            <dt><i class="far fa-calendar-alt" aria-hidden="true" title="Date"></i><span class="sr-only">Date</span></dt><dd>18 July 2019</dd>
            <dt><i class="far fa-clock" aria-hidden="true" title="Time"></i><span class="sr-only">Time</span></dt><dd>8.00am to 10.00am</dd>
            <dt><i class="fas fa-map-marker-alt" aria-hidden="true" title="Location"></i><span class="sr-only">Location</span></dt><dd>Byre Theatre</dd>
        </dl>
        <p class="article-list__description">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. Lorem ipsum dolor sit amet, consectetuor.</p>
    </div>
</article>
<!-- End pattern: article-list //-->

Article with description always visible (publication example)

This example has the description set to show at all screen widths and includes metadata that would typically describe a publication. The image is also a different size as a portrait aspect ratio is better suited to book covers.

Example

Title of publication

Author: John Smith
Published by: Profile Books
Publication date: 3 October 2019

Code

<!-- Begin pattern: article-list //-->
<article class="article-list">
    <figure class="article-list__image">
        <a href="#article" tabindex="-1"><img src="data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==" data-src="../../assets/docs/images/placeholders/360x540.png" alt="Title of publication" class="lazyload"></a>
    </figure>
    <div class="article-list__snippet">
        <h3 class="article-list__heading"><a href="#article">Title of publication</a></h3>
        <p class="article-list__description article-list__description--show-always">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. Lorem ipsum dolor sit amet, consectetuor.</p>
        <dl class="metadata-list">
            <dt class="metadata-list--full metadata-list--no-icon">Author</dt><dd class="metadata-list--full">John Smith</dd>
            <dt class="metadata-list--full metadata-list--no-icon">Published by</dt><dd class="metadata-list--full"><a href="#">Profile Books</a></dd>
            <dt class="metadata-list--full metadata-list--no-icon">Publication date</dt><dd class="metadata-list--full">3 October 2019</dd>
        </dl>
    </div>
</article>
<!-- End pattern: article-list //-->

Article with minimal metadata (news example)

This example only has basic metadata so the labels are only visible to screen readers. The content is typical for that of a news article.

Example

News headline

Date: 18 July 2019

Code

<!-- Begin pattern: article-list //-->
<article class="article-list">
    <figure class="article-list__image">
        <a href="#article" tabindex="-1"><img src="data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==" data-src="../../assets/docs/images/placeholders/360x240.png" alt="News headline" class="lazyload"></a>
    </figure>
    <div class="article-list__snippet">
        <h3 class="article-list__heading"><a href="#article">News headline</a></h3>
        <p class="article-list__description">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. Lorem ipsum dolor sit amet, consectetuor.</p>
        <dl class="metadata-list">
            <dt class="sr-only">Date</dt><dd>18 July 2019</dd>
        </dl>
    </div>
</article>
<!-- End pattern: article-list //-->

List of articles (blog example)

When article list items are placed in a list a dividing line is automatically shown between each. This example shows the maximum of ten items with pagination underneath.

Example

This is the title of the blog

Date: 18 July 2019
Category: Blog category

This is the title of the blog

Date: 18 July 2019
Category: Blog category

This is the title of the blog

Date: 18 July 2019
Category: Blog category

This is the title of the blog

Date: 18 July 2019
Category: Blog category

This is the title of the blog

Date: 18 July 2019
Category: Blog category

This is the title of the blog

Date: 18 July 2019
Category: Blog category

This is the title of the blog

Date: 18 July 2019
Category: Blog category

This is the title of the blog

Date: 18 July 2019
Category: Blog category

This is the title of the blog

Date: 18 July 2019
Category: Blog category

This is the title of the blog

Date: 18 July 2019
Category: Blog category

Code

<!-- Begin pattern: article-list //-->
<article class="article-list">
    <figure class="article-list__image">
        <a href="#article" tabindex="-1"><img src="data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==" data-src="../../assets/docs/images/placeholders/360x240.png" alt="This is the title of the blog" class="lazyload"></a>
    </figure>
    <div class="article-list__snippet">
        <h3 class="article-list__heading"><a href="#article">This is the title of the blog</a></h3>
        <p class="article-list__description">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. Lorem ipsum dolor sit amet, consectetuor.</p>
        <dl class="metadata-list">
            <dt><i class="far fa-calendar-alt" aria-hidden="true" title="Date"></i><span class="sr-only">Date</span></dt><dd>18 July 2019</dd>
            <dt><i class="fas fa-folder-open" aria-hidden="true" title="Category"></i><span class="sr-only">Category</span></dt><dd><a href="#">Blog category</a></dd>
        </dl>
    </div>
</article>
<article class="article-list">
    <figure class="article-list__image">
        <a href="#article" tabindex="-1"><img src="data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==" data-src="../../assets/docs/images/placeholders/360x240.png" alt="This is the title of the blog" class="lazyload"></a>
    </figure>
    <div class="article-list__snippet">
        <h3 class="article-list__heading"><a href="#article">This is the title of the blog</a></h3>
        <p class="article-list__description">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. Lorem ipsum dolor sit amet, consectetuor.</p>
        <dl class="metadata-list">
            <dt><i class="far fa-calendar-alt" aria-hidden="true" title="Date"></i><span class="sr-only">Date</span></dt><dd>18 July 2019</dd>
            <dt><i class="fas fa-folder-open" aria-hidden="true" title="Category"></i><span class="sr-only">Category</span></dt><dd><a href="#">Blog category</a></dd>
        </dl>
    </div>
</article>
<article class="article-list">
    <figure class="article-list__image">
        <a href="#article" tabindex="-1"><img src="data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==" data-src="../../assets/docs/images/placeholders/360x240.png" alt="This is the title of the blog" class="lazyload"></a>
    </figure>
    <div class="article-list__snippet">
        <h3 class="article-list__heading"><a href="#article">This is the title of the blog</a></h3>
        <p class="article-list__description">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. Lorem ipsum dolor sit amet, consectetuor.</p>
        <dl class="metadata-list">
            <dt><i class="far fa-calendar-alt" aria-hidden="true" title="Date"></i><span class="sr-only">Date</span></dt><dd>18 July 2019</dd>
            <dt><i class="fas fa-folder-open" aria-hidden="true" title="Category"></i><span class="sr-only">Category</span></dt><dd><a href="#">Blog category</a></dd>
        </dl>
    </div>
</article>
<article class="article-list">
    <figure class="article-list__image">
        <a href="#article" tabindex="-1"><img src="data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==" data-src="../../assets/docs/images/placeholders/360x240.png" alt="This is the title of the blog" class="lazyload"></a>
    </figure>
    <div class="article-list__snippet">
        <h3 class="article-list__heading"><a href="#article">This is the title of the blog</a></h3>
        <p class="article-list__description">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. Lorem ipsum dolor sit amet, consectetuor.</p>
        <dl class="metadata-list">
            <dt><i class="far fa-calendar-alt" aria-hidden="true" title="Date"></i><span class="sr-only">Date</span></dt><dd>18 July 2019</dd>
            <dt><i class="fas fa-folder-open" aria-hidden="true" title="Category"></i><span class="sr-only">Category</span></dt><dd><a href="#">Blog category</a></dd>
        </dl>
    </div>
</article>
<article class="article-list">
    <figure class="article-list__image">
        <a href="#article" tabindex="-1"><img src="data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==" data-src="../../assets/docs/images/placeholders/360x240.png" alt="This is the title of the blog" class="lazyload"></a>
    </figure>
    <div class="article-list__snippet">
        <h3 class="article-list__heading"><a href="#article">This is the title of the blog</a></h3>
        <p class="article-list__description">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. Lorem ipsum dolor sit amet, consectetuor.</p>
        <dl class="metadata-list">
            <dt><i class="far fa-calendar-alt" aria-hidden="true" title="Date"></i><span class="sr-only">Date</span></dt><dd>18 July 2019</dd>
            <dt><i class="fas fa-folder-open" aria-hidden="true" title="Category"></i><span class="sr-only">Category</span></dt><dd><a href="#">Blog category</a></dd>
        </dl>
    </div>
</article>
<article class="article-list">
    <figure class="article-list__image">
        <a href="#article" tabindex="-1"><img src="data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==" data-src="../../assets/docs/images/placeholders/360x240.png" alt="This is the title of the blog" class="lazyload"></a>
    </figure>
    <div class="article-list__snippet">
        <h3 class="article-list__heading"><a href="#article">This is the title of the blog</a></h3>
        <p class="article-list__description">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. Lorem ipsum dolor sit amet, consectetuor.</p>
        <dl class="metadata-list">
            <dt><i class="far fa-calendar-alt" aria-hidden="true" title="Date"></i><span class="sr-only">Date</span></dt><dd>18 July 2019</dd>
            <dt><i class="fas fa-folder-open" aria-hidden="true" title="Category"></i><span class="sr-only">Category</span></dt><dd><a href="#">Blog category</a></dd>
        </dl>
    </div>
</article>
<article class="article-list">
    <figure class="article-list__image">
        <a href="#article" tabindex="-1"><img src="data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==" data-src="../../assets/docs/images/placeholders/360x240.png" alt="This is the title of the blog" class="lazyload"></a>
    </figure>
    <div class="article-list__snippet">
        <h3 class="article-list__heading"><a href="#article">This is the title of the blog</a></h3>
        <p class="article-list__description">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. Lorem ipsum dolor sit amet, consectetuor.</p>
        <dl class="metadata-list">
            <dt><i class="far fa-calendar-alt" aria-hidden="true" title="Date"></i><span class="sr-only">Date</span></dt><dd>18 July 2019</dd>
            <dt><i class="fas fa-folder-open" aria-hidden="true" title="Category"></i><span class="sr-only">Category</span></dt><dd><a href="#">Blog category</a></dd>
        </dl>
    </div>
</article>
<article class="article-list">
    <figure class="article-list__image">
        <a href="#article" tabindex="-1"><img src="data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==" data-src="../../assets/docs/images/placeholders/360x240.png" alt="This is the title of the blog" class="lazyload"></a>
    </figure>
    <div class="article-list__snippet">
        <h3 class="article-list__heading"><a href="#article">This is the title of the blog</a></h3>
        <p class="article-list__description">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. Lorem ipsum dolor sit amet, consectetuor.</p>
        <dl class="metadata-list">
            <dt><i class="far fa-calendar-alt" aria-hidden="true" title="Date"></i><span class="sr-only">Date</span></dt><dd>18 July 2019</dd>
            <dt><i class="fas fa-folder-open" aria-hidden="true" title="Category"></i><span class="sr-only">Category</span></dt><dd><a href="#">Blog category</a></dd>
        </dl>
    </div>
</article>
<article class="article-list">
    <figure class="article-list__image">
        <a href="#article" tabindex="-1"><img src="data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==" data-src="../../assets/docs/images/placeholders/360x240.png" alt="This is the title of the blog" class="lazyload"></a>
    </figure>
    <div class="article-list__snippet">
        <h3 class="article-list__heading"><a href="#article">This is the title of the blog</a></h3>
        <p class="article-list__description">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. Lorem ipsum dolor sit amet, consectetuor.</p>
        <dl class="metadata-list">
            <dt><i class="far fa-calendar-alt" aria-hidden="true" title="Date"></i><span class="sr-only">Date</span></dt><dd>18 July 2019</dd>
            <dt><i class="fas fa-folder-open" aria-hidden="true" title="Category"></i><span class="sr-only">Category</span></dt><dd><a href="#">Blog category</a></dd>
        </dl>
    </div>
</article>
<article class="article-list">
    <figure class="article-list__image">
        <a href="#article" tabindex="-1"><img src="data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==" data-src="../../assets/docs/images/placeholders/360x240.png" alt="This is the title of the blog" class="lazyload"></a>
    </figure>
    <div class="article-list__snippet">
        <h3 class="article-list__heading"><a href="#article">This is the title of the blog</a></h3>
        <p class="article-list__description">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. Lorem ipsum dolor sit amet, consectetuor.</p>
        <dl class="metadata-list">
            <dt><i class="far fa-calendar-alt" aria-hidden="true" title="Date"></i><span class="sr-only">Date</span></dt><dd>18 July 2019</dd>
            <dt><i class="fas fa-folder-open" aria-hidden="true" title="Category"></i><span class="sr-only">Category</span></dt><dd><a href="#">Blog category</a></dd>
        </dl>
    </div>
</article>
<nav aria-label="List of articles (blog example)">
    <ul class="pager">
        <li><a href="#" role="button">Previous</a></li>
        <li><a href="#" role="button">Next</a></li>
    </ul>
</nav>
<!-- End pattern: article-list //-->