Mark · Patterns

Bands

A band of words — eyebrow, heading, and rich body copy. The plain-text page: about, contact, services, policies, anything that is mostly writing.

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.

About

Full page preview ↗

About

Micah shoots the parts of the city that do not pose

Documentary work around New Orleans — music, second lines, food, and the odd portrait.

Available for shows, festivals, and editorial assignments. Prints of anything in the galleries are available on request.

<section class="mk-section">
  <div class="mk-container mk-container--prose">
    <div class="mk-title-block">
      <p class="mk-eyebrow text-uppercase fw-semibold mb-2">About</p>
      <h2 class="mb-2">Micah shoots the parts of the city that do not pose</h2>
      <p class="lead text-body-secondary mb-0">Documentary work around New Orleans — music, second lines, food, and the odd portrait.</p>
    </div>
    <div>
      <p>Available for shows, festivals, and editorial assignments. Prints of anything in the galleries are available on request.</p>
    </div>
  </div>
</section>
eyebrow: About
title: Micah shoots the parts of the city that do not pose
lead: Documentary work around New Orleans — music, second lines, food, and the odd portrait.
body: <p>Available for shows, festivals, and editorial assignments. Prints of anything in the galleries are available on request.</p>

Centered note

Full page preview ↗

Studio closed through August

Back for fall bookings. Email for anything urgent.

<section class="mk-section">
  <div class="mk-container mk-container--inset text-center">
    <div class="mk-title-block mk-title-block--center">
      <h2 class="mb-2">Studio closed through August</h2>
    </div>
    <div>
      <p>Back for fall bookings. Email for anything urgent.</p>
    </div>
  </div>
</section>
title: Studio closed through August
align: center
width: inset
body: <p>Back for fall bookings. Email for anything urgent.</p>
Fields (12)
FieldTypeNotes
eyebrow text small label above the heading
title text
level number 2 for a section, 1 when this band IS the page's title
lead textarea one emphasized line under the heading
body wysiwyg
surface text empty, muted, subtle, primary, or dark
align text start or center
width text A rung on the container ladder — full-bleed · fluid · container · inset · prose, widest to narrowest.
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