Style Typography

Text is the primary way users digest information and complete tasks, so it’s important to use good typographic principles to establish a clear visual hierarchy and to maximise legibility.

Font

The primary font used in ONS digital products is Open Sans (opens in a new tab) . Stylistic set 1 is used because it includes the more accessible opentail lowercase ‘g’, and serifed capital ‘I’.

Open Sans, with its broad range of weights and extensive unicode support was chosen to provide a good balance between legibility, personality and readability. As the majority of our User Interface (UI) is text-based, we use weight and size to denote hierarchy and separation between content. Open Sans’ letterforms also provide a good level of contrast which aid readability on poorer quality displays and for users with visual impairment.

Font family: “Open Sans”, “Helvetica Neue”, Helvetica, Arial, sans-serif

Font weights

Bold: 700
Regular: 400

Type scale

Using the type scale classes on text elements, the type is sized appropriately above and below the medium breakpoint.

Headings

Heading defaults are as follows:

Breakpoint headings

Font sizes can be triggered at certain breakpoints. Just suffix any font size class with @{breakpoint}, for example, ons-u-fs-m@l

Paragraphs

The base font size for paragraphs is 18px.

Links

Links are blue and underlined by default. If your link is at the end of a sentence or paragraph, make sure that the linked text does not include the full stop.

External Links

Links to external websites using the onsExternalLink macro will have the attributes target="_blank" to open websites in a new tab, and rel="noopener" to guard against a security vulnerability which can be exploited by malicious websites.

Nunjucks

{% from "components/external-link/_macro.njk" import onsExternalLink %}

<p>This is a paragraph of text with a {{
    onsExternalLink({
        "url": "#1",
        "linkText": "link to an external website"
    })
}}</p>

Nunjucks macro options

Name	Type	Required	Description
url	string	true	The URL for the `href` attribute of the external link
linkText	string	true	Text for the external link
classes	string	false	Classes to apply to the link
newWindowDescription	string	false	Use to set context after the `linkText` label for screen readers. Defaults to “opens in a new tab”

HTML

<p>This is a paragraph of text with a <a href="#1" class="ons-external-link" target="_blank" rel="noopener">
    <span class="ons-external-link__text">link to an external website</span><span
      class="ons-external-link__icon">&nbsp;<svg class="ons-svg-icon" viewBox="0 0 12 12"
        xmlns="http://www.w3.org/2000/svg" focusable="false" aria-hidden="true">
        <path
          d="M13.5,9H13a.5.5,0,0,0-.5.5v3h-9v-9h3A.5.5,0,0,0,7,3V2.5A.5.5,0,0,0,6.5,2h-4a.5.5,0,0,0-.5.5v11a.5.5,0,0,0,.5.5h11a.5.5,0,0,0,.5-.5v-4A.5.5,0,0,0,13.5,9Z"
          transform="translate(-2 -1.99)" />
        <path
          d="M8.83,7.88a.51.51,0,0,0,.71,0l2.31-2.32,1.28,1.28A.51.51,0,0,0,14,6.49v-4a.52.52,0,0,0-.5-.5h-4A.51.51,0,0,0,9,2.52a.58.58,0,0,0,.14.33l1.28,1.28L8.12,6.46a.51.51,0,0,0,0,.71Z"
          transform="translate(-2 -1.99)" />
      </svg></span><span class="ons-external-link__new-window-description ons-u-vh"> (opens in a new tab)</span></a>
</p>

Lists

Use lists to break up blocks of text into concise, manageable chunks to make it easier to read.

Bulleted list (default)

Bulleted lists should be introduced with a lead-in line, ending in a colon.

Each item in the list should start with a lowercase letter and should not end with a full stop.

Example: Example Bulleted List contents

Nunjucks
HTML

Nunjucks

{% from "components/lists/_macro.njk" import onsList %}
<p>You will need to show <strong>one</strong> of the following forms of ID:</p>
{{
    onsList({
        "itemsList": [
            {
                "text": 'birth certificate'
            },
            {
                "text": 'national insurance number'
            },
            {
                "text": 'passport'
            }
        ]
    })
}}

HTML

