Mark · Patterns

Title block

Eyebrow, heading, lead — the three lines that introduce a band. Nearly every pattern in the system had grown its own copy of this trio; this is the one they should all be reaching for. It brings its own measure (a heading that runs the full width of a wide screen is unreadable) and its own space below, so a band can drop it in and get on with its content.

These are full-width bands, so the specimens below are cramped by the documentation column. Use Full page preview on any example to see it own the viewport.

Default

Full page preview ↗

The three lines, ranged left, held to a readable measure.

Selected work

The centre card is the one you are looking at.

Swipe, drag, or use the arrows — focus follows the card nearest the middle.

<div class="mk-container">
  <div class="mk-title-block">
    <p class="mk-eyebrow text-uppercase fw-semibold mb-2">Selected work</p>
    <h2 class="mb-2">The centre card is the one you are looking at.</h2>
    <p class="lead text-body-secondary mb-0">Swipe, drag, or use the arrows — focus follows the card nearest the middle.</p>
  </div>
</div>
eyebrow: Selected work
title: The centre card is the one you are looking at.
intro: Swipe, drag, or use the arrows — focus follows the card nearest the middle.

Centered

Full page preview ↗

The same header over a centred band.

What we do

Three things, done properly.

A short line of context under the heading, no wider than the eye wants to track.

<div class="mk-container">
  <div class="mk-title-block mk-title-block--center">
    <p class="mk-eyebrow text-uppercase fw-semibold mb-2">What we do</p>
    <h2 class="mb-2">Three things, done properly.</h2>
    <p class="lead text-body-secondary mb-0">A short line of context under the heading, no wider than the eye wants to track.</p>
  </div>
</div>
align: center
eyebrow: What we do
title: Three things, done properly.
intro: A short line of context under the heading, no wider than the eye wants to track.

Heading only

Full page preview ↗

Every line is optional — a header can be one word.

Featured programs

<div class="mk-container">
  <div class="mk-title-block">
    <h2 class="mb-2">Featured programs</h2>
  </div>
</div>
title: Featured programs

Composed inside a band

Full page preview ↗

bare drops the container for a pattern that brings its own — the shape features, gallery, showcase, stats and testimonials all use. The space beneath stays, because every one of them needed it.

Inside a band

No container of its own.

The band around it already has one, so the header stops nesting a second.

<div class="mk-title-block">
  <p class="mk-eyebrow text-uppercase fw-semibold mb-2">Inside a band</p>
  <h2 class="mb-2">No container of its own.</h2>
  <p class="lead text-body-secondary mb-0">The band around it already has one, so the header stops nesting a second.</p>
</div>
bare: true
eyebrow: Inside a band
title: No container of its own.
intro: The band around it already has one, so the header stops nesting a second.
Fields (11)
FieldTypeNotes
eyebrow text The small line above the heading — a kicker
eyebrow_pill boolean Draws the eyebrow on a soft brand fill with a pill radius. Same line, same role — a treatment, not a chip or a badge.
title text
level text 2 unless the band is nested under another heading
display text Empty for the heading's own size; 3, 4, 5 or 6 for the larger page-header scale. Independent of level — how big it looks, not what it means.
intro textarea
align text empty (start) or center
bare boolean Drops the container
cta_label text A call to action belonging to this title. Leave empty for none.
cta_href url
class_names text
On this page