Card

Cards group related content and actions about a single topic into one surface.

Card title

Cards group related content and actions.

Overview

Cards are flexible container surfaces that display content and actions focused on a single topic or related set of information. They serve as discrete units that organize information into scannable, actionable containers with clear visual hierarchy and consistent styling.

Cards function as versatile building blocks that can contain various types of content while maintaining visual consistency and providing users with predictable interaction patterns across different interface contexts.

Usage

forge-card groups content and actions about one topic through raised and no-padding. When a card needs a header or footer, nest a forge-scaffold inside it with a forge-toolbar in each of the header and footer slots. Use a card to organize related information or preview a record that links to the full one; avoid it when the content inside isn’t actually related, or when scanning and comparing homogeneous data matters more than grouping.

Rules

Keep everything inside a card related to a single topic or record.

Build a card's header and footer from a forge-scaffold with a forge-toolbar in each slot, and set no-padding on the card so the toolbars reach its edges.

Use inverted on the footer toolbar so its divider sits above the actions.

Apply consistent padding and spacing throughout card content.

Group related information logically within card boundaries.

Align content inside a card consistently — centered or left-aligned, not mixed.

Show a hover or focus state on a card that's clickable or draggable, so its interactivity is obvious.

Don't

Don't group unrelated content into the same card.

Don't use a card when scanning and comparing homogeneous data matters more than grouping — a table or list fits better.

Don't mix alignment styles for content within the same card.

Don't hand-build a card header or footer from flex divs — use a scaffold and toolbars.

Basic usage

A card applies consistent padding and shape to its content by default.

A basic card with default padding.

<forge-card>
  Lorem ipsum dolor sit amet consectetur adipisicing elit. Molestias quas sed aliquid cumque sunt iste ad, alias quod adipisci? Nulla, libero necessitatibus enim sint nesciunt provident excepturi dolorum pariatur illum?
</forge-card>

Header, body, and footer

When a card needs a header or footer, nest a forge-scaffold inside it. Put a forge-toolbar in the header slot for the title (text-heading3) and any icon actions, the content in the body slot with p-medium padding, and an inverted forge-toolbar in the footer slot for the actions. Set no-padding on the card so the toolbars run edge to edge. The header and footer stay pinned while the body scrolls. Each part is optional, so a card with only a header uses just the header toolbar.

A card structured with a scaffold, with a toolbar in its header and footer.

<forge-card no-padding class="w-[400px] [--forge-card-height:300px]">
  <forge-scaffold>
    <forge-toolbar slot="header">
      <h3 slot="start" class="text-heading3">
        Lorem ipsum
      </h3>
    </forge-toolbar>
    <div slot="body" tabindex="0" class="text-body2 p-medium">
      Lorem ipsum dolor sit amet consectetur adipisicing elit. Molestias quas sed aliquid cumque sunt iste ad, alias quod adipisci? Nulla, libero necessitatibus
      enim sint nesciunt provident excepturi dolorum pariatur illum? Lorem ipsum dolor sit amet consectetur adipisicing elit. Molestias quas sed aliquid cumque
      sunt iste ad, alias quod adipisci? Nulla, libero necessitatibus enim sint nesciunt provident excepturi dolorum pariatur illum? Lorem ipsum dolor sit amet
      consectetur adipisicing elit. Molestias quas sed aliquid cumque sunt iste ad, alias quod adipisci? Nulla, libero necessitatibus enim sint nesciunt
      provident excepturi dolorum pariatur illum?
    </div>
    <forge-toolbar slot="footer" inverted>
      <div slot="end" class="flex items-center gap-medium">
        <forge-button variant="tonal">
          Cancel
        </forge-button>
        <forge-button variant="filled">
          Save
        </forge-button>
      </div>
    </forge-toolbar>
  </forge-scaffold>
</forge-card>

Raised

Set raised for a stronger shadow that lifts the card above its surroundings.

A raised card sits above its surroundings with a stronger shadow.

<forge-card raised>
  A raised card stands out with a stronger shadow.
</forge-card>

Cards group related content and actions together in a single container.

import "@tylertech/forge/card";

Properties

Property	Attribute	Type	Default	Description
`raised`	—	`boolean`	`false`	Whether the card has elevation or not.
—	`no-padding`	`boolean`	`false`	Removes the default padding from the card.

CSS Parts

Name	Description
`::part(root)`	The root container element.

CSS Custom Properties

Name	Description
`--forge-card-background`	The background color of the card.
`--forge-card-height`	The height of the card.
`--forge-card-width`	The width of the card.
`--forge-card-outline-color`	The outline color of the card.
`--forge-card-outline-width`	The outline width of the card.
`--forge-card-outline-style`	The outline style of the card.
`--forge-card-elevation`	The elevation/shadow of the card.
`--forge-card-padding`	The padding of the card.
`--forge-card-shape`	The shape (border-radius) of the card.
`--forge-card-overflow`	The overflow of the card.
`--forge-card-raised-elevation`	The elevation/shadow of the card when raised.
`--forge-card-raised-outline-width`	The outline width of the card when raised.

Tab order

A card shouldn’t interfere with the page’s natural tab order — it’s a container, not an interactive control, by default.

If a card’s content forms a distinct, related unit that should be announced together, add a role attribute — role="group" is a common choice when the content is related and separate from surrounding items.