Card

Surface container with optional title, action, and footer.

Introduction

Cards are surface containers for grouping related information—product summaries, settings panels, or dialog content. They can stand alone on a page or be composed inside a Modal for structured dialogs with title, body, and footer actions.

Bridge UI Card exposes slots for the header (title, action), default body content, and an optional footer separated by a divider.

Import

import { Card } from "@bridge-ui/vue/Components/Card";

import { Card } from "@bridge-ui/react/Components/Card";

Basic usage

Provide a title for the header and use children (or the default slot in Vue) for the body content.

Variants

Set the visual style with the variant prop. Available variants: elevated (default), outlined, flat, tonal, plain, and text. Shadow is only applied when variant is elevated.

Padding

Control internal spacing with the padding prop: none, small, medium (default), or large.

Rounded

Use the rounded prop to control border radius. Available values: none, xs, sm, md, lg, xl, 2xl, 3xl, 4xl, and full (defaults vary by component).

Action slot

Add header controls with the action slot. In React, use slots.action; in Vue, use the #action slot.

Footer slot

The footer slot renders below the body, separated by a divider (unless borderless is set). Use it for secondary actions such as Cancel and Confirm buttons.

Customization

Fine-tune appearance with padding, rounded, shadow, borderless, and the classes prop to target individual parts (root, header, title, body, footer).

Related components

Modal, List

Accessibility

Card is a presentational container and does not set ARIA roles by default. When the card heading summarizes the content, use the title prop or #title slot so the heading is rendered as a semantic heading element.

If the card contains interactive controls, keep a logical heading order and ensure buttons or links inside the card have accessible names.

Anatomy

The Card component is composed of a root surface with optional header, body, and footer regions:

<div> <!-- root -->
  <header> <!-- header -->
    <h3> <!-- title -->
    <div> <!-- action slot -->
  </header>
  <div> <!-- body (default slot / children) -->
  <footer> <!-- footer slot -->
</div>

Target each part with the classes prop: root, header, title, body, and footer.

API