Mark · Patterns

Page showcase

A titled set of links to whole pages, each with an optional badge. Built for a gallery of examples or templates — the "here is what exists" band, where the thing being linked to is a page rather than an article.

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 ↗

A category of pages, each badged with who it is for.

Creative

Portfolios where the work leads — painters, photographers, makers.

Portfolio — Editorial

Painter

Portfolio — Blog

Photographer

Art Gallery

Contemporary 
<section class="mk-section">
  <div class="mk-container">
    <div class="mk-title-block">
      <h2 class="mb-2">Creative</h2>
      <p class="lead text-body-secondary mb-0">Portfolios where the work leads — painters, photographers, makers.</p>
    </div>
    <div class="mk-row mk-row--2up">
      <a class="page-card mk-lift mk-shadow mk-highlight" href="#">
        <div class="page-card__thumb">
          <span class="page-card__frame-bar">
            <i></i>
            <i></i>
            <i></i>
          </span>
          <span class="page-card__placeholder">
            <i class="bi bi-window"></i>
          </span>
        </div>
        <div class="page-card__body">
          <h3 class="page-card__title">Portfolio — Editorial</h3>
          <span class="badge badge-primary">Painter</span>
          <i class="bi bi-chevron-right page-card__chevron"></i>
        </div>
      </a>
      <a class="page-card mk-lift mk-shadow mk-highlight" href="#">
        <div class="page-card__thumb">
          <span class="page-card__frame-bar">
            <i></i>
            <i></i>
            <i></i>
          </span>
          <span class="page-card__placeholder">
            <i class="bi bi-window"></i>
          </span>
        </div>
        <div class="page-card__body">
          <h3 class="page-card__title">Portfolio — Blog</h3>
          <span class="badge badge-primary">Photographer</span>
          <i class="bi bi-chevron-right page-card__chevron"></i>
        </div>
      </a>
      <a class="page-card mk-lift mk-shadow mk-highlight" href="#">
        <div class="page-card__thumb">
          <span class="page-card__frame-bar">
            <i></i>
            <i></i>
            <i></i>
          </span>
          <span class="page-card__placeholder">
            <i class="bi bi-window"></i>
          </span>
        </div>
        <div class="page-card__body">
          <h3 class="page-card__title">Art Gallery</h3>
          <span class="badge badge-primary">Contemporary</span>
          <i class="bi bi-chevron-right page-card__chevron"></i>
        </div>
      </a>
    </div>
  </div>
</section>
title: Creative
intro: Portfolios where the work leads — painters, photographers, makers.
pages: [3 items]

On a tone, with one still to come

Full page preview ↗

soon marks a page that is planned — it renders as a card but not as a link, so the set can be honest about what is not built yet.

Higher Ed

A lot to organize, made clear — colleges, schools, and programs.

Riverside College

Education

Department microsite

Education 
<section class="mk-section surface-muted">
  <div class="mk-container">
    <div class="mk-title-block">
      <h2 class="mb-2">Higher Ed</h2>
      <p class="lead text-body-secondary mb-0">A lot to organize, made clear — colleges, schools, and programs.</p>
    </div>
    <div class="mk-row mk-row--2up">
      <a class="page-card mk-lift mk-shadow mk-highlight" href="#">
        <div class="page-card__thumb">
          <span class="page-card__frame-bar">
            <i></i>
            <i></i>
            <i></i>
          </span>
          <span class="page-card__placeholder">
            <i class="bi bi-window"></i>
          </span>
        </div>
        <div class="page-card__body">
          <h3 class="page-card__title">Riverside College</h3>
          <span class="badge badge-primary">Education</span>
          <i class="bi bi-chevron-right page-card__chevron"></i>
        </div>
      </a>
      <a class="page-card mk-lift mk-shadow mk-highlight is-soon" href="#">
        <div class="page-card__thumb">
          <span class="page-card__frame-bar">
            <i></i>
            <i></i>
            <i></i>
          </span>
          <span class="page-card__placeholder">
            <i class="bi bi-window"></i>
          </span>
        </div>
        <div class="page-card__body">
          <h3 class="page-card__title">Department microsite</h3>
          <span class="badge badge-primary">Education</span>
          <i class="bi bi-chevron-right page-card__chevron"></i>
        </div>
      </a>
    </div>
  </div>
</section>
surface: muted
title: Higher Ed
intro: A lot to organize, made clear — colleges, schools, and programs.
pages: [2 items]
Fields (8)
FieldTypeNotes
title text required
intro textarea
surface text empty, muted, subtle, primary, or dark
container text
preview boolean Dev only — open each card in the /__preview viewport harness
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.
pages repeater
On this page