Skip to main content

Downloads

Displays a link to download an attachment and metadata about the file.

Important information:
This component requires documentation.

Single download

<div class="download">
  <div class="download__image" aria-hidden="true">
    <a class="download__image-link" href="/patternlib-img/download-resources/documents/Print-Ready-A4GIP1-2021-v1-0-120620.pdf" tabindex="-1">
      <img srcset="/patternlib-img/download-resources/img/small/census-2021-matters-to-everyone.png 1x, /patternlib-img/download-resources/img/large/census-2021-matters-to-everyone.png 2x" src="/patternlib-img/download-resources/img/small/census-2021-matters-to-everyone.png" alt="" loading="lazy">
    </a>
  </div>
  <div class="download__content">
    <h3 class="u-fs-m u-mt-no u-mb-xs">
      <a href="/patternlib-img/download-resources/documents/Print-Ready-A4GIP1-2021-v1-0-120620.pdf">Census 2021 matters to everyone<span class="u-vh">,
          PDF document download, 866KB, 1 page
        </span></a>
    </h3>
    <span class="u-fs-s u-mb-xs download__meta" aria-hidden="true">
      Poster,
      PDF, 866KB, 1 page
    </span>
    <p class="download__excerpt">By taking part and encouraging others to do the same, you’ll make sure your community gets the services it needs.</p>
  </div>
</div>
Nunjucks macro options
Name Type Required Description
title string true The title for the download
excerpt string true A short extract of text (e.g. a short sentence to give some context of the download)
url string true The url for the document download (e.g. a pdf file, zip file)
type string true Type of file (e.g. Poster, Booklet, Flyer)
classes string false Custom classes to add to the downloads
thumbnail Thumbnail true An object containing path and filename attributes for the image
meta Meta true An object containing information about file type, size and number of pages
placeholderURL string false Optional base path for placeholder image

Thumbnail

Name Type Required Description
smallSrc string true Path to the non-retina version of the image
largeSrc string true Path to the retina version of the image

Meta

Name Type Required Description
fileType string true File type (e.g. PDF, DOC, XLS)
fileSize string true Size of file (e.g. 850kb, 1.5mb)
filePages string false Quantity of pages
{% from "components/downloads/_macro.njk" import onsDownloads %}
{{ onsDownloads({
    "downloads": [
        {
            "thumbnail": {
                "smallSrc": '/patternlib-img/download-resources/img/small/census-2021-matters-to-everyone.png',
                "largeSrc": '/patternlib-img/download-resources/img/large/census-2021-matters-to-everyone.png'
            },
            "url": '/patternlib-img/download-resources/documents/Print-Ready-A4GIP1-2021-v1-0-120620.pdf',
            "title": 'Census 2021 matters to everyone',
            "type": 'Poster',
            "meta": {
                "fileType": 'PDF',
                "fileSize": '866KB',
                "filePages": '1 page'
            },
            "excerpt": 'By taking part and encouraging others to do the same, you’ll make sure your community gets the services it needs.'
        }
    ]
}) }}

