Card — modest-ui

Card .mdst-card

Structure

Class	Example
.mdst-card	A simple card with body content only.
.mdst-card-header .mdst-card-body .mdst-card-footer	Card Title Card body content goes here. Use this for any grouped information.

Variants

Class	Example
.mdst-card--borderless	Borderless No outer border. Inner dividers remain.
.mdst-card--interactive	Hover over this card to see the interactive state.
.mdst-card--compact	Compact Smaller padding for tighter layouts.
.mdst-card--flush	Flush body Body has no padding — ideal for embedding tables or images edge-to-edge.
.mdst-card-header--borderless	Borderless Header Header without a bottom border — useful for pricing cards or hero sections.
.mdst-card-footer--borderless	Footer without a top border — useful for tags or metadata. No divider above

Examples

Notifications

You have 3 unread messages. Review them before they expire.

Last updated 5 minutes ago

Status

All systems operational

Usage

<!-- Basic card -->
<div class="mdst-card">
  <div class="mdst-card-body">Content</div>
</div>

<!-- With header, body, and footer -->
<div class="mdst-card">
  <div class="mdst-card-header">Title</div>
  <div class="mdst-card-body">Content goes here.</div>
  <div class="mdst-card-footer">
    <button class="mdst-button mdst-button--sm">Action</button>
  </div>
</div>

<!-- Interactive (hover state) -->
<div class="mdst-card mdst-card--interactive">
  <div class="mdst-card-body">Clickable card</div>
</div>

<!-- Compact padding -->
<div class="mdst-card mdst-card--compact">
  <div class="mdst-card-body">Tight content</div>
</div>

<!-- Flush body (no body padding, for tables/images) -->
<div class="mdst-card mdst-card--flush">
  <div class="mdst-card-header">Table card</div>
  <div class="mdst-card-body">
    <table class="mdst-table">...</table>
  </div>
</div>

<!-- Borderless header (no bottom border) -->
<div class="mdst-card">
  <div class="mdst-card-header mdst-card-header--borderless">Title</div>
  <div class="mdst-card-body">Content</div>
</div>

<!-- Borderless footer (no top border) -->
<div class="mdst-card">
  <div class="mdst-card-body">Content</div>
  <div class="mdst-card-footer mdst-card-footer--borderless">
    Tags or metadata here
  </div>
</div>