Card

Flexible content containers.

Basic card

A card is a bordered, shadowed container with optional header, body, and footer sections.

Card title

Some quick example text to build on the card body and make up the bulk of the card's content.

<div class="na-card">
  <div class="na-card-body">
    <h5 class="na-card-title">Card title</h5>
    <p class="na-card-text">Card content.</p>
    <a href="#" class="na-button na-button-primary na-button-s">Go somewhere</a>
  </div>
</div>

Header / body / footer

Card with sections

Subtitle text

Body content lives here.

<div class="na-card">
  <div class="na-card-header">Featured</div>
  <div class="na-card-body">
    <h5 class="na-card-title">Title</h5>
    <p class="na-card-text">Body.</p>
  </div>
  <div class="na-card-footer">
    <button class="na-button na-button-primary na-button-s">Confirm</button>
  </div>
</div>

Colour-border variants

Primary

Success

Danger

<div class="na-card na-card-bordered na-card-primary">...</div>
<div class="na-card na-card-bordered na-card-success">...</div>
<div class="na-card na-card-bordered na-card-danger">...</div>

Interactive (hover lift)

Hover me

This card lifts on hover.

<a href="/detail" class="na-card na-card-interactive">
  <div class="na-card-body">...</div>
</a>

Dark card

Works great on dark backgrounds.

<div class="na-card na-card-dark">
  <div class="na-card-body">...</div>
</div>

Class reference

Class	Description
`na-card`	Base card container
`na-card-image / header / body / footer`	Section slots
`na-card-title / subtitle / text`	Typography helpers
`na-card-flat`	No shadow
`na-card-raised`	Larger shadow
`na-card-bordered`	2px border
`na-card-primary / success / warning / danger / info`	Border colour (use with --bordered)
`na-card-interactive`	Hover lift animation
`na-card-dark`	Dark surface
`na-card-horizontal`	Image + content side by side
`na-card-compact`	Reduced inner padding