<p>You will need to show <strong>one</strong> of the following forms of ID:</p>
<ul class="ons-list">
  <li class="ons-list__item"> birth certificate </li>
  <li class="ons-list__item"> national insurance number </li>
  <li class="ons-list__item"> passport </li>
</ul>

Numbered list

Numbered lists should be displayed in place of bulleted lists when the order of items is relevant.

Each list item should be a complete sentence, therefore start with an uppercase letter, and end with a full stop.

You do not need to introduce a numbered list with a lead-in line.

To use a numbered list when using the list macro you need to not be using a bare list and set the element parameter to “ol”.

If there is only one item in the list when using the list macro it will render the item in <p> tags and not a list with no list styling added.

Example: Example Numbered List contents

Nunjucks
HTML

Nunjucks

{% from "components/lists/_macro.njk" import onsList %}
{{
    onsList({
        "element": 'ol',
        "itemsList": [
            {
                "text": 'Introduction'
            },
            {
                "text": 'Questionnaire'
            },
            {
                "text": 'Summary'
            }
        ]
    })
}}

HTML

<ol class="ons-list">
  <li class="ons-list__item"> Introduction </li>
  <li class="ons-list__item"> Questionnaire </li>
  <li class="ons-list__item"> Summary </li>
</ol>

Bare list

Bare lists should be used to display a list of navigational links, for example, a group of related pages displayed in the footer.

Example: Example Bare List contents

Nunjucks
HTML

Nunjucks

{% from "components/lists/_macro.njk" import onsList %}
{{
    onsList({
        "variants": 'bare',
        "itemsList": [
            {
                "url": '#0',
                "text": 'Who we are'
            },
            {
                "url": '#0',
                "text": 'What we do'
            },
            {
                "url": 'https://goo.gl/maps/ULnVRd16zfFLZWdt7',
                "text": 'Where to find us',
                "external": true
            }
        ]
    })
}}

HTML

<ul class="ons-list ons-list--bare">
  <li class="ons-list__item">
    <a href="#0" class="ons-list__link">Who we are</a>
  </li>
  <li class="ons-list__item">
    <a href="#0" class="ons-list__link">What we do</a>
  </li>
  <li class="ons-list__item">
    <a href="https://goo.gl/maps/ULnVRd16zfFLZWdt7" class="ons-external-link" target="_blank" rel="noopener">
      <span class="ons-external-link__text">Where to find us</span><span class="ons-external-link__icon">&nbsp;<svg
          class="ons-svg-icon" viewBox="0 0 12 12" xmlns="http://www.w3.org/2000/svg" focusable="false"
          aria-hidden="true">
          <path
            d="M13.5,9H13a.5.5,0,0,0-.5.5v3h-9v-9h3A.5.5,0,0,0,7,3V2.5A.5.5,0,0,0,6.5,2h-4a.5.5,0,0,0-.5.5v11a.5.5,0,0,0,.5.5h11a.5.5,0,0,0,.5-.5v-4A.5.5,0,0,0,13.5,9Z"
            transform="translate(-2 -1.99)" />
          <path
            d="M8.83,7.88a.51.51,0,0,0,.71,0l2.31-2.32,1.28,1.28A.51.51,0,0,0,14,6.49v-4a.52.52,0,0,0-.5-.5h-4A.51.51,0,0,0,9,2.52a.58.58,0,0,0,.14.33l1.28,1.28L8.12,6.46a.51.51,0,0,0,0,.71Z"
            transform="translate(-2 -1.99)" />
        </svg></span><span class="ons-external-link__new-window-description ons-u-vh"> (opens in a new tab)</span></a>
  </li>
</ul>

Dashed list

Dashed lists should be used to display a list of content navigational links.

Example: Example Dashed List contents

Nunjucks
HTML

Nunjucks

{% from "components/lists/_macro.njk" import onsList %}
{{
    onsList({
        "variants": 'dashed',
        "itemsList": [
            {
                "text": 'Overview',
                "current": true
            },
            {
                "url": '#0',
                "text": 'About Census 2021'
            },
            {
                "url": '#0',
                "text": 'Why should I take part in the census?'
            }
        ]
    })
}}

HTML

<ul class="ons-list ons-list--dashed">
  <li class="ons-list__item" aria-current="true"> Overview </li>
  <li class="ons-list__item">
    <a href="#0" class="ons-list__link">About Census 2021</a>
  </li>
  <li class="ons-list__item">
    <a href="#0" class="ons-list__link">Why should I take part in the census?</a>
  </li>