{% macro onsDownloads(params) %}
    {% for download in (params.downloads if params.downloads is iterable else params.downloads.items()) %}
    <div class="download{{ ' ' + params.classes if params.classes else '' }}">
        <div class="download__image" aria-hidden="true">
            <a class="download__image-link" href="{{ download.url }}" tabindex="-1">
                {% if download.thumbnail is defined and download.thumbnail and download.thumbnail.smallSrc is defined and download.thumbnail.smallSrc and download.thumbnail.largeSrc is defined and download.thumbnail.largeSrc %}
                    <img srcset="{{ download.thumbnail.smallSrc }} 1x, {{ download.thumbnail.largeSrc }} 2x" src="{{ download.thumbnail.smallSrc }}" alt="" loading="lazy">
                {% else %}
                    <img srcset="{{ download.placeholderURL if download.placeholderURL is defined and download.placeholderURL }}/img/small/placeholder-portrait.png 1x, {{ download.placeholderURL if download.placeholderURL is defined and download.placeholderURL }}/img/large/placeholder-portrait.png 2x" src="{{ download.placeholderURL if download.placeholderURL is defined and download.placeholderURL }}/img/small/placeholder-portrait.png" alt="" loading="lazy">
                {% endif %}
            </a>
        </div>
        <div class="download__content">
            <h3 class="u-fs-m u-mt-no u-mb-xs">
                <a href="{{ download.url }}">{{ download.title }}<span class="u-vh">, 
                {%- if download.meta is defined and download.meta %}
                    {% set metaItems = [] %}
                    {% if download.meta.fileType is defined and download.meta.fileType %}{% set metaItems = (metaItems.push(download.meta.fileType + ' document download'), metaItems) %}{% endif %}
                    {% if download.meta.fileSize is defined and download.meta.fileSize %}{% set metaItems = (metaItems.push(download.meta.fileSize), metaItems) %}{% endif %}
                    {% if download.meta.filePages is defined and download.meta.filePages %}{% set metaItems = (metaItems.push(download.meta.filePages), metaItems) %}{% endif %}
                    {{ metaItems|join(', ') }}
                {% endif -%}
                </span></a>
            </h3>
            <span class="u-fs-s u-mb-xs download__meta" aria-hidden="true">
                {%- if download.type is defined and download.type %}
                    {{ download.type }}{%- if download.meta is defined and download.meta %},{% endif %}
                {% endif %}
                {%- if download.meta is defined and download.meta %}
                    {% set metaItems = [] %}
                    {% if download.meta.fileType is defined and download.meta.fileType %}{% set metaItems = (metaItems.push(download.meta.fileType), metaItems) %}{% endif %}
                    {% if download.meta.fileSize is defined and download.meta.fileSize %}{% set metaItems = (metaItems.push(download.meta.fileSize), metaItems) %}{% endif %}
                    {% if download.meta.filePages is defined and download.meta.filePages %}{% set metaItems = (metaItems.push(download.meta.filePages), metaItems) %}{% endif %}
                    {{ metaItems|join(', ') }}
                {% endif -%}
            </span>
            {% if download.excerpt is defined and download.excerpt %}
                <p class="download__excerpt">{{ download.excerpt | safe }}</p>
            {% endif %}
        </div>
    </div>
    {% endfor %}
{% endmacro %}

.download {
  display: flex;
  & + & {
    border-top: 1px solid $color-grey-75;
    margin: 1.5rem 0 0;
    padding: 1.5em 0 0;
  }
  &__image {
    flex: 0 0 auto;
    margin-right: 1.5rem;
    width: 96px;
  }
  &__image-link {
    border: 2px solid $color-grey-15;
    box-sizing: content-box;
    display: block;
    width: 100%;
    &:focus {
      border-color: $color-document-border-focus;
      box-shadow: none;
      outline: 4px solid $color-focus !important;
      outline-offset: 0;
    }
  }
  &__meta {
    color: $color-grey-100;
    display: block;
  }
  &__excerpt {
    margin-bottom: 0;
    max-width: 660px; // Equivalent to 8 Columns
  }
}

Single download (no image)

In situations an image is not used, we require a fallback image to prevent a broken link.

<div class="download">
  <div class="download__image" aria-hidden="true">
    <a class="download__image-link" href="/patternlib-img/download-resources/documents/Print-Ready-A4GIP1-2021-v1-0-120620.pdf" tabindex="-1">
      <img srcset="/img/small/placeholder-portrait.png 1x, /img/large/placeholder-portrait.png 2x" src="/img/small/placeholder-portrait.png" alt="" loading="lazy">
    </a>
  </div>
  <div class="download__content">
    <h3 class="u-fs-m u-mt-no u-mb-xs">
      <a href="/patternlib-img/download-resources/documents/Print-Ready-A4GIP1-2021-v1-0-120620.pdf">Census 2021 matters to everyone<span class="u-vh">,
          PDF document download, 866KB, 1 page
        </span></a>
    </h3>
    <span class="u-fs-s u-mb-xs download__meta" aria-hidden="true">
      Poster,
      PDF, 866KB, 1 page
    </span>
    <p class="download__excerpt">By taking part and encouraging others to do the same, you’ll make sure your community gets the services it needs.</p>
  </div>
</div>
Nunjucks macro options
Name Type Required Description
title string true The title for the download
excerpt string true A short extract of text (e.g. a short sentence to give some context of the download)
url string true The url for the document download (e.g. a pdf file, zip file)
type string true Type of file (e.g. Poster, Booklet, Flyer)
classes string false Custom classes to add to the downloads
thumbnail Thumbnail true An object containing path and filename attributes for the image
meta Meta true An object containing information about file type, size and number of pages
placeholderURL string false Optional base path for placeholder image

Thumbnail

Name Type Required Description
smallSrc string true Path to the non-retina version of the image
largeSrc string true Path to the retina version of the image

Meta

