Mark · Patterns

Roster

A list of people or things, each one a mark beside a paragraph, alternating side down the page. The barbershop's five barbers, the florist's occasions, the market's aisles — one shape that four sites had each written out by hand.

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.

People

Full page preview ↗

Who teaches

Four teachers

  • Priya Raghunathan

    Founder · 15 years

    Trained in Mysore and teaching in Portland since 2014.

    Take Priya's class if you want to be corrected.

    See when Priya teaches

  • June Osei

    Teacher · 8 years

    Teaches the beginners course and most of the hatha.

    Take June's class if it is your first in a decade.

    See when June teaches 
<section class="mk-section">
  <div class="mk-container mk-container--inset">
    <div class="mk-title-block">
      <p class="mk-eyebrow text-uppercase fw-semibold mb-2">Who teaches</p>
      <h2 class="mb-2">Four teachers</h2>
    </div>
    <ul class="mk-stack list-unstyled mb-0">
      <li class="mk-row mk-row--weighted-right align-items-center">
        <div class="mk-placeholder" aria-hidden="true">PR</div>
        <div>
          <h2 class="h4 mb-1">Priya Raghunathan</h2>
          <p class="text-body-secondary small mb-3">Founder · 15 years</p>
          <p class="mb-2">Trained in Mysore and teaching in Portland since 2014.</p>
          <p class="text-body-secondary mb-3">
            <em>Take Priya&#39;s class if you want to be corrected.</em>
          </p>
          <a class="mk-btn mk-btn--naked mk-nudge px-0" href="#">
            See when Priya teaches
            <i class="bi bi-arrow-right-short"></i>
          </a>
        </div>
      </li>
      <li class="mk-row mk-row--weighted-right mk-row--reverse align-items-center">
        <div class="mk-placeholder" aria-hidden="true">JO</div>
        <div>
          <h2 class="h4 mb-1">June Osei</h2>
          <p class="text-body-secondary small mb-3">Teacher · 8 years</p>
          <p class="mb-2">Teaches the beginners course and most of the hatha.</p>
          <p class="text-body-secondary mb-3">
            <em>Take June&#39;s class if it is your first in a decade.</em>
          </p>
          <a class="mk-btn mk-btn--naked mk-nudge px-0" href="#">
            See when June teaches
            <i class="bi bi-arrow-right-short"></i>
          </a>
        </div>
      </li>
    </ul>
  </div>
</section>
eyebrow: Who teaches
title: Four teachers
items: [2 items]

Things, with icons

Full page preview ↗

What is on the shelves

Four aisles

  • Produce

    One table of it, from the stalls outside, changed every morning.

  • Dairy and eggs

    Milk in glass if you bring the bottle back.

<section class="mk-section">
  <div class="mk-container mk-container--inset">
    <div class="mk-title-block">
      <p class="mk-eyebrow text-uppercase fw-semibold mb-2">What is on the shelves</p>
      <h2 class="mb-2">Four aisles</h2>
    </div>
    <ul class="mk-stack list-unstyled mb-0">
      <li class="mk-row mk-row--weighted-right align-items-center">
        <div class="mk-placeholder" aria-hidden="true">
          <i class="bi bi-basket"></i>
        </div>
        <div>
          <h2 class="h4 mb-1">Produce</h2>
          <p class="mb-0">One table of it, from the stalls outside, changed every morning.</p>
        </div>
      </li>
      <li class="mk-row mk-row--weighted-right mk-row--reverse align-items-center">
        <div class="mk-placeholder" aria-hidden="true">
          <i class="bi bi-egg"></i>
        </div>
        <div>
          <h2 class="h4 mb-1">Dairy and eggs</h2>
          <p class="mb-0">Milk in glass if you bring the bottle back.</p>
        </div>
      </li>
    </ul>
  </div>
</section>
eyebrow: What is on the shelves
title: Four aisles
items: [2 items]
Fields (11)
FieldTypeNotes
eyebrow text
title text
intro textarea
items repeater
padding text
surface text
container text
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