</ul>

Prefixed list

The prefix list allows each list item to contain a string as a prefix to the item. The prefixed string uses our monospaced font to ensure spacing and alignment is correct.

Example: Example Prefixed List contents

Nunjucks
HTML

Nunjucks

{% from "components/lists/_macro.njk" import onsList %}
{{
    onsList({
        "itemsList": [
            {
                "text": 'birth certificate',
                "prefix": 'H1'
            },
            {
                "text": 'national insurance number',
                "prefix": 'H2'
            },
            {
                "text": 'passport',
                "prefix": 'H3'
            }
        ]
    })
}}

HTML

<ul class="ons-list ons-list--bare ons-list--prefix">
  <li class="ons-list__item">
    <span class="ons-list__prefix" aria-hidden="true">H1. </span>birth certificate
  </li>
  <li class="ons-list__item">
    <span class="ons-list__prefix" aria-hidden="true">H2. </span>national insurance number
  </li>
  <li class="ons-list__item">
    <span class="ons-list__prefix" aria-hidden="true">H3. </span>passport
  </li>
</ul>

Suffixed list

The suffix list works the same as the prefix but just comes after the list item and the full stop isn’t included.

Example: Example Suffixed List contents

Nunjucks
HTML

Nunjucks

{% from "components/lists/_macro.njk" import onsList %}
{{
    onsList({
        "itemsList": [
            {
                "text": 'birth certificate',
                "suffix": 'A'
            },
            {
                "text": 'national insurance number',
                "suffix": 'B'
            },
            {
                "text": 'passport',
                "suffix": 'C'
            }
        ]
    })
}}

HTML

<ul class="ons-list ons-list--bare ons-list--suffix">
  <li class="ons-list__item"> birth certificate<span class="ons-list__suffix" aria-hidden="true">A</span>
  </li>
  <li class="ons-list__item"> national insurance number<span class="ons-list__suffix" aria-hidden="true">B</span>
  </li>
  <li class="ons-list__item"> passport<span class="ons-list__suffix" aria-hidden="true">C</span>
  </li>
</ul>

Inline list

Inline lists should be used to display a horizontal row of links, for example, a list of pages displayed in the transactional footer.

Example: Example Inline List contents

Nunjucks
HTML

Nunjucks

{% from "components/lists/_macro.njk" import onsList %}
{{
    onsList({
        "variants": ['bare', 'inline'],
        "itemsList": [
            {
                "text": 'Contact us',
                "url": '#0'
            },
            {
                "text": 'Cookies and privacy',
                "url": '#0'
            },
            {
                "text": 'Terms and conditions',
                "url": '#0'
            }
        ]
    })
}}

HTML

<ul class="ons-list ons-list--bare ons-list--inline">
  <li class="ons-list__item">
    <a href="#0" class="ons-list__link">Contact us</a>
  </li>
  <li class="ons-list__item">
    <a href="#0" class="ons-list__link">Cookies and privacy</a>
  </li>
  <li class="ons-list__item">
    <a href="#0" class="ons-list__link">Terms and conditions</a>
  </li>
</ul>

Lists with icons

There is specific guidance on how to use the available set of icons.

List with icon prefix

This example uses "iconPosition": 'before' and the iconType parameter on this list to show the check before each item.

Example: Example List With Icon Prefix contents

Nunjucks
HTML

Nunjucks

{% from "components/lists/_macro.njk" import onsList %}
{{
    onsList({
        "iconPosition": "before",
        "iconType": "check",
        "itemsList": [
            {
                "text": "birth certificate"
            },
            {
                "text": "national insurance number"
            },
            {
                "text": "passport"
            }
        ]
    })
}}

HTML