Name Type Required Description
fileType string true File type (e.g. PDF, DOC, XLS)
fileSize string true Size of file (e.g. 850kb, 1.5mb)
filePages string false Quantity of pages
{% from "components/downloads/_macro.njk" import onsDownloads %}
{{ onsDownloads({
    "downloads": [
        {
            "url": '/patternlib-img/download-resources/documents/Print-Ready-A4GIP1-2021-v1-0-120620.pdf',
            "title": 'Census 2021 matters to everyone',
            "type": 'Poster',
            "meta": {
                "fileType": 'PDF',
                "fileSize": '866KB',
                "filePages": '1 page'
            },
            "excerpt": 'By taking part and encouraging others to do the same, you’ll make sure your community gets the services it needs.'
        }
    ]
}) }}

{% macro onsDownloads(params) %}
    {% for download in (params.downloads if params.downloads is iterable else params.downloads.items()) %}
    <div class="download{{ ' ' + params.classes if params.classes else '' }}">
        <div class="download__image" aria-hidden="true">
            <a class="download__image-link" href="{{ download.url }}" tabindex="-1">
                {% if download.thumbnail is defined and download.thumbnail and download.thumbnail.smallSrc is defined and download.thumbnail.smallSrc and download.thumbnail.largeSrc is defined and download.thumbnail.largeSrc %}
                    <img srcset="{{ download.thumbnail.smallSrc }} 1x, {{ download.thumbnail.largeSrc }} 2x" src="{{ download.thumbnail.smallSrc }}" alt="" loading="lazy">
                {% else %}
                    <img srcset="{{ download.placeholderURL if download.placeholderURL is defined and download.placeholderURL }}/img/small/placeholder-portrait.png 1x, {{ download.placeholderURL if download.placeholderURL is defined and download.placeholderURL }}/img/large/placeholder-portrait.png 2x" src="{{ download.placeholderURL if download.placeholderURL is defined and download.placeholderURL }}/img/small/placeholder-portrait.png" alt="" loading="lazy">
                {% endif %}
            </a>
        </div>
        <div class="download__content">
            <h3 class="u-fs-m u-mt-no u-mb-xs">
                <a href="{{ download.url }}">{{ download.title }}<span class="u-vh">, 
                {%- if download.meta is defined and download.meta %}
                    {% set metaItems = [] %}
                    {% if download.meta.fileType is defined and download.meta.fileType %}{% set metaItems = (metaItems.push(download.meta.fileType + ' document download'), metaItems) %}{% endif %}
                    {% if download.meta.fileSize is defined and download.meta.fileSize %}{% set metaItems = (metaItems.push(download.meta.fileSize), metaItems) %}{% endif %}
                    {% if download.meta.filePages is defined and download.meta.filePages %}{% set metaItems = (metaItems.push(download.meta.filePages), metaItems) %}{% endif %}
                    {{ metaItems|join(', ') }}
                {% endif -%}
                </span></a>
            </h3>
            <span class="u-fs-s u-mb-xs download__meta" aria-hidden="true">
                {%- if download.type is defined and download.type %}
                    {{ download.type }}{%- if download.meta is defined and download.meta %},{% endif %}
                {% endif %}
                {%- if download.meta is defined and download.meta %}
                    {% set metaItems = [] %}
                    {% if download.meta.fileType is defined and download.meta.fileType %}{% set metaItems = (metaItems.push(download.meta.fileType), metaItems) %}{% endif %}
                    {% if download.meta.fileSize is defined and download.meta.fileSize %}{% set metaItems = (metaItems.push(download.meta.fileSize), metaItems) %}{% endif %}
                    {% if download.meta.filePages is defined and download.meta.filePages %}{% set metaItems = (metaItems.push(download.meta.filePages), metaItems) %}{% endif %}
                    {{ metaItems|join(', ') }}
                {% endif -%}
            </span>
            {% if download.excerpt is defined and download.excerpt %}
                <p class="download__excerpt">{{ download.excerpt | safe }}</p>
            {% endif %}
        </div>
    </div>
    {% endfor %}
{% endmacro %}

.download {
  display: flex;
  & + & {
    border-top: 1px solid $color-grey-75;
    margin: 1.5rem 0 0;
    padding: 1.5em 0 0;
  }
  &__image {
    flex: 0 0 auto;
    margin-right: 1.5rem;
    width: 96px;
  }
  &__image-link {
    border: 2px solid $color-grey-15;
    box-sizing: content-box;
    display: block;
    width: 100%;
    &:focus {
      border-color: $color-document-border-focus;
      box-shadow: none;
      outline: 4px solid $color-focus !important;
      outline-offset: 0;
    }
  }
  &__meta {
    color: $color-grey-100;
    display: block;
  }
  &__excerpt {
    margin-bottom: 0;
    max-width: 660px; // Equivalent to 8 Columns
  }
}

