Hacktron Design System

Card

A bordered container for a self-contained block of content.

Account
Current periodAug 1 - Aug 31
<template>
  <Card>
    <div class="flex flex-col gap-3">Content</div>
  </Card>
</template>

Props

Name Type Default

Slots

Name Description
headerOptional title/action row, visually separated from the body by padding, not a divider line.
defaultBody content. Any internal layout/gap (e.g. `flex flex-col gap-3`) is the caller's own wrapper div inside this slot.
footerOptional action row at the bottom of the card.

Usage