<ul class="ons-list ons-list--bare ons-list--icons">
  <li class="ons-list__item">
    <span class="ons-list__prefix" aria-hidden="true">
      <svg class="ons-svg-icon" viewBox="0 0 13 10" xmlns="http://www.w3.org/2000/svg" focusable="false"
        fill="currentColor">
        <path
          d="M14.35,3.9l-.71-.71a.5.5,0,0,0-.71,0h0L5.79,10.34,3.07,7.61a.51.51,0,0,0-.71,0l-.71.71a.51.51,0,0,0,0,.71l3.78,3.78a.5.5,0,0,0,.71,0h0L14.35,4.6A.5.5,0,0,0,14.35,3.9Z"
          transform="translate(-1.51 -3.04)" />
      </svg>
    </span>birth certificate
  </li>
  <li class="ons-list__item">
    <span class="ons-list__prefix" aria-hidden="true">
      <svg class="ons-svg-icon" viewBox="0 0 13 10" xmlns="http://www.w3.org/2000/svg" focusable="false"
        fill="currentColor">
        <path
          d="M14.35,3.9l-.71-.71a.5.5,0,0,0-.71,0h0L5.79,10.34,3.07,7.61a.51.51,0,0,0-.71,0l-.71.71a.51.51,0,0,0,0,.71l3.78,3.78a.5.5,0,0,0,.71,0h0L14.35,4.6A.5.5,0,0,0,14.35,3.9Z"
          transform="translate(-1.51 -3.04)" />
      </svg>
    </span>national insurance number
  </li>
  <li class="ons-list__item">
    <span class="ons-list__prefix" aria-hidden="true">
      <svg class="ons-svg-icon" viewBox="0 0 13 10" xmlns="http://www.w3.org/2000/svg" focusable="false"
        fill="currentColor">
        <path
          d="M14.35,3.9l-.71-.71a.5.5,0,0,0-.71,0h0L5.79,10.34,3.07,7.61a.51.51,0,0,0-.71,0l-.71.71a.51.51,0,0,0,0,.71l3.78,3.78a.5.5,0,0,0,.71,0h0L14.35,4.6A.5.5,0,0,0,14.35,3.9Z"
          transform="translate(-1.51 -3.04)" />
      </svg>
    </span>passport
  </li>
</ul>

List with icon suffix

This example uses "iconPosition": 'after' and the iconType parameter on this list to show the check after each item.

Example: Example List With Icon Suffix contents

Nunjucks
HTML

Nunjucks

{% from "components/lists/_macro.njk" import onsList %}
{{
    onsList({
        "iconPosition": "after",
        "iconType": "check",
        "itemsList": [
            {
                "text": "birth certificate"
            },
            {
                "text": "national insurance number"
            },
            {
                "text": "passport"
            }
        ]
    })
}}

HTML

<ul class="ons-list ons-list--bare ons-list--icons">
  <li class="ons-list__item"> birth certificate<span class="ons-list__suffix" aria-hidden="true">
      <svg class="ons-svg-icon" viewBox="0 0 13 10" xmlns="http://www.w3.org/2000/svg" focusable="false"
        fill="currentColor">
        <path
          d="M14.35,3.9l-.71-.71a.5.5,0,0,0-.71,0h0L5.79,10.34,3.07,7.61a.51.51,0,0,0-.71,0l-.71.71a.51.51,0,0,0,0,.71l3.78,3.78a.5.5,0,0,0,.71,0h0L14.35,4.6A.5.5,0,0,0,14.35,3.9Z"
          transform="translate(-1.51 -3.04)" />
      </svg>
    </span>
  </li>
  <li class="ons-list__item"> national insurance number<span class="ons-list__suffix" aria-hidden="true">
      <svg class="ons-svg-icon" viewBox="0 0 13 10" xmlns="http://www.w3.org/2000/svg" focusable="false"
        fill="currentColor">
        <path
          d="M14.35,3.9l-.71-.71a.5.5,0,0,0-.71,0h0L5.79,10.34,3.07,7.61a.51.51,0,0,0-.71,0l-.71.71a.51.51,0,0,0,0,.71l3.78,3.78a.5.5,0,0,0,.71,0h0L14.35,4.6A.5.5,0,0,0,14.35,3.9Z"
          transform="translate(-1.51 -3.04)" />
      </svg>
    </span>
  </li>
  <li class="ons-list__item"> passport<span class="ons-list__suffix" aria-hidden="true">
      <svg class="ons-svg-icon" viewBox="0 0 13 10" xmlns="http://www.w3.org/2000/svg" focusable="false"
        fill="currentColor">
        <path
          d="M14.35,3.9l-.71-.71a.5.5,0,0,0-.71,0h0L5.79,10.34,3.07,7.61a.51.51,0,0,0-.71,0l-.71.71a.51.51,0,0,0,0,.71l3.78,3.78a.5.5,0,0,0,.71,0h0L14.35,4.6A.5.5,0,0,0,14.35,3.9Z"
          transform="translate(-1.51 -3.04)" />
      </svg>
    </span>
  </li>