Multiple downloads

<div class="download">
  <div class="download__image" aria-hidden="true">
    <a class="download__image-link" href="/patternlib-img/download-resources/documents/Print-Ready-A4GIP1-2021-v1-0-120620.pdf" tabindex="-1">
      <img srcset="/patternlib-img/download-resources/img/small/census-2021-matters-to-everyone.png 1x, /patternlib-img/download-resources/img/large/census-2021-matters-to-everyone.png 2x" src="/patternlib-img/download-resources/img/small/census-2021-matters-to-everyone.png" alt="" loading="lazy">
    </a>
  </div>
  <div class="download__content">
    <h3 class="u-fs-m u-mt-no u-mb-xs">
      <a href="/patternlib-img/download-resources/documents/Print-Ready-A4GIP1-2021-v1-0-120620.pdf">Census 2021 matters to everyone<span class="u-vh">,
          PDF document download, 866KB, 1 page
        </span></a>
    </h3>
    <span class="u-fs-s u-mb-xs download__meta" aria-hidden="true">
      Poster,
      PDF, 866KB, 1 page
    </span>
    <p class="download__excerpt">By taking part and encouraging others to do the same, you’ll make sure your community gets the services it needs.</p>
  </div>
</div>
<div class="download">
  <div class="download__image" aria-hidden="true">
    <a class="download__image-link" href="/patternlib-img/download-resources/documents/Print-Ready-A4EB1-2021-v1-0-120620.pdf" tabindex="-1">
      <img srcset="/patternlib-img/download-resources/img/small/including-everyone-in-census-2021-v2.png 1x, /patternlib-img/download-resources/img/large/including-everyone-in-census-2021-v2.png 2x" src="/patternlib-img/download-resources/img/small/including-everyone-in-census-2021-v2.png" alt="" loading="lazy">
    </a>
  </div>
  <div class="download__content">
    <h3 class="u-fs-m u-mt-no u-mb-xs">
      <a href="/patternlib-img/download-resources/documents/Print-Ready-A4EB1-2021-v1-0-120620.pdf">Including everyone in Census 2021<span class="u-vh">,
          PDF document download, 499KB, 1 page
        </span></a>
    </h3>
    <span class="u-fs-s u-mb-xs download__meta" aria-hidden="true">
      Poster,
      PDF, 499KB, 1 page
    </span>
    <p class="download__excerpt">Empty belly poster, aimed at advertising census events.</p>
  </div>
</div>
<div class="download">
  <div class="download__image" aria-hidden="true">
    <a class="download__image-link" href="/patternlib-img/download-resources/documents/A6PCA1-v1-0-Print-Ready-Pack1.pdf" tabindex="-1">
      <img srcset="/patternlib-img/download-resources/img/small/including-everyone-in-census-2021.png 1x, /patternlib-img/download-resources/img/large/including-everyone-in-census-2021.png 2x" src="/patternlib-img/download-resources/img/small/including-everyone-in-census-2021.png" alt="" loading="lazy">
    </a>
  </div>
  <div class="download__content">
    <h3 class="u-fs-m u-mt-no u-mb-xs">
      <a href="/patternlib-img/download-resources/documents/A6PCA1-v1-0-Print-Ready-Pack1.pdf">Including everyone in Census 2021<span class="u-vh">,
          PDF document download, 499KB, 1 page
        </span></a>
    </h3>
    <span class="u-fs-s u-mb-xs download__meta" aria-hidden="true">
      Poster,
      PDF, 499KB, 1 page
    </span>
    <p class="download__excerpt">Generic poster advertising census 2021.</p>
  </div>
