Mark · Components

Media card

A card where the whole card is the link and the image IS the card and the words ride on it, on a scrim that guarantees the contrast whatever the page theme is. Extracted from the card carousel, which is now one of its callers rather than its owner: the card and the swiping are separate ideas, and only one of them was reusable. In a plain row the copy stays visible; inside a carousel the body collapses to a reveal that opens on hover, because there the neighbouring cards need the room.

Default

Full page preview ↗

The image fills the card; the eyebrow and title sit on the scrim with the body under them. A whole card is the link when it has one.

Portfolio

Painter

A working painter: masonry gallery, exhibition list, studio statement.

 
<a class="mk-card" href="#">
  <div class="mk-card__media">
    <img src="/assets/img/everlasting.jpg" alt="" loading="lazy" decoding="async">
  </div>
  <div class="mk-card__body">
    <p class="mk-eyebrow text-uppercase fw-semibold mb-2">Portfolio</p>
    <h3 class="mk-card__title">Painter</h3>
    <div class="mk-card__reveal">
      <div class="mk-card__reveal-inner">
        <p class="mb-0">A working painter: masonry gallery, exhibition list, studio statement.</p>
        <p class="mk-card__cta mb-0">
          <span class="mk-card__cta-text" aria-hidden="true">Open it</span>
        </p>
      </div>
    </div>
  </div>
</a>
image: /assets/img/everlasting.jpg
alt: 
eyebrow: Portfolio
title: Painter
body: A working painter: masonry gallery, exhibition list, studio statement.
href: #
cta_label: Open it

Without an image

Full page preview ↗

No image, so the scrim has nothing to sit over and the card is the scrim. Useful while the photograph is still being taken.

Small Business

Barbershop

A flat-rate price list, opening hours, and a roster of the people who cut the hair.

 
<a class="mk-card" href="#">
  <div class="mk-card__body">
    <p class="mk-eyebrow text-uppercase fw-semibold mb-2">Small Business</p>
    <h3 class="mk-card__title">Barbershop</h3>
    <div class="mk-card__reveal">
      <div class="mk-card__reveal-inner">
        <p class="mb-0">A flat-rate price list, opening hours, and a roster of the people who cut the hair.</p>
      </div>
    </div>
  </div>
</a>
eyebrow: Small Business
title: Barbershop
body: A flat-rate price list, opening hours, and a roster of the people who cut the hair.
href: #

Image, eyebrow, title — the whole card a link

Full page preview ↗

No body and no label, so the reveal is not rendered at all rather than rendered empty. The card is still entirely clickable, which is the point of the anchor being the card rather than something inside it.

Contemporary

Art Gallery
Fields (8)
FieldTypeNotes
image image
alt text Empty when the image is decorative and the title already says it
eyebrow text
title text required
body textarea
href url
cta_label text Optional. The whole card is already the link — this is only a visible affordance, and omitting it leaves the card clean
class_names text
On this page