</ul>

This example uses "variants": [ 'inline', 'social'], "iconPosition": 'before' and "iconSize": 'xxl' on the list, with the iconType parameter set on each item to show the social icons.

Open this example in a new tab(Example: Example Inline List With Social Icon Prefix)

Example: Example Inline List With Social Icon Prefix contents

Nunjucks
HTML

Nunjucks

{% from "components/lists/_macro.njk" import onsList %}
{{
    onsList({
        "variants": ['social', 'inline'],
        "iconPosition": 'before',
        "iconSize": 'xxl',
        "itemsList": [
            {
                "url": '#0',
                "text": 'Twitter',
                "iconType": 'twitter',
                "attributes": {
                    "rel": 'noreferrer external'
                }
            },
            {
                "url": '#0',
                "text": 'Facebook',
                "iconType": 'facebook',
                "attributes": {
                    "rel": 'noreferrer external'
                }
            },
            {
                "url": '#0',
                "text": 'Instagram',
                "iconType": 'instagram',
                "attributes": {
                    "rel": 'noreferrer external'
                }
            },
            {
                "url": '#0',
                "text": 'LinkedIn',
                "iconType": 'linkedin',
                "attributes": {
                    "rel": 'noreferrer external'
                }
            }
        ]
    })
}}

HTML