</div>
<div class="download">
  <div class="download__image" aria-hidden="true">
    <a class="download__image-link" href="/patternlib-img/download-resources/documents/CHDE1-Community-Handbook-v0.6.pdf" tabindex="-1">
      <img srcset="/patternlib-img/download-resources/img/small/census-2021-community-handbook.png 1x, /patternlib-img/download-resources/img/large/census-2021-community-handbook.png 2x" src="/patternlib-img/download-resources/img/small/census-2021-community-handbook.png" alt="" loading="lazy">
    </a>
  </div>
  <div class="download__content">
    <h3 class="u-fs-m u-mt-no u-mb-xs">
      <a href="/patternlib-img/download-resources/documents/CHDE1-Community-Handbook-v0.6.pdf">Community handbook for Census 2021<span class="u-vh">,
          PDF document download, 3.3MB, 16 pages
        </span></a>
    </h3>
    <span class="u-fs-s u-mb-xs download__meta" aria-hidden="true">
      Booklet,
      PDF, 3.3MB, 16 pages
    </span>
    <p class="download__excerpt">This handbook explains what the census is, why it matters to everyone and how we can work together to spread the word within your community.</p>
  </div>
</div>
Nunjucks macro options
Name Type Required Description
title string true The title for the download
excerpt string true A short extract of text (e.g. a short sentence to give some context of the download)
url string true The url for the document download (e.g. a pdf file, zip file)
type string true Type of file (e.g. Poster, Booklet, Flyer)
classes string false Custom classes to add to the downloads
thumbnail Thumbnail true An object containing path and filename attributes for the image
meta Meta true An object containing information about file type, size and number of pages
placeholderURL string false Optional base path for placeholder image

Thumbnail

Name Type Required Description
smallSrc string true Path to the non-retina version of the image
largeSrc string true Path to the retina version of the image

Meta

Name Type Required Description
fileType string true File type (e.g. PDF, DOC, XLS)
fileSize string true Size of file (e.g. 850kb, 1.5mb)
filePages string false Quantity of pages
{% from "components/downloads/_macro.njk" import onsDownloads %}
{{ onsDownloads({
    "downloads": [
        {
            "thumbnail": {
                "smallSrc": '/patternlib-img/download-resources/img/small/census-2021-matters-to-everyone.png',
                "largeSrc": '/patternlib-img/download-resources/img/large/census-2021-matters-to-everyone.png'
            },
            "url": '/patternlib-img/download-resources/documents/Print-Ready-A4GIP1-2021-v1-0-120620.pdf',
            "title": 'Census 2021 matters to everyone',
            "type": 'Poster',
            "meta": {
                "fileType": 'PDF',
                "fileSize": '866KB',
                "filePages": '1 page'
            },
            "excerpt": 'By taking part and encouraging others to do the same, you’ll make sure your community gets the services it needs.'
        },
        {
            "thumbnail": {
                "smallSrc": '/patternlib-img/download-resources/img/small/including-everyone-in-census-2021-v2.png',
                "largeSrc": '/patternlib-img/download-resources/img/large/including-everyone-in-census-2021-v2.png'
            },
            "url": '/patternlib-img/download-resources/documents/Print-Ready-A4EB1-2021-v1-0-120620.pdf',            
            "title": 'Including everyone in Census 2021',
            "type": 'Poster',
            "meta": {
                "fileType": 'PDF',
                "fileSize": '499KB',
                "filePages": '1 page'
            },
            "excerpt": 'Empty belly poster, aimed at advertising census events.'
        },
        {
            "thumbnail": {
                "smallSrc": '/patternlib-img/download-resources/img/small/including-everyone-in-census-2021.png',
                "largeSrc": '/patternlib-img/download-resources/img/large/including-everyone-in-census-2021.png'
            },
            "url": '/patternlib-img/download-resources/documents/A6PCA1-v1-0-Print-Ready-Pack1.pdf',            
            "title": 'Including everyone in Census 2021',
            "type": 'Poster',
            "meta": {
                "fileType": 'PDF',
                "fileSize": '499KB',
                "filePages": '1 page'
            },
            "excerpt": 'Generic poster advertising census 2021.'
        },
        {
            "thumbnail": {
                "smallSrc": '/patternlib-img/download-resources/img/small/census-2021-community-handbook.png',
                "largeSrc": '/patternlib-img/download-resources/img/large/census-2021-community-handbook.png'
            },
            "url": '/patternlib-img/download-resources/documents/CHDE1-Community-Handbook-v0.6.pdf',            
            "title": 'Community handbook for Census 2021',
            "type": 'Booklet',
            "meta": {
                "fileType": 'PDF',
                "fileSize": '3.3MB',
                "filePages": '16 pages'
            },
            "excerpt": 'This handbook explains what the census is, why it matters to everyone and how we can work together to spread the word within your community.'
        }
    ]
}) }}

