Logo

Card

Composable content surfaces with header, content, footer, actions, media, sizing, and spacing tokens.

Preview

Login to your account

Enter your email below to login to your account

Usage

TS 

import { FrBadgeModule } from '@frame-ui-ng/components/badge';
import { FrButtonModule } from '@frame-ui-ng/components/button';
import { FrCardModule } from '@frame-ui-ng/components/card';
import { FrInputModule } from '@frame-ui-ng/components/input';

HTML 

<section frCard>
  <header frCardHeader>
    <h3 frCardTitle>Card Title</h3>
    <p frCardDescription>Card Description</p>
    <button frCardAction type="button">Action</button>
  </header>
  <div frCardContent>
    <input frInput type="email" />
  </div>
  <footer frCardFooter>Card Footer</footer>
</section>

Examples

Basic

Displays a card with header, content, and footer sections.

Login to your account

Enter your email below to login to your account

Composition

Use the card parts together when the card needs title, description, action, body, and footer areas.

Login to your account

Enter your email below to login to your account

Size

Use size="sm" for a more compact card with smaller shared spacing.

Small Card

This card uses the compact size variant.

The small size reduces the shared spacing token for denser layouts.

Spacing

Use the spacing input for standard card density. The supported values are "sm", "md", "lg", and "xl", mapping to 12px, 16px, 20px, and 32px.

Card

The selected spacing is applied through the card spacing input.

Custom spacing

When the standard spacing options are not enough, omit the spacing input and override --frame-card-spacing locally.

Login to your account

Enter your email below to login to your account

Image

Add an image before the card header to create a media card.

Abstract event cover
Featured

FrameUIs meetup

A practical talk on component APIs, accessibility, and shipping faster.

RTL support

Cards use logical properties, so header action placement, spacing, and media radii adapt in RTL layouts.

تسجيل الدخول إلى حسابك

أدخل بريدك الإلكتروني أدناه لتسجيل الدخول إلى حسابك

Custom Styling

Override card tokens locally to tune spacing, radius, surface, shadow, or footer treatment without changing the markup.

Login to your account

Enter your email below to login to your account

Token Inspector

Inspect the card shell, header, title, description, action, content, and footer tokens.

Login to your account

Enter your email below to login to your account

Design Tokens

Use these CSS custom properties to tune card surface, spacing, typography, footer separation, and compact sizing.

SCSS 


  --frame-card-bg: var(--frame-surface);
  --frame-card-color: var(--frame-surface-foreground);
  --frame-card-border: var(--frame-border);
  --frame-card-radius: var(--frame-radius-xl);
  --frame-card-shadow: 0 1px 2px rgb(0 0 0 / 0.04);
  --frame-card-font-size: 0.875rem;
  --frame-card-title-color: var(--frame-foreground);
  --frame-card-title-font-size: 1rem;
  --frame-card-title-font-weight: 600;
  --frame-card-description-color: var(--frame-muted-foreground);
  --frame-card-footer-bg: color-mix(in srgb, var(--frame-muted) 48%, transparent);
  --frame-card-footer-border: var(--frame-border);