<ul class="ons-list ons-list--social ons-list--inline ons-list--bare ons-list--icons">
  <li class="ons-list__item">
    <span class="ons-list__prefix" aria-hidden="true">
      <svg class="ons-svg-icon ons-svg-icon--xxl" id="icon-twitter" viewBox="0 0 32 32"
        xmlns="http://www.w3.org/2000/svg" focusable="false" aria-hidden="true">
        <path
          d="M24.04,12.95c0,0.17,0,0.33,0,0.5c0.01,4.01-2.17,7.71-5.69,9.64c-3.52,1.93-7.81,1.78-11.19-0.38c0.31,0.04,0.61,0.05,0.92,0.05c1.73,0,3.42-0.58,4.78-1.65c-1.65-0.04-3.09-1.11-3.6-2.68c0.25,0.05,0.51,0.07,0.76,0.07c0.34,0,0.68-0.05,1.01-0.14C9.23,18,7.93,16.4,7.95,14.55v-0.05c0.54,0.29,1.13,0.46,1.74,0.48c-1.66-1.12-2.2-3.33-1.23-5.08c1.96,2.41,4.85,3.87,7.95,4.03c-0.07-0.29-0.1-0.58-0.1-0.88c0-1.58,0.97-3,2.44-3.59c1.47-0.58,3.15-0.21,4.23,0.94c0.86-0.17,1.69-0.49,2.45-0.94c-0.28,0.9-0.88,1.65-1.69,2.13c0.76-0.09,1.51-0.29,2.21-0.6C25.43,11.76,24.79,12.42,24.04,12.95zM16,0C7.16,0,0,7.16,0,16s7.16,16,16,16s16-7.16,16-16c0-4.24-1.69-8.31-4.69-11.31S20.24,0,16,0z" />
      </svg>
    </span><a href="#0" class="ons-list__link" rel="noreferrer external">Twitter</a>
  </li>
  <li class="ons-list__item">
    <span class="ons-list__prefix" aria-hidden="true">
      <svg class="ons-svg-icon ons-svg-icon--xxl" id="icon-facebook" viewBox="0 0 32 32"
        xmlns="http://www.w3.org/2000/svg" focusable="false" aria-hidden="true">
        <path
          d="M32,16.0986285 C32.0009185,7.5342974 25.337417,0.468462963 16.8372092,0.0203294753 C8.33700136,-0.427804013 0.97607758,5.89865855 0.0874346352,14.4161886 C-0.801208309,22.9337186 5.09355054,30.6602611 13.5009524,31.9979281 L13.5009524,20.7518951 L9.44,20.7518951 L9.44,16.0986285 L13.5009524,16.0986285 L13.5009524,12.549267 C13.5009524,8.5169471 15.8857143,6.28613892 19.5428571,6.28613892 C20.742535,6.30277426 21.9393895,6.40782423 23.1238095,6.60044523 L23.1238095,10.5637711 L21.1047619,10.5637711 C19.1161905,10.5637711 18.4990476,11.8056643 18.4990476,13.0782216 L18.4990476,16.0986285 L22.9409524,16.0986285 L22.2247619,20.7518951 L18.4990476,20.7518951 L18.4990476,31.9979281 C26.2735701,30.760956 31.9991507,24.0182672 32,16.0986285 L32,16.0986285 Z" />
      </svg>
    </span><a href="#0" class="ons-list__link" rel="noreferrer external">Facebook</a>
  </li>
  <li class="ons-list__item">
    <span class="ons-list__prefix" aria-hidden="true">
      <svg class="ons-svg-icon ons-svg-icon--xxl" id="icon-instagram" viewBox="0 0 32 32"
        xmlns="http://www.w3.org/2000/svg" focusable="false" aria-hidden="true">
        <path
          d="M21.34,9.46c0.66,0,1.2,0.54,1.2,1.2c0,0.66-0.54,1.2-1.2,1.2c-0.66,0-1.2-0.54-1.2-1.2C20.14,10,20.68,9.46,21.34,9.46z M16,12.67c-1.84,0-3.33,1.49-3.33,3.33c0,1.84,1.49,3.33,3.33,3.33c1.84,0,3.33-1.49,3.33-3.33C19.33,14.16,17.84,12.67,16,12.67z M16,10.86c2.84,0,5.14,2.3,5.14,5.14c0,2.84-2.3,5.14-5.14,5.14c-2.84,0-5.14-2.3-5.14-5.14C10.86,13.16,13.16,10.86,16,10.86z M16.56,7.8h-1.11c-2.17,0-2.51,0.01-3.49,0.06c-0.97,0.04-1.5,0.21-1.86,0.34C9.64,8.39,9.3,8.6,8.95,8.95C8.6,9.3,8.39,9.64,8.2,10.1c-0.14,0.35-0.3,0.88-0.34,1.86c-0.04,0.98-0.06,1.32-0.06,3.49v1.11c0,2.17,0.01,2.51,0.06,3.49c0.04,0.97,0.21,1.5,0.34,1.86c0.18,0.47,0.4,0.8,0.75,1.15c0.35,0.35,0.68,0.57,1.15,0.75c0.35,0.14,0.88,0.3,1.86,0.34c0.94,0.04,1.29,0.06,3.23,0.06h1.61c1.94,0,2.3-0.02,3.23-0.06c0.97-0.04,1.5-0.21,1.86-0.34c0.47-0.18,0.8-0.4,1.15-0.75c0.35-0.35,0.57-0.68,0.75-1.15c0.14-0.35,0.3-0.88,0.34-1.86c0.04-0.94,0.06-1.29,0.06-3.23v-1.61c0-1.94-0.02-2.3-0.06-3.23c-0.04-0.97-0.21-1.5-0.34-1.86c-0.18-0.47-0.4-0.8-0.75-1.15C22.7,8.6,22.36,8.39,21.9,8.2c-0.35-0.14-0.88-0.3-1.86-0.34C19.06,7.82,18.72,7.8,16.56,7.8z M17.03,6c1.8,0,2.18,0.02,3.1,0.06c1.06,0.05,1.79,0.22,2.43,0.46c0.66,0.26,1.22,0.6,1.77,1.15c0.56,0.56,0.9,1.11,1.15,1.77c0.25,0.64,0.42,1.36,0.46,2.43c0.05,0.99,0.06,1.35,0.06,3.58v1.09c0,2.22-0.01,2.59-0.06,3.58c-0.05,1.06-0.22,1.79-0.46,2.43c-0.26,0.66-0.6,1.22-1.15,1.77c-0.56,0.56-1.11,0.9-1.77,1.15c-0.64,0.25-1.36,0.42-2.43,0.46C19.13,25.99,18.77,26,16.55,26h-1.09c-2.22,0-2.59-0.01-3.58-0.06c-1.06-0.05-1.79-0.22-2.43-0.46c-0.66-0.26-1.22-0.6-1.77-1.15c-0.56-0.56-0.9-1.11-1.15-1.77c-0.25-0.64-0.42-1.36-0.46-2.43C6.02,19.21,6,18.83,6,17.03v-2.06c0-1.8,0.02-2.18,0.06-3.1c0.05-1.06,0.22-1.79,0.46-2.43c0.26-0.66,0.6-1.22,1.15-1.77c0.56-0.56,1.11-0.9,1.77-1.15c0.64-0.25,1.36-0.42,2.43-0.46C12.79,6.02,13.17,6,14.97,6H17.03z M16,0C7.16,0,0,7.16,0,16s7.16,16,16,16s16-7.16,16-16c0-4.24-1.69-8.31-4.69-11.31S20.24,0,16,0z" />
      </svg>
    </span><a href="#0" class="ons-list__link" rel="noreferrer external">Instagram</a>
  </li>
  <li class="ons-list__item">
    <span class="ons-list__prefix" aria-hidden="true">
      <svg class="ons-svg-icon ons-svg-icon--xxl" id="icon-linkedin" viewBox="0 0 32 32"
        xmlns="http://www.w3.org/2000/svg" focusable="false" aria-hidden="true">
        <path
          d="M16,-3.41060513e-13 C20.2434638,-3.41060513e-13 24.3131264,1.68570945 27.3137085,4.6862915 C30.3142906,7.68687356 32,11.7565362 32,16 C32,24.836556 24.836556,32 16,32 C7.163444,32 0,24.836556 0,16 C0,7.163444 7.163444,-3.41060513e-13 16,-3.41060513e-13 Z M11.3505859,12.4641113 L7.45385744,12.4641113 L7.45385744,24.1875 L11.3505859,24.1875 L11.3505859,12.4641113 Z M20.9152832,12.1889649 C18.8479004,12.1889649 17.9213867,13.3251953 17.4035644,14.1240234 L17.4035644,14.1240234 L17.4035644,12.4641113 L13.5070801,12.4641113 C13.5212538,12.7696262 13.5275532,13.809993 13.5292593,15.1533871 L13.5293118,16.8832762 C13.5292156,16.9843911 13.5291048,17.0860852 13.5289803,17.1882303 L13.5280782,17.8054916 L13.5280782,17.8054916 L13.5268961,18.427439 C13.5216699,20.9164121 13.5108442,23.3704557 13.5078578,24.0208157 L13.5070801,24.1875 L17.4035644,24.1875 L17.4035644,17.640625 C17.4035644,17.2902832 17.4287109,16.9401856 17.5317382,16.6896972 C17.8134766,15.9897461 18.4545899,15.2646484 19.5310059,15.2646484 C20.940918,15.2646484 21.5051269,16.3395996 21.5051269,17.9157715 L21.5051269,17.9157715 L21.5051269,24.1875 L25.4013672,24.1875 L25.4013672,17.465332 C25.4013672,13.8645019 23.4790039,12.1889649 20.9152832,12.1889649 Z M9.42822263,6.8125 C8.09521488,6.8125 7.22363281,7.68774412 7.22363281,8.83813475 C7.22363281,9.96313475 8.06933594,10.8632812 9.37695313,10.8632812 L9.37695313,10.8632812 L9.40234375,10.8632812 C10.7612305,10.8632812 11.6069336,9.96313475 11.6069336,8.83813475 C11.581543,7.68774412 10.7612305,6.8125 9.42822263,6.8125 Z" />
      </svg>
    </span><a href="#0" class="ons-list__link" rel="noreferrer external">LinkedIn</a>
  </li>
