Design system Containers

Card

A record as a tile — the table's mobile form and the itinerary tiles. When it navigates, the whole card is the target.

.mk-card.mk-stretched-link

Overview

The workspace holds many kinds of card — the itinerary tile, the table's phone row, a property in a picker — and they are one component wearing one dress. This page documents what makes a card a card: the shared laws every record tile obeys, whatever facts it composes inside.

Item name Status

Usage

  • Summarise one record or objectA card groups identity, supporting facts, status, and optional tools into one scannable surface.
  • Use one primary destinationWhen the card opens one destination, a stretched link may make the complete surface the target. Any nested controls keep separate targets above it.
  • Preserve table meaning on small screensBelow 768px a dense table may transform each row into a card without changing the row's reading order or omitting essential data.

What makes a card a card

  • The card dressSurface white, the hairline-mid frame, card radius, the low shadow — one dress for every record kind, so tiles of different records still read as one family.
  • The hover answers for the doorA navigating card darkens one step under the pointer — the whole tile saying it will open. A card that does not navigate never wears the hover.
  • Tools ride above the doorA kebab menu, one small act like copying the record's link — they sit in row one's right seat, above the stretched target, each with its own press. Tools never duplicate the door.
  • The reading order is fixedIdentity first, the record's compressed facts under it, the operational tail last with the owner at the far end — the same order the table row keeps, so nothing is re-learned between forms.

Anatomy

1 2 3
Item name Status
Supporting facts of the record
MetadataOwner
4 5
  1. 1Record link. The record's name is the one object link. When the complete card opens the same record, .mk-stretched-link extends this link across the card without adding a second target.
  2. 2Status. A compact status label answers the record's current lifecycle without becoming part of the navigation target.
  3. 3Secondary action. A kebab menu or one small act sits above the stretched link and keeps its own name, press and focus stop.
  4. 4Supporting facts. The small set of facts needed to recognise and compare the record. They follow the identity in reading order.
  5. 5Operational tail. Metadata follows on the last row; ownership takes the far edge so repeated cards scan in one column.

Variants and states

The main wearings

Three compositions cover most of the workspace. Each is this one component — same dress, same door, same order — composing different facts.

A record in its list
Item name Status
Supporting facts of the record
MetaOwner
With its tools
Item name
Supporting facts of the record

Whole-card target

.mk-stretched-link is a Card behavior modifier, not a kind of Link. Apply it to the named object link inside a positioned card when the whole card opens that same record. The card supplies the bounds; sibling tools stay above the target with their own press.

States

The specimens are held still for comparison: they contain no live links or controls. A real navigating card gets the same states from its stretched object link.

StateSpecimenWhat changes
Rest
Item name
 The card dress: surface, hairline-mid frame, card radius, low shadow.
Hover
Item name
 The complete tile lifts with the pop shadow and its named object link takes the accent hover. A view-only card never wears this state.
Keyboard focus
Item name
 Tab still lands on the named object link, but the camel ring surrounds the complete card and the object link takes the same accent as hover. Tools keep their own later focus stops.

Do and don't

Item name Status
Supporting facts
Do

One door: the name, stretched over the record.

Item name
Supporting facts
Don't

The duplicate "Open" — two doors to one room, and the card itself goes dead.

Copy

  • Row one is identityThe record's own name, verbatim; names wrap and never truncate.
  • The tail compresses with commasFacts join as a sentence, never with the banned dot glue.

Accessibility

  • One tab stop for the doorThe stretched name is the link; the card adds no second interactive shell.
  • Tools stay reachableThe kebab and any small act keep their own z-order above the stretch and their own tab stops — the door never swallows them.
  • Reading order is the row'sIdentity, facts, tail — same as the table it came from.

When to reach for something else

  • Many records at onceUse Table — the card is what each row becomes below 768px.
  • A zone of workUse Widget.

Markup

<div class="mk-card" style="position:relative">
  <div class="row1">
    <a class="mk-object-link mk-stretched-link" href="…">
      Item name<svg class="mk-object-link-mark" data-mk-icon="open" aria-hidden="true"></svg>
    </a>
    <span class="mk-badge sz-s">…</span>
  </div>
  <div class="row2">Supporting facts of the record</div>
  <div class="row3"><span>Meta</span><span class="owner">Owner</span></div>
</div>

<!-- with tools: each press its own, riding above the stretched door -->
<div class="mk-card" style="position:relative">
  <div class="row1">
    <a class="mk-object-link mk-stretched-link" href="…">
      Item name<svg class="mk-object-link-mark" data-mk-icon="open" aria-hidden="true"></svg>
    </a>
    <span style="position:relative">
      <button class="mk-icon-btn mk-icon-btn-s" type="button"
              aria-label="Copy the item's link">
        <svg data-mk-icon="copy" aria-hidden="true"></svg>
      </button>
      <button class="mk-icon-btn mk-icon-btn-s" type="button" aria-haspopup="menu"
              aria-expanded="false" aria-label="Item tools">
        <svg data-mk-icon="more" aria-hidden="true"></svg>
      </button>
    </span>
  </div>
</div>