Heading

We use the WordPress Core “heading” block wherever possible. There are some legacy headings across the site from before the Block Editor days, particularly in Posts.

Standard headings
Underlined variation

Heading one

HTML:

<h1 class="wp-block-heading">Heading one</h1>

CSS:

font-size: clamp( 2rem, 5vw, 3.33rem );

font-family: Besley, serif;
font-weight: 600;
line-height: 1.15;
color: #003a92;

Heading two

HTML:

<h2 class="wp-block-heading">Heading two</h2>

CSS:

font-size: clamp( 1.6rem, 4vw, 2.66rem );

font-family: Besley, serif;
font-weight: 600;
line-height: 1.15;
color: #003a92;

Heading three

HTML:

<h3 class="wp-block-heading">Heading three</h3>

CSS:

font-size: clamp( 1.4rem, 3vw, 2rem );

font-family: Besley, serif;
font-weight: 600;
line-height: 1.15;
color: #003a92;

Heading four

HTML:

<h4 class="wp-block-heading">Heading four</h4>

CSS:

font-size: clamp( 1.3rem, 2.5vw, 1.66rem );

font-family: Besley, serif;
font-weight: 600;
line-height: 1.15;
color: #003a92;

Heading five

HTML:

<h5 class="wp-block-heading">Heading five</h5>

CSS:

font-size: clamp( 1.2rem, 2vw, 1.4rem );

font-family: Besley, serif;
font-weight: 600;
line-height: 1.15;
color: #003a92;

Heading six

HTML:

<h6 class="wp-block-heading">Heading six</h6>

CSS:

font-size: clamp( 1.1rem, 1vw, 1.33rem );

font-family: Besley, serif;
font-weight: 600;
line-height: 1.15;
color: #003a92;

---

Heading one

HTML:

<h1 class="wp-block-heading heading--underlined">Heading one</h1>

CSS:

.heading--underlined:after {
    display: block;
    content: "";
    background-color: #23bdc1;
    height: 2px;
    margin-top: 21px;
    width: 70px;
}

@media (min-width: 992px) {
    .heading--underlined:after {
        width: 80px;
    }
}

Heading two

HTML:

<h2 class="wp-block-heading heading--underlined">Heading two</h2>

CSS:

.heading--underlined:after {
    display: block;
    content: "";
    background-color: #23bdc1;
    height: 2px;
    margin-top: 21px;
    width: 70px;
}

@media (min-width: 992px) {
    .heading--underlined:after {
        width: 80px;
    }
}

Heading three

HTML:

<h3 class="wp-block-heading heading--underlined">Heading three</h3>

CSS:

.heading--underlined:after {
    display: block;
    content: "";
    background-color: #23bdc1;
    height: 2px;
    margin-top: 21px;
    width: 70px;
}

@media (min-width: 992px) {
    .heading--underlined:after {
        width: 80px;
    }
}

Heading four

HTML:

<h4 class="wp-block-heading heading--underlined">Heading four</h4>

CSS:

.heading--underlined:after {
    display: block;
    content: "";
    background-color: #23bdc1;
    height: 2px;
    margin-top: 21px;
    width: 70px;
}

@media (min-width: 992px) {
    .heading--underlined:after {
        width: 80px;
    }
}

Heading five

HTML:

<h5 class="wp-block-heading heading--underlined">Heading five</h5>

CSS:

.heading--underlined:after {
    display: block;
    content: "";
    background-color: #23bdc1;
    height: 2px;
    margin-top: 21px;
    width: 70px;
}

@media (min-width: 992px) {
    .heading--underlined:after {
        width: 80px;
    }
}

Heading six

HTML:

<h6 class="wp-block-heading heading--underlined">Heading six</h6>

CSS:

.heading--underlined:after {
    display: block;
    content: "";
    background-color: #23bdc1;
    height: 2px;
    margin-top: 21px;
    width: 70px;
}

@media (min-width: 992px) {
    .heading--underlined:after {
        width: 80px;
    }
}