</ul>

Highlighting

Highlighting should be used to add emphasis to particular words in a heading, a user may otherwise miss. It can be used to indicate a calculated or piped value which was entered previously by the user and is being displayed in a new context.

Only apply highlights using the semantic emphasis tag (<em>) with the class .ons-highlight.

Example: Example Highlighting contents

HTML

HTML

<h1>What was the value of the business’s total sales of <em class="ons-highlight">food</em>?</h1>
<h1>Of the <em class="ons-highlight">423</em> employees how many were part-time?</h1>
<h3>You said <em class="ons-highlight">0</em> visitors are staying overnight here on Sunday 21 March 2021</h3>

Quotes

Use when displaying a short quote.

Example: Example Quote contents

Nunjucks
HTML

Nunjucks

{% from "components/quote/_macro.njk" import onsQuote %}
{{-
    onsQuote({
        "text": 'Lorem ipsum dolor sit amet, consectetur adipiscing elit.',
        "ref": 'A N Other'
    })
}}

HTML

<blockquote class="ons-quote">
  <svg class="ons-svg-icon" viewBox="0 0 14 10" xmlns="http://www.w3.org/2000/svg" focusable="false"
    fill="currentColor">
    <path d="M13.44.77h-3l-2 4v6h6v-6h-3l2-4zm-8 0h-3l-2 4v6h6v-6h-3l2-4z" transform="translate(-0.44 -0.77)" />
  </svg>
  <span class="ons-quote__text ons-u-fs-l">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</span>
  <span class="ons-quote__ref">&mdash; A N Other</span>
