Card

Cards are surface containers. Compose them with .nf-card-header, .nf-card-body, and .nf-card-footer.

Base

BASE CARD

NODE_STATUS

All systems nominal. Connection stable.

<div class="nf-card" style="max-width: 20rem;">
<div class="nf-card-header">
  <span class="nf-card-title">NODE_STATUS</span>
</div>
<div class="nf-card-body">
  All systems nominal. Connection stable.
</div>
<div class="nf-card-footer">
  <button class="nf-button nf-button-ghost nf-button-sm">DETAILS</button>
</div>
</div>

Elevated

ELEVATED

Elevated surface with green offset shadow.

<div class="nf-card nf-card-elevated" style="max-width: 20rem;">
<div class="nf-card-body">Elevated surface with green offset shadow.</div>
</div>

Variants

PRIMARY / SECONDARY

Primary left border

Secondary top border

<div class="nf-card nf-card-primary" style="max-width: 14rem;">
<div class="nf-card-body">Primary left border</div>
</div>
<div class="nf-card nf-card-secondary" style="max-width: 14rem;">
<div class="nf-card-body">Secondary top border</div>
</div>