Mark · Components

Rail

Several items at a time, swiped or scrolled — the sliding case the carousel cannot do. The mechanism is the platform's: a scroll container with snap points, so touch momentum, keyboard scrolling and no-JS all come free. Arrows are an enhancement that appears only when there is somewhere to go. Reach for the carousel when one full slide at a time is the point; reach for this when the next item should peek.

Default — three across, arrows only

Full page preview ↗
A generated colour field
A generated colour field
A generated colour field
A generated colour field
A generated colour field
<div class="mk-rail mk-rail--per-3" data-rail>
  <div class="mk-rail__track" data-rail-track tabindex="0" role="group" aria-label="Recent work">
    <figure class="mk-rail__item mb-0">
      <img src="/assets/img/everlasting.jpg" alt="A generated colour field" class="w-100 mk-rounded-md" loading="lazy" decoding="async">
    </figure>
    <figure class="mk-rail__item mb-0">
      <img src="/assets/img/everlasting.jpg" alt="A generated colour field" class="w-100 mk-rounded-md" loading="lazy" decoding="async">
    </figure>
    <figure class="mk-rail__item mb-0">
      <img src="/assets/img/everlasting.jpg" alt="A generated colour field" class="w-100 mk-rounded-md" loading="lazy" decoding="async">
    </figure>
    <figure class="mk-rail__item mb-0">
      <img src="/assets/img/everlasting.jpg" alt="A generated colour field" class="w-100 mk-rounded-md" loading="lazy" decoding="async">
    </figure>
    <figure class="mk-rail__item mb-0">
      <img src="/assets/img/everlasting.jpg" alt="A generated colour field" class="w-100 mk-rounded-md" loading="lazy" decoding="async">
    </figure>
  </div>
  <button class="mk-rail__nav mk-rail__nav--prev" type="button" data-rail-prev aria-label="Previous" hidden>
    <i class="bi bi-chevron-left" aria-hidden="true"></i>
  </button>
  <button class="mk-rail__nav mk-rail__nav--next" type="button" data-rail-next aria-label="Next" hidden>
    <i class="bi bi-chevron-right" aria-hidden="true"></i>
  </button>
</div>
label: Recent work
per_view: 3
items: [5 items]

Two across

Full page preview ↗
A generated colour field
A generated colour field
A generated colour field
<div class="mk-rail mk-rail--per-2" data-rail>
  <div class="mk-rail__track" data-rail-track tabindex="0" role="group" aria-label="Two up">
    <figure class="mk-rail__item mb-0">
      <img src="/assets/img/everlasting.jpg" alt="A generated colour field" class="w-100 mk-rounded-md" loading="lazy" decoding="async">
    </figure>
    <figure class="mk-rail__item mb-0">
      <img src="/assets/img/everlasting.jpg" alt="A generated colour field" class="w-100 mk-rounded-md" loading="lazy" decoding="async">
    </figure>
    <figure class="mk-rail__item mb-0">
      <img src="/assets/img/everlasting.jpg" alt="A generated colour field" class="w-100 mk-rounded-md" loading="lazy" decoding="async">
    </figure>
  </div>
  <button class="mk-rail__nav mk-rail__nav--prev" type="button" data-rail-prev aria-label="Previous" hidden>
    <i class="bi bi-chevron-left" aria-hidden="true"></i>
  </button>
  <button class="mk-rail__nav mk-rail__nav--next" type="button" data-rail-next aria-label="Next" hidden>
    <i class="bi bi-chevron-right" aria-hidden="true"></i>
  </button>
</div>
label: Two up
per_view: 2
items: [3 items]

One across — a swipeable slide

Full page preview ↗
A generated colour field
A generated colour field
A generated colour field
<div class="mk-rail mk-rail--per-1" data-rail>
  <div class="mk-rail__track" data-rail-track tabindex="0" role="group" aria-label="Full-width slides">
    <figure class="mk-rail__item mb-0">
      <img src="/assets/img/everlasting.jpg" alt="A generated colour field" class="w-100 mk-rounded-md" loading="lazy" decoding="async">
    </figure>
    <figure class="mk-rail__item mb-0">
      <img src="/assets/img/everlasting.jpg" alt="A generated colour field" class="w-100 mk-rounded-md" loading="lazy" decoding="async">
    </figure>
    <figure class="mk-rail__item mb-0">
      <img src="/assets/img/everlasting.jpg" alt="A generated colour field" class="w-100 mk-rounded-md" loading="lazy" decoding="async">
    </figure>
  </div>
  <button class="mk-rail__nav mk-rail__nav--prev" type="button" data-rail-prev aria-label="Previous" hidden>
    <i class="bi bi-chevron-left" aria-hidden="true"></i>
  </button>
  <button class="mk-rail__nav mk-rail__nav--next" type="button" data-rail-next aria-label="Next" hidden>
    <i class="bi bi-chevron-right" aria-hidden="true"></i>
  </button>
</div>
label: Full-width slides
per_view: 1
items: [3 items]

Captions, asked for

Full page preview ↗
A generated colour field
Everlasting
A generated colour field
Slow mornings
A generated colour field
Low tide
A generated colour field
Long grass
<div class="mk-rail mk-rail--per-3" data-rail>
  <div class="mk-rail__track" data-rail-track tabindex="0" role="group" aria-label="Captioned work">
    <figure class="mk-rail__item mb-0">
      <img src="/assets/img/everlasting.jpg" alt="A generated colour field" class="w-100 mk-rounded-md" loading="lazy" decoding="async">
      <figcaption class="mt-2 text-body-secondary" style="font-size:.9375rem">Everlasting</figcaption>
    </figure>
    <figure class="mk-rail__item mb-0">
      <img src="/assets/img/everlasting.jpg" alt="A generated colour field" class="w-100 mk-rounded-md" loading="lazy" decoding="async">
      <figcaption class="mt-2 text-body-secondary" style="font-size:.9375rem">Slow mornings</figcaption>
    </figure>
    <figure class="mk-rail__item mb-0">
      <img src="/assets/img/everlasting.jpg" alt="A generated colour field" class="w-100 mk-rounded-md" loading="lazy" decoding="async">
      <figcaption class="mt-2 text-body-secondary" style="font-size:.9375rem">Low tide</figcaption>
    </figure>
    <figure class="mk-rail__item mb-0">
      <img src="/assets/img/everlasting.jpg" alt="A generated colour field" class="w-100 mk-rounded-md" loading="lazy" decoding="async">
      <figcaption class="mt-2 text-body-secondary" style="font-size:.9375rem">Long grass</figcaption>
    </figure>
  </div>
  <button class="mk-rail__nav mk-rail__nav--prev" type="button" data-rail-prev aria-label="Previous" hidden>
    <i class="bi bi-chevron-left" aria-hidden="true"></i>
  </button>
  <button class="mk-rail__nav mk-rail__nav--next" type="button" data-rail-next aria-label="Next" hidden>
    <i class="bi bi-chevron-right" aria-hidden="true"></i>
  </button>
</div>
label: Captioned work
per_view: 3
items: [4 items]
Fields (5)
FieldTypeNotes
label text Names the scrollable region, e.g. "Recent work" — the same named-or-silent rule the button group follows
per_view number 1–4 at md and up; below that every setting peeks one item plus the edge of the next
arrows boolean Previous/next
class_names text
items repeater
On this page