Mark · Patterns

CTA band

The closing ask — one heading, one sentence, one button, in a band. Bare it is neutral, drawn in the page's own ink; fill paints it. The accent fill is deliberately the loudest thing on a page, which is the argument for having exactly one of them.

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.

Bare

Full page preview ↗

No fill — the complete neutral, drawn in the page's own ink. This is the band you get by asking for nothing, and it is finished, not an abstract waiting for a variant.

Ready to build something?

Start from a theme that already knows what a page is made of.

Get started 
<section class="mk-section">
  <div class="mk-container">
    <div class="mk-cta text-center">
      <div class="mk-measure mk-measure--inset">
        <h2 class="mb-2">Ready to build something?</h2>
        <p class="mb-0 text-body-secondary">Start from a theme that already knows what a page is made of.</p>
      </div>
      <div class="mt-4">
        <a class="mk-btn mk-btn--inverse mk-btn--lg" href="#">Get started</a>
      </div>
    </div>
  </div>
</section>
title: Ready to build something?
body: Start from a theme that already knows what a page is made of.
cta_label: Get started
cta_href: #

Accent fill

Full page preview ↗

fill: primary — one step up, not a rescue. Deliberately the loudest thing on a page, which is the argument for having exactly one of them.

Ready to build something?

Start from a theme that already knows what a page is made of.

Get started 
<section class="mk-section">
  <div class="mk-container">
    <div class="mk-cta mk-cta--primary text-center" data-bs-theme="dark">
      <div class="mk-measure mk-measure--inset">
        <h2 class="mb-2">Ready to build something?</h2>
        <p style="opacity:.85" class="mb-0">Start from a theme that already knows what a page is made of.</p>
      </div>
      <div class="mt-4">
        <a class="mk-btn mk-btn--inverse mk-btn--lg" href="#">Get started</a>
      </div>
    </div>
  </div>
</section>
fill: primary
title: Ready to build something?
body: Start from a theme that already knows what a page is made of.
cta_label: Get started
cta_href: #

Muted, ranged left

Full page preview ↗

fill: muted with align: start — a wash of the page's own ink, reading as part of the page rather than a full stop. The shape for a band that sits mid-scroll.

Next step

Bring your own content.

Every partial here takes the same fields the CMS hands to editors.

Read the docs 
<section class="mk-section">
  <div class="mk-container">
    <div class="mk-cta mk-cta--muted">
      <div class="mk-row mk-row--weighted-left align-items-center" style="--mk-row-weighted:66">
        <div>
          <p class="mk-eyebrow text-uppercase fw-semibold mb-2">Next step</p>
          <h2 class="mb-2">Bring your own content.</h2>
          <p style="opacity:.85" class="mb-0">Every partial here takes the same fields the CMS hands to editors.</p>
        </div>
        <div class="text-lg-end">
          <a class="mk-btn mk-btn--inverse mk-btn--lg" href="#">Read the docs</a>
        </div>
      </div>
    </div>
  </div>
</section>
fill: muted
align: start
eyebrow: Next step
title: Bring your own content.
body: Every partial here takes the same fields the CMS hands to editors.
cta_label: Read the docs
cta_href: #
Fields (13)
FieldTypeNotes
padding text Vertical rhythm. `mk-section` for the section rhythm; the default is kept while 25 callers still expect it
fill text empty (neutral outline), primary (accent gradient), or muted
eyebrow text
title text
body textarea
cta_label text
cta_href url
cta_variant text
container text
align text center or start
shape_bottom group Cuts the band's BOTTOM edge. The shape is painted in this band's own ground and hangs over the band below, so the band below declares nothing.
shape_top group The same, on the band's TOP edge — it hangs upward over the band above.
class_names text
On this page