Card

A casca-extended-layout shell primitive: a bordered surface with optional .casca-card-title / .casca-card-body / .casca-card-footer slots. The card owns the frame; you compose a stat, chart, table, or controls inside it. No JavaScript. Load casca-extended-layout.css alongside casca-core.css, or use the all-in-one casca.css.

Title + body + footer

Monthly revenue

This month $48.2k +12.4%

Composing a chart

Sales by channel

Bare card (just a surface)

A .casca-card with no slots is simply a padded, bordered surface.

Markup

<article class="casca-card">
  <h3 class="casca-card-title">Monthly revenue</h3>
  <div class="casca-card-body">
    <!-- a .casca-stat, a chart, a .casca-table, ... -->
  </div>
  <footer class="casca-card-footer">Updated 5 minutes ago</footer>
</article>