Design system Containers

List

A neutral reading structure for related items: plain, bulleted, icon-led, or structured rows without assuming what the items represent.

.mk-list.mk-list-bulleted.mk-list-icon.mk-list-structured

Overview

A list groups related items in reading order. Its structure says only that the items belong together; the page decides what they represent. Use the lightest variant that makes the items easy to scan, from plain text to structured rows.

  • Option one Supporting information stays with its item. Available
  • Option two The row remains readable without interaction. Included
  • Option three Trailing metadata is optional.

Usage

  • Present related items for sequential scanningUse a list when items share one structure but do not need comparison across named columns. Use a table when column relationships are essential.
  • Keep one hierarchy across siblingsEvery item uses the same content slots and visual weight; supporting text stays subordinate to its title.
  • Choose interaction explicitlyLists are view-only by default. If a complete row navigates or performs an action, compose it with Link or Row action and expose that target clearly.

Anatomy

1 2 3
  • Item title Supporting description for the same item. Metadata
4 5
  1. 1Leading visual. Optional registry icon that identifies the kind of item. It carries meaning and is not decoration.
  2. 2Item title. The shortest complete name of the item, set in the primary reading voice.
  3. 3Trailing metadata. Optional short value aligned for scanning; it is not a hidden control.
  4. 4Description. Optional supporting detail that stays directly beneath the title it explains.
  5. 5Divider. A hairline separates structured rows without turning them into cards.

Variants and states

VariantSpecimenUse
Plain
  • Option one
  • Option two
  • Option three
 Short items whose grouping is already clear from the surrounding heading.
Bulleted
  • First point
  • Second point
  • Third point
 Independent points in prose where each item needs a visible start.
Icon
  • First supported item
  • Second supported item
 When a small registry icon helps distinguish item kinds before reading.
Structured
  • Item titleSupporting description Value
Items with a title plus optional description, icon, or short trailing metadata.

The base list has no hover or selected state because it is not interactive. Apply the documented states of Link, Row action, Checkbox, or Radio button when those components occupy a row.

Responsive

Desktop
  • Option oneDescription stays beside the leading visual. Metadata
  • Option twoRows share one readable rhythm. Metadata
Mobile
  • Option oneDescriptions wrap under the title. Metadata follows the copy
  • Option twoNo horizontal scrolling.
  • Desktop keeps three tracksLeading visual, copy, and short metadata remain aligned for comparison.
  • Mobile stacks metadataThe trailing value moves beneath the copy rather than squeezing the title or creating horizontal scroll.

Do and don't

Structure

  • One itemOne description
  • Another itemThe same hierarchy
Do

Keep one content hierarchy and one row rhythm across the collection.

  • Option
  • A second item styled as a card
  • Another item
Don't

Mix unrelated row treatments or imply hidden actions with hover-only styling.

Icons

  • Message item
  • Route item
Do

Use a registry icon when its shape distinguishes the kind of item before reading.

  • Status: Complete
  • Status: Available
Don't

Do not repeat one decorative icon beside labels that already state the same category.

Interaction

Do

Use an explicit Link or Row action when an item navigates or performs an action.

  • Option oneA hidden whole-row target.
Don't

Do not imply a clickable row with cursor or hover styling when no visible control owns the target.

Copy

  • Parallel item namesUse the same grammatical form across peer items.
  • Descriptions add informationDo not repeat the title in longer words.
  • Neutral examplesComponent documentation names options and items; product screens provide domain-specific content.

Accessibility

  • Use list semanticsUse ul when order does not matter and ol when sequence is meaningful.
  • Decorative icons stay silentIf the title already names the item, set its icon to aria-hidden="true".
  • Controls remain controlsLinks and buttons inside rows keep their native names, focus order, and visible focus treatment.

When to reach for something else

  • Column comparison, sorting, or many recordsUse Table.
  • The complete row navigatesUse Row action or an explicit Link.
  • The user chooses itemsUse Checkbox for several answers or Radio button for exactly one.

Markup

<ul class="mk-list mk-list-structured">
  <li>
    <span class="mk-list-leading">…</span>
    <span class="mk-list-copy">
      <span class="mk-list-title">Item title</span>
      <span class="mk-list-description">Supporting description</span>
    </span>
    <span class="mk-list-trailing">Metadata</span>
  </li>
</ul>