Card

Card container plus all card sub-components for structured content blocks.

Bulma Pattern

This wrapper follows Bulma's Components markup. Compare class behavior with the official Bulma docs.

Supported tags

Example

<card>
  <card-header>
    <card-header-title>Server status</card-header-title>
    <card-header-icon ariaLabel="more options">
      <span class="icon"><i class="fas fa-angle-down"></i></span>
    </card-header-icon>
  </card-header>
  <card-content>
    <content><p>All systems operational.</p></content>
  </card-content>
  <card-footer>
    <card-footer-item href="/details">Details</card-footer-item>
    <card-footer-item>Dismiss</card-footer-item>
  </card-footer>
</card>

Usage Notes

Includes every major Bulma card section as standalone tags.
`<card-footer-item>` supports safe link rendering.
Compose image, header, content, and footer without extra wrappers.

Back to Components

Maintained by aldi

The source code is licensed under MIT.

Available on GitHub and npm.