Styleguide › GOV.UK Elements

Typography

Repo • Page source

Headings

A 48px Bold heading

A 36px Bold heading

A 24px Bold heading

A 19px Bold heading

A 19px heading 

<h1>
  A 48px Bold heading
</h1>
<h3>
  A 36px Bold heading
</h3>
<h3>
  A 24px Bold heading
</h3>
<h4>
  A 19px Bold heading
</h4>
<h5>
  A 19px heading
</h5>
h1 A 48px Bold heading
h3 A 36px Bold heading
h3 A 24px Bold heading
h4 A 19px Bold heading
h5 A 19px heading

Lead paragraph

A 24px lead paragraph. Maecenas sed diam eget risus varius blandit sit amet non magna. Donec ullamcorper nulla non metus auctor fringilla.

A 19px body copy paragraph. Maecenas sed diam eget risus varius blandit sit amet non magna. Donec ullamcorper nulla non metus auctor fringilla. Maecenas sed diam eget risus varius blandit sit amet non magna. Donec ullamcorper nulla non metus auctor fringilla. 


<p class="lede">
  A 24px lead paragraph. Maecenas sed diam eget risus varius blandit sit amet non magna. Donec ullamcorper nulla non metus auctor fringilla.
</p>
<p>
  A 19px body copy paragraph. Maecenas sed diam eget risus varius blandit sit amet non magna. Donec ullamcorper nulla non metus auctor fringilla. Maecenas sed diam eget risus varius blandit sit amet non magna. Donec ullamcorper nulla non metus auctor fringilla.
</p>
p.lede A 24px lead paragraph. Maecenas sed diam eget risus varius blandit sit amet non magna. Donec ullamcorper nulla non metus auctor fringilla.
p A 19px body copy paragraph. Maecenas sed diam eget risus varius blandit sit amet non magna. Donec ullamcorper nulla non metus auctor fringilla. Maecenas sed diam eget risus varius blandit sit amet non magna. Donec ullamcorper nulla non metus auctor fringilla.

Body copy

A 19px body copy paragraph. Maecenas sed diam eget risus varius blandit sit amet non magna. Donec ullamcorper nulla non metus auctor fringilla.

A 16px supporting text paragraph. Maecenas sed diam eget risus varius blandit sit amet non magna. Donec ullamcorper nulla non metus auctor fringilla. 


<p>
  A 19px body copy paragraph. Maecenas sed diam eget risus varius blandit sit amet non magna. Donec ullamcorper nulla non metus auctor fringilla.
</p>
<p>
  <small>A 16px supporting text paragraph. Maecenas sed diam eget risus varius blandit sit amet non magna. Donec ullamcorper nulla non metus auctor fringilla.</small>
</p>
p A 19px body copy paragraph. Maecenas sed diam eget risus varius blandit sit amet non magna. Donec ullamcorper nulla non metus auctor fringilla.
p
small A 16px supporting text paragraph. Maecenas sed diam eget risus varius blandit sit amet non magna. Donec ullamcorper nulla non metus auctor fringilla.

Lists

List items start with a lowercase letter and have no full stop at the end.

  • here is a bulleted list
  • vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor
  • vestibulum id ligula porta felis euismod semper
  • integer posuere erat a ante venenatis dapibus posuere velit aliquet
  1. here is a numbered list
  2. vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor
  3. vestibulum id ligula porta felis euismod semper
  4. integer posuere erat a ante venenatis dapibus posuere velit aliquet 

<ul>
  <li>
    here is a bulleted list
  </li>
  <li>
    vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor
  </li>
  <li>
    vestibulum id ligula porta felis euismod semper
  </li>
  <li>
    integer posuere erat a ante venenatis dapibus posuere velit aliquet
  </li>
</ul>
<ol>
  <li>
    here is a numbered list
  </li>
  <li>
    vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor
  </li>
  <li>
    vestibulum id ligula porta felis euismod semper
  </li>
  <li>
    integer posuere erat a ante venenatis dapibus posuere velit aliquet
  </li>
</ol>
ul
li here is a bulleted list
li vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor
li vestibulum id ligula porta felis euismod semper
li integer posuere erat a ante venenatis dapibus posuere velit aliquet
ol
li here is a numbered list
li vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor
li vestibulum id ligula porta felis euismod semper
li integer posuere erat a ante venenatis dapibus posuere velit aliquet

Inset text

Use bordered inset text to draw attention to important content on the page.

It can take up to 8 weeks to register a lasting power of attorney if there are no mistakes in the application. 


<div class="panel-indent">
  <p>
    It can take up to 8 weeks to register a lasting power of attorney if there are no mistakes in the application.
  </p>
</div>
div.panel-indent
p It can take up to 8 weeks to register a lasting power of attorney if there are no mistakes in the application.

Hidden text (progressive disclosure)

Use this to make your page easier to scan, only showing contextual information when required.

Click on "Help with nationality" to see how this works.

<details role="group"><summary aria-controls="details-content-0" aria-expanded="false" role="button" tabindex="0"><span class="summary">Help with nationality</span></summary>
  <div aria-hidden="true" class="panel-indent" id="details-content-0">
    <p>If you’re not sure about your nationality, try to find out from an official document like a passport or national ID card.</p>
    
    <p>We need to know your nationality so we can work out which elections you’re entitled to vote in. If you can’t provide your nationality, you’ll have to send copies of identity documents through the post.</p>
    
  </div>
</details>
details role="group"
summary aria-controls="details-content-0" aria-expanded="false" role="button" tabindex="0"
span.summary Help with nationality
div#details-content-0.panel-indent aria-hidden="true"
p If you’re not sure about your nationality, try to find out from an official document like a passport or national ID card.
p We need to know your nationality so we can work out which elections you’re entitled to vote in. If you can’t provide your nationality, you’ll have to send copies of identity documents through the post.