Card

Use mr-card as the component root. A direct semantic<header> is styled automatically. Usemr-card__header only when the heading region cannot be authored as a semantic <header>.

Example usage

<article class="mr-card">
  <p>Simple related content.</p>
</article>

<article class="mr-card mr-card--positive">
  <header>Ready</header>
  <p>The operation completed successfully.</p>
</article>

Semantic variants

The stable component stylesheet ships the following color variants. These are presentation choices only; status meaning still needs to be conveyed by text and, where appropriate, semantic/ARIA state rather than color alone.

Elevated surface

mr-card--elevated is a separate neutral elevated treatment. It may be used without mr-card, but combining it with mr-card is clearer when the element is conceptually a Card.