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-mcaption-lcaption-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>

Links#

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>