Logo

Component Blueprint

X: 1280 · Y: 720 · Grid: 8px

Card

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

01 Hero Preview

Grid: 8px · Scale: 1:1

Login to your account

Enter your email below to login to your account

02 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>

03 Examples

Basic

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

Component Sheet

Grid: 8px · Scale: 1:1

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.

Component Sheet

Grid: 8px · Scale: 1:1

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.

Component Sheet

Grid: 8px · Scale: 1:1

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.

Component Sheet

Grid: 8px · Scale: 1:1

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.

Component Sheet

Grid: 8px · Scale: 1:1

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.

Component Sheet

Grid: 8px · Scale: 1:1

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.

Component Sheet

Grid: 8px · Scale: 1:1

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

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

04 Custom Styling

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

Component Sheet

Grid: 8px · Scale: 1:1

Login to your account

Enter your email below to login to your account

05 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

06 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-lg);
  --frame-card-shadow: var(--frame-shadow-sm);
  --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);