</blockquote>

Addresses

Use when displaying an address.

Example: Example Address Output contents

Nunjucks
HTML

Nunjucks

{% from "components/address-output/_macro.njk" import onsAddressOutput %}
{{
    onsAddressOutput({
        "unit": 'Unit 5',
        "organisation": 'Trescos',
        "line1": 'Abingdon Road',
        "line2": 'Goathill',
        "town": 'Barry',
        "postcode": 'AB12 6UH'
    })
}}

HTML

<div class="ons-address-output">
  <p class="ons-address-output__lines">
    <span class="ons-address-output__unit">Unit 5</span><br>
    <span class="ons-address-output__organisation">Trescos</span><br>
    <span class="ons-address-output__line1">Abingdon Road</span><br>
    <span class="ons-address-output__line2">Goathill</span><br>
    <span class="ons-address-output__town">Barry</span><br>
    <span class="ons-address-output__postcode">AB12 6UH</span>
  </p>
</div>

Indented text

Use when you need information to stand out from the rest of the content on a page, for example, when providing contact information.

Example: Example Text Indent contents

Nunjucks
HTML

Nunjucks

{% from "components/text-indent/_macro.njk" import onsTextIndent %}
{{-
    onsTextIndent({
        text: '<p>Telephone: 0800 141 2021<br>Monday to Friday, 8 am to 7pm<br>Saturday, 8am to 4pm</p>'
    })
}}

HTML

<div class="ons-text-indent">
  <p>Telephone: 0800 141 2021<br>Monday to Friday, 8 am to 7pm<br>Saturday, 8am to 4pm</p>
</div>

Help improve this page

Let us know how we could improve this page, or share your user research findings. Discuss this page on GitHub (opens in a new tab)

Cookies on ons.gov.uk

Layout

Style

Style Typography

Font

Font weights

Type scale

Headings

Breakpoint headings

Paragraphs

Links

External Links

Example: Example External Link contents

Nunjucks

Nunjucks macro options

HTML

Lists

Bulleted list (default)

Example: Example Bulleted List contents

Nunjucks

HTML

Numbered list

Example: Example Numbered List contents

Nunjucks

HTML

Bare list

Example: Example Bare List contents

Nunjucks

HTML

Dashed list

Example: Example Dashed List contents

Nunjucks

HTML

Prefixed list

Example: Example Prefixed List contents

Nunjucks

HTML

Suffixed list

Example: Example Suffixed List contents

Nunjucks

HTML

Inline list

Example: Example Inline List contents

Nunjucks

HTML

Lists with icons

List with icon prefix

Example: Example List With Icon Prefix contents

Nunjucks

HTML

List with icon suffix

Example: Example List With Icon Suffix contents

Nunjucks

HTML

Inline list with social media icon prefix

Example: Example Inline List With Social Icon Prefix contents

Nunjucks

HTML

Highlighting

Example: Example Highlighting contents

HTML

Quotes

Example: Example Quote contents

Nunjucks

HTML

Addresses

Example: Example Address Output contents

Nunjucks

HTML

Indented text

Example: Example Text Indent contents

Nunjucks

HTML

Help improve this page