{% macro onsDownloads(params) %}
    {% for download in (params.downloads if params.downloads is iterable else params.downloads.items()) %}
    <div class="download{{ ' ' + params.classes if params.classes else '' }}">
        <div class="download__image" aria-hidden="true">
            <a class="download__image-link" href="{{ download.url }}" tabindex="-1">
                {% if download.thumbnail is defined and download.thumbnail and download.thumbnail.smallSrc is defined and download.thumbnail.smallSrc and download.thumbnail.largeSrc is defined and download.thumbnail.largeSrc %}
                    <img srcset="{{ download.thumbnail.smallSrc }} 1x, {{ download.thumbnail.largeSrc }} 2x" src="{{ download.thumbnail.smallSrc }}" alt="" loading="lazy">
                {% else %}
                    <img srcset="{{ download.placeholderURL if download.placeholderURL is defined and download.placeholderURL }}/img/small/placeholder-portrait.png 1x, {{ download.placeholderURL if download.placeholderURL is defined and download.placeholderURL }}/img/large/placeholder-portrait.png 2x" src="{{ download.placeholderURL if download.placeholderURL is defined and download.placeholderURL }}/img/small/placeholder-portrait.png" alt="" loading="lazy">
                {% endif %}
            </a>
        </div>
        <div class="download__content">
            <h3 class="u-fs-m u-mt-no u-mb-xs">
                <a href="{{ download.url }}">{{ download.title }}<span class="u-vh">, 
                {%- if download.meta is defined and download.meta %}
                    {% set metaItems = [] %}
                    {% if download.meta.fileType is defined and download.meta.fileType %}{% set metaItems = (metaItems.push(download.meta.fileType + ' document download'), metaItems) %}{% endif %}
                    {% if download.meta.fileSize is defined and download.meta.fileSize %}{% set metaItems = (metaItems.push(download.meta.fileSize), metaItems) %}{% endif %}
                    {% if download.meta.filePages is defined and download.meta.filePages %}{% set metaItems = (metaItems.push(download.meta.filePages), metaItems) %}{% endif %}
                    {{ metaItems|join(', ') }}
                {% endif -%}
                </span></a>
            </h3>
            <span class="u-fs-s u-mb-xs download__meta" aria-hidden="true">
                {%- if download.type is defined and download.type %}
                    {{ download.type }}{%- if download.meta is defined and download.meta %},{% endif %}
                {% endif %}
                {%- if download.meta is defined and download.meta %}
                    {% set metaItems = [] %}
                    {% if download.meta.fileType is defined and download.meta.fileType %}{% set metaItems = (metaItems.push(download.meta.fileType), metaItems) %}{% endif %}
                    {% if download.meta.fileSize is defined and download.meta.fileSize %}{% set metaItems = (metaItems.push(download.meta.fileSize), metaItems) %}{% endif %}
                    {% if download.meta.filePages is defined and download.meta.filePages %}{% set metaItems = (metaItems.push(download.meta.filePages), metaItems) %}{% endif %}
                    {{ metaItems|join(', ') }}
                {% endif -%}
            </span>
            {% if download.excerpt is defined and download.excerpt %}
                <p class="download__excerpt">{{ download.excerpt | safe }}</p>
            {% endif %}
        </div>
    </div>
    {% endfor %}
{% endmacro %}

.download {
  display: flex;
  & + & {
    border-top: 1px solid $color-grey-75;
    margin: 1.5rem 0 0;
    padding: 1.5em 0 0;
  }
  &__image {
    flex: 0 0 auto;
    margin-right: 1.5rem;
    width: 96px;
  }
  &__image-link {
    border: 2px solid $color-grey-15;
    box-sizing: content-box;
    display: block;
    width: 100%;
    &:focus {
      border-color: $color-document-border-focus;
      box-shadow: none;
      outline: 4px solid $color-focus !important;
      outline-offset: 0;
    }
  }
  &__meta {
    color: $color-grey-100;
    display: block;
  }
  &__excerpt {
    margin-bottom: 0;
    max-width: 660px; // Equivalent to 8 Columns
  }
}

How to use this component

We use two versions of the image, one for standard screens and the other for retina screens.

Image dimension for:

  • standard screen is: 96px × 136px
  • retina screen is: 192px × 272px

We specify a folder path for both small and large images, which is defined in the macro as smallSrc and largeSrc. The filename is expected to be the same for both.

The image used is considered decorative and does not convey important information, and as such should be hidden from screen readers. The image does not require an alt tag.

Research on this pattern

If you have conducted any user research using this pattern, please feed back your findings via the Design System forum 

Design System forum

Discuss ‘Downloads’ on GitHub