Mark · Patterns

Signup

Email capture — a heading, a line of pitch, one field and a button. A plain HTML form, so it works with no JavaScript and posts wherever action points: a list service, an internal route, anything that accepts a POST. Without an action it renders complete but inert, which is what an announced-but-unwired form should look like rather than one that silently swallows an address.

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 ↗

Centred, on the page's own ground — the shape for the foot of a blog or an article.

<section class="signup py-6">
  <div class="mk-container mk-container--inset">
    <div class="mk-title-block mk-title-block--center">
      <h2 class="mb-2">Get the next one by email.</h2>
      <p class="lead text-body-secondary mb-0">Occasional notes on building Accent and Mark. No schedule, no marketing.</p>
    </div>
    <form class="mk-signup__form mx-auto" action="#" method="post">
      <label class="form-label visually-hidden" for="signup-email">Email address</label>
      <div class="d-flex flex-wrap gap-2 justify-content-center">
        <input class="form-control signup__input" id="signup-email" type="email" name="email" autocomplete="email" required placeholder="you@example.com" >
        <button class="mk-btn mk-btn--primary" type="submit" >Subscribe</button>
      </div>
      <p class="mk-signup__note text-body-secondary mb-0">One email when something ships. Unsubscribe any time.</p>
    </form>
  </div>
</section>
title: Get the next one by email.
body: Occasional notes on building Accent and Mark. No schedule, no marketing.
action: #
note: One email when something ships. Unsubscribe any time.

On a tone, ranged left

Full page preview ↗

A band that separates from the sections either side.

<section class="signup py-6 surface-muted">
  <div class="mk-container mk-container--inset">
    <div class="mk-title-block">
      <p class="mk-eyebrow text-uppercase fw-semibold mb-2">Stay posted</p>
      <h2 class="mb-2">One email when something ships.</h2>
    </div>
    <form class="mk-signup__form" action="#" method="post">
      <label class="form-label visually-hidden" for="signup-email">Email address</label>
      <div class="d-flex flex-wrap gap-2">
        <input class="form-control signup__input" id="signup-email" type="email" name="email" autocomplete="email" required placeholder="you@example.com" >
        <button class="mk-btn mk-btn--primary" type="submit" >Keep me posted</button>
      </div>
    </form>
  </div>
</section>
surface: muted
align: start
eyebrow: Stay posted
title: One email when something ships.
action: #
cta_label: Keep me posted

Not wired yet

Full page preview ↗

With no action the field and button render disabled — an announced form that cannot quietly lose an address.

<section class="signup py-6">
  <div class="mk-container mk-container--inset">
    <div class="mk-title-block mk-title-block--center">
      <h2 class="mb-2">Get the next one by email.</h2>
      <p class="lead text-body-secondary mb-0">Occasional notes on building Accent and Mark.</p>
    </div>
    <form class="mk-signup__form mx-auto">
      <label class="form-label visually-hidden" for="signup-email">Email address</label>
      <div class="d-flex flex-wrap gap-2 justify-content-center">
        <input class="form-control signup__input" id="signup-email" type="email" name="email" autocomplete="email" required placeholder="you@example.com" disabled>
        <button class="mk-btn mk-btn--primary" type="submit" disabled>Subscribe</button>
      </div>
      <p class="mk-signup__note text-body-secondary mb-0">Sign-up opens shortly.</p>
    </form>
  </div>
</section>
title: Get the next one by email.
body: Occasional notes on building Accent and Mark.
Fields (15)
FieldTypeNotes
eyebrow text
title text
body textarea
action url Where the POST goes — your list service's endpoint. Empty renders the form inert.
method text post (default) or get — some list services want get
field_name text The input's name. Services differ — Mailchimp wants EMAIL, Buttondown wants email.
placeholder text
cta_label text
note text Shown under the field — what they are agreeing to
surface text empty (page), muted, subtle, primary, or dark
align text center (default) or start
id text
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