Mark · Components

Image card

The plain card — a picture on top, words underneath. Bootstrap's card, adopted rather than replaced, with one addition that matters for a CMS: no image yields the brand placeholder instead of a gap, so an unfilled record still reads as deliberate.

A person

Full page preview ↗

The case it was written for — a roster where the photographs do not exist yet, so each card carries its own initials rather than four copies of one stock face.

Teacher · 8 years

June Osei

Teaches the beginners course and most of the hatha.

<article class="card border-0 h-100 mk-rounded-lg">
  <div class="mk-placeholder card-img-top mk-rounded-top-lg mk-rounded-bottom-none" aria-hidden="true" style="aspect-ratio:1/1">JO</div>
  <div class="card-body">
    <p class="mk-eyebrow text-uppercase fw-semibold mb-2">Teacher · 8 years</p>
    <h3 class="card-title h5 mb-2">June Osei</h3>
    <p class="card-text text-body-secondary mb-0">Teaches the beginners course and most of the hatha.</p>
  </div>
</article>
placeholder: JO
eyebrow: Teacher · 8 years
title: June Osei
body: Teaches the beginners course and most of the hatha.

With a photograph

Full page preview ↗

Small Business

Florist

A shop with hours, a location, and things you can get there.

Open it 

<article class="card border-0 h-100 mk-rounded-lg">
  <img class="card-img-top mk-rounded-top-lg mk-rounded-bottom-none" src="/assets/img/examples/florist/shop.jpg" alt="" loading="lazy" decoding="async" style="aspect-ratio:1/1;object-fit:cover">
  <div class="card-body">
    <p class="mk-eyebrow text-uppercase fw-semibold mb-2">Small Business</p>
    <h3 class="card-title h5 mb-2">
      <a class="stretched-link text-decoration-none text-reset" href="#">Florist</a>
    </h3>
    <p class="card-text text-body-secondary mb-0">A shop with hours, a location, and things you can get there.</p>
    <p class="card-text mt-3 mb-0">
      <span class="mk-btn mk-btn--naked mk-nudge px-0">
        Open it
        <i class="bi bi-arrow-right-short"></i>
      </span>
    </p>
  </div>
</article>
image: /assets/img/examples/florist/shop.jpg
alt: 
eyebrow: Small Business
title: Florist
body: A shop with hours, a location, and things you can get there.
href: #
cta_label: Open it
Fields (11)
FieldTypeNotes
image image
alt text Empty when the picture is decorative and the title already says it
placeholder text Shown when there is no image — initials, a number, a short mark
ratio text CSS aspect-ratio, e.g. 1/1, 4/3, 4/5
radius text none · sm · md · lg · xl — the radius scale. The picture's BOTTOM corners are always square, because they meet the words.
eyebrow text
title text required
body textarea
href url
cta_label text Optional visible affordance; the whole card is already the link
class_names text
On this page