Card

Overview

Cards group related content into a visually distinct container. They are useful for dashboards, lists, settings pages, pricing tables, blog posts, and other structured content. MiniKit cards provide consistent spacing, borders, and visual hierarchy while remaining flexible enough for many layouts.

Basic Usage

Create a card using the data-card attribute.

<article data-card>
  <h3>Card Title</h3>
  <p>Card content goes here.</p>
</article>

Card Header

Use a header element to provide a title and supporting information.

<article data-card>
  <header>
    <h3>Card Title</h3>
    <p>Optional card description.</p>
  </header>
  <p>Main card content.</p>
</article>

Card Footer

Use a footer element for actions and supplementary content.

<article data-card>
  <h3>Project Overview</h3>
  <p>Card content with footer actions.</p>
  <footer>
    <button>View Details</button>
  </footer>
</article>

Variants

Choose between the default, flat, and outline styles to match the desired level of visual emphasis.

<div class="vstack">
  <article data-card>Default Card</article>
  <article data-card data-style="flat">Flat Card</article>
  <article data-card data-style="outline">Outline Card</article>
</div>

Accessibility

Cards are layout containers and do not introduce additional accessibility behavior. Use semantic HTML elements to provide meaning and structure.

• Use <article> for self-contained content.
• Use headings to establish a clear content hierarchy.
• Place actions inside buttons or links instead of making the entire card clickable.
• Provide descriptive text for interactive controls contained within the card.

API