Mark · Patterns

Gallery

A masonry wall of works, each rendered by the artwork card. Items need no image: a numbered canvas preset stands in (1–8 painterly, 9–16 photographic), so a gallery can be laid out and reviewed before a single photograph exists.

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 ↗

Three masonry columns of painterly canvases, each with its medium, year and dimensions.

Recent work

Studio, 2024–2026

Oil and gouache, mostly small, mostly painted in one sitting.

Slow mornings Oil on linen · 2026 40 × 30 cm

Harbour light Gouache on paper · 2025 24 × 32 cm

Long grass Oil on board · 2025 50 × 50 cm

Low tide Oil on linen · 2025 30 × 45 cm

Everlasting Gouache on paper · 2024 20 × 20 cm

Second window Oil on board · 2024 35 × 28 cm

<section class="mk-section">
  <div class="mk-container">
    <div class="mk-title-block">
      <p class="mk-eyebrow text-uppercase fw-semibold mb-2">Recent work</p>
      <h2 class="mb-2">Studio, 2024–2026</h2>
      <p class="lead text-body-secondary mb-0">Oil and gouache, mostly small, mostly painted in one sitting.</p>
    </div>
    <div class="mk-masonry mk-masonry--3up">
      <figure class="artwork">
        <span class="artwork__frame">
          <span class="art-canvas art-canvas--3" style="aspect-ratio:3 / 4" aria-hidden="true"></span>
        </span>
        <figcaption class="artwork__caption">
          <span class="artwork__line">
            <span class="artwork__title">Slow mornings</span>
          </span>
          <span class="artwork__meta">Oil on linen · 2026</span>
          <span class="artwork__dims">40 × 30 cm</span>
        </figcaption>
      </figure>
      <figure class="artwork">
        <span class="artwork__frame">
          <span class="art-canvas art-canvas--5" style="aspect-ratio:4 / 3" aria-hidden="true"></span>
        </span>
        <figcaption class="artwork__caption">
          <span class="artwork__line">
            <span class="artwork__title">Harbour light</span>
          </span>
          <span class="artwork__meta">Gouache on paper · 2025</span>
          <span class="artwork__dims">24 × 32 cm</span>
        </figcaption>
      </figure>
      <figure class="artwork">
        <span class="artwork__frame">
          <span class="art-canvas art-canvas--2" style="aspect-ratio:1 / 1" aria-hidden="true"></span>
        </span>
        <figcaption class="artwork__caption">
          <span class="artwork__line">
            <span class="artwork__title">Long grass</span>
          </span>
          <span class="artwork__meta">Oil on board · 2025</span>
          <span class="artwork__dims">50 × 50 cm</span>
        </figcaption>
      </figure>
      <figure class="artwork">
        <span class="artwork__frame">
          <span class="art-canvas art-canvas--7" style="aspect-ratio:2 / 3" aria-hidden="true"></span>
        </span>
        <figcaption class="artwork__caption">
          <span class="artwork__line">
            <span class="artwork__title">Low tide</span>
          </span>
          <span class="artwork__meta">Oil on linen · 2025</span>
          <span class="artwork__dims">30 × 45 cm</span>
        </figcaption>
      </figure>
      <figure class="artwork">
        <span class="artwork__frame">
          <span class="art-canvas art-canvas--4" style="aspect-ratio:1 / 1" aria-hidden="true"></span>
        </span>
        <figcaption class="artwork__caption">
          <span class="artwork__line">
            <span class="artwork__title">Everlasting</span>
          </span>
          <span class="artwork__meta">Gouache on paper · 2024</span>
          <span class="artwork__dims">20 × 20 cm</span>
        </figcaption>
      </figure>
      <figure class="artwork">
        <span class="artwork__frame">
          <span class="art-canvas art-canvas--6" style="aspect-ratio:5 / 4" aria-hidden="true"></span>
        </span>
        <figcaption class="artwork__caption">
          <span class="artwork__line">
            <span class="artwork__title">Second window</span>
          </span>
          <span class="artwork__meta">Oil on board · 2024</span>
          <span class="artwork__dims">35 × 28 cm</span>
        </figcaption>
      </figure>
    </div>
  </div>
</section>

eyebrow: Recent work
title: Studio, 2024–2026
intro: Oil and gouache, mostly small, mostly painted in one sitting.
items: [6 items]

