Skip to main content

Typography

Headings​

lbh-heading-h1

lbh-heading-h2

lbh-heading-h3

lbh-heading-h4

lbh-heading-h5
<h1 class="lbh-heading-h1">lbh-heading-h1</h1>
<h2 class="lbh-heading-h2">lbh-heading-h2</h2>
<h3 class="lbh-heading-h3">lbh-heading-h3</h3>
<h4 class="lbh-heading-h4">lbh-heading-h4</h4>
<h5 class="lbh-heading-h5">lbh-heading-h5</h5>

Captions​

caption-m caption-l caption-xl

lbh-heading-h1

<span class="govuk-caption-m lbh-caption">caption-m</span>
<span class="govuk-caption-l lbh-caption">caption-l</span>
<span class="govuk-caption-xl lbh-caption">caption-xl</span>

Body text​

lbh-body-l

lbh-body-m

lbh-body-s

lbh-body-xs

<p class="lbh-body-l">lbh-body-l</p>
<p class="lbh-body-m">lbh-body-m</p>
<p class="lbh-body-s">lbh-body-s</p>
<p class="lbh-body-xs">lbh-body-xs</p>

lbh-link

lbh-link lbh-link--muted

lbh-link lbh-link--danger

lbh-link lbh-link--no-visited-state

<a href="#" class="lbh-link">lbh-link</a>
<a href="#" class="lbh-link lbh-link--muted">lbh-link lbh-link--muted</a>
<a href="#" class="lbh-link lbh-link--danger">lbh-link lbh-link--danger</a>
<a href="#" class="lbh-link lbh-link--no-visited-state">
  lbh-link lbh-link--no-visited-state
</a>

Lists​

Plain list​

<ul class="lbh-list">
  <li>
    <a href="#" class="lbh-link">Benefits calculators</a>
  </li>
  <li>
    <a href="#" class="lbh-link">Benefit overpayments</a>
  </li>
  <li>
    <a href="#" class="lbh-link">Benefit fraud</a>
  </li>
  <li>
    <a href="#" class="lbh-link">More</a>
  </li>
</ul>

With bullets​

<ul class="lbh-list lbh-list--bullet">
  <li>
    <a href="#" class="lbh-link">Benefits calculators</a>
  </li>
  <li>
    <a href="#" class="lbh-link">Benefit overpayments</a>
  </li>
  <li>
    <a href="#" class="lbh-link">Benefit fraud</a>
  </li>
  <li>
    <a href="#" class="lbh-link">More</a>
  </li>
</ul>

With numbers​

<ul class="lbh-list lbh-list--number">
  <li>
    <a href="#" class="lbh-link">Benefits calculators</a>
  </li>
  <li>
    <a href="#" class="lbh-link">Benefit overpayments</a>
  </li>
  <li>
    <a href="#" class="lbh-link">Benefit fraud</a>
  </li>
  <li>
    <a href="#" class="lbh-link">More</a>
  </li>
</ul>

Nested​

  1. Download kit
  2. Simple install guide
    1. Kit requirements
      • Node.js
      • Web browser
    2. Install the kit
    3. Run the kit
  3. Advanced install guide
<ol class="lbh-list lbh-list--number">
  <li><a class="lbh-link" href="#">Download kit</a></li>
  <li>
    <a class="lbh-link" href="#">Simple install guide</a>
    <ol class="lbh-list lbh-list--number">
      <li>
        <a class="lbh-link" href="#">Kit requirements</a>
        <ul class="lbh-list lbh-list--bullet">
          <li>Node.js</li>
          <li>Web browser</li>
        </ul>
      </li>
      <li>
        <a class="lbh-link" href="#">Install the kit</a>
      </li>
      <li>
        <a class="lbh-link" href="#">Run the kit</a>
      </li>
    </ol>
  </li>
  <li><a class="lbh-link" href="#">Advanced install guide</a></li>
</ol>

Overriding size, weight and spacing​

There's a range of modifier classes provided by GOV.UK Frontend you can use to change the way text looks.

We also provide our own font weight modifier, which gives a little more flexibility:

Regular

Bold

Medium

Light

<p class="lbh-body lbh-!-font-weight-regular">Regular</p>
<p class="lbh-body lbh-!-font-weight-bold">Bold</p>
<p class="lbh-body lbh-!-font-weight-medium">Medium</p>
<p class="lbh-body lbh-!-font-weight-light">Light</p>