Photographic, two columns, on a dark band

Full page preview ↗

treatment: photo frames every work as a photograph rather than a painting; the presets shift to the photographic range.

Field notes

North shore Digital · 2026

Underpass 35mm · 2026

Six a.m. Digital · 2025

The long way 35mm · 2025

<section class="mk-section surface-dark" data-bs-theme="dark">
  <div class="mk-container">
    <div class="mk-title-block">
      <h2 class="mb-2">Field notes</h2>
    </div>
    <div class="mk-masonry mk-masonry--2up">
      <figure class="artwork">
        <span class="artwork__frame">
          <span class="art-canvas art-canvas--10 art-canvas--photo" style="aspect-ratio:3 / 2" aria-hidden="true"></span>
        </span>
        <figcaption class="artwork__caption">
          <span class="artwork__line">
            <span class="artwork__title">North shore</span>
          </span>
          <span class="artwork__meta">Digital · 2026</span>
        </figcaption>
      </figure>
      <figure class="artwork">
        <span class="artwork__frame">
          <span class="art-canvas art-canvas--13 art-canvas--photo" style="aspect-ratio:2 / 3" aria-hidden="true"></span>
        </span>
        <figcaption class="artwork__caption">
          <span class="artwork__line">
            <span class="artwork__title">Underpass</span>
          </span>
          <span class="artwork__meta">35mm · 2026</span>
        </figcaption>
      </figure>
      <figure class="artwork">
        <span class="artwork__frame">
          <span class="art-canvas art-canvas--11 art-canvas--photo" style="aspect-ratio:3 / 2" aria-hidden="true"></span>
        </span>
        <figcaption class="artwork__caption">
          <span class="artwork__line">
            <span class="artwork__title">Six a.m.</span>
          </span>
          <span class="artwork__meta">Digital · 2025</span>
        </figcaption>
      </figure>
      <figure class="artwork">
        <span class="artwork__frame">
          <span class="art-canvas art-canvas--15 art-canvas--photo" style="aspect-ratio:1 / 1" aria-hidden="true"></span>
        </span>
        <figcaption class="artwork__caption">
          <span class="artwork__line">
            <span class="artwork__title">The long way</span>
          </span>
          <span class="artwork__meta">35mm · 2025</span>
        </figcaption>
      </figure>
    </div>
  </div>
</section>

surface: dark
column_count: 2
treatment: photo
title: Field notes
items: [4 items]

With a real photograph

Full page preview ↗

An image replaces the generated canvas — the same card, the same layout, whichever is supplied.

One real, one stand-in

Awaiting scan Oil on linen · 2026

<section class="mk-section">
  <div class="mk-container">
    <div class="mk-title-block">
      <h2 class="mb-2">One real, one stand-in</h2>
    </div>
    <div class="mk-masonry mk-masonry--2up">
      <figure class="artwork">
        <span class="artwork__frame">
          <img class="art-canvas" src="/assets/img/everlasting.jpg" alt="Everlasting" style="aspect-ratio:3 / 2;object-fit:cover">
        </span>
        <figcaption class="artwork__caption">
          <span class="artwork__line">
            <span class="artwork__title">Everlasting</span>
          </span>
          <span class="artwork__meta">Photograph · 2026</span>
        </figcaption>
      </figure>
      <figure class="artwork">
        <span class="artwork__frame">
          <span class="art-canvas art-canvas--8" style="aspect-ratio:3 / 2" aria-hidden="true"></span>
        </span>
        <figcaption class="artwork__caption">
          <span class="artwork__line">
            <span class="artwork__title">Awaiting scan</span>
          </span>
          <span class="artwork__meta">Oil on linen · 2026</span>
        </figcaption>
      </figure>
    </div>
  </div>
</section>

column_count: 2
title: One real, one stand-in
items: [2 items]

Fields (12)

Field	Type	Notes
`padding`	text	mk-section for the standard band rhythm; or a utility like py-6
`eyebrow`	text
`title`	text
`intro`	textarea
`surface`	text	empty, muted, subtle, primary, or dark
`column_count`	text	masonry columns at large screens (2–4)
`treatment`	text	photo — frame every work as a photograph (items can override)
`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.
`items`	repeater

Gallery

Default

Studio, 2024–2026

Photographic, two columns, on a dark band

Field notes

With a real photograph

One real, one stand-in

On this page