Import

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

Usage

import {Card, Link} from "@darkcode-ui/react";
import {CircleDollar} from "@gravity-ui/icons";

export function Default() {
  return (

Anatomy

Import the Card component and access all parts using dot notation.

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

export default () => (
  <Card>
    <Card.Header>
      <Card.Title />
      <Card.Description />
    </Card.Header>
    <Card.Content />
    <Card.Footer />
  </Card>
);

Variants

Cards come in semantic variants that describe their prominence level rather than specific visual styles. This allows themes to interpret them differently:

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

export function Variants() {
  return (
    <div className="flex flex-col gap-4">

transparent - Minimal prominence, transparent background (great for nested cards)
default - Standard card for most use cases (surface-secondary)
secondary - Medium prominence to draw moderate attention (surface-tertiary)
tertiary - Higher prominence for important content (surface-tertiary)

Horizontal Layout

import {Button, Card, CloseButton} from "@darkcode-ui/react";

export function Horizontal() {
  return (
    <Card className="w-full items-stretch md:flex-row">

With Avatar

import {Avatar, Card} from "@darkcode-ui/react";

export function WithAvatar() {
  return (
    <div className="flex flex-wrap gap-4">

With Images

import {Avatar, Button, Card, CloseButton, Link} from "@darkcode-ui/react";
import {CircleDollar} from "@gravity-ui/icons";

export function WithImages() {
  return (

With Form

"use client";

import {Button, Card, Form, Input, Label, Link, TextField} from "@darkcode-ui/react";

export function WithForm() {

Accessibility

import { Card } from '@darkcode-ui/react';
import { cardVariants } from '@darkcode-ui/styles';

// Semantic markup
<Card role="article" aria-labelledby="card-title">
  <Card.Header>
    <Card.Title id="card-title">Article Title</Card.Title>
  </Card.Header>
</Card>

// Interactive cards
<a className={cardVariants().base()} href="/details" aria-label="View product details">
  <Card.Title>Product Name</Card.Title>
</a>

Related Components

Surface

Avatar

Form

Styling

Component Customization

<Card className="border-2 border-blue-500 bg-gradient-to-r from-blue-50 to-purple-50">
  <Card.Header>
    <Card.Title className="text-blue-900">Custom Styled Card</Card.Title>
    <Card.Description className="text-blue-700">Custom colors applied</Card.Description>
  </Card.Header>
  <Card.Content>
    <p className="text-blue-800">Content with custom styling</p>
  </Card.Content>
</Card>

CSS Variable Overrides

/* Override specific variants */
.card--secondary {
  @apply bg-gradient-to-br from-blue-50 to-purple-50;
}

/* Custom element styles */
.card__title {
  @apply text-xl font-bold;
}

CSS Classes

Card uses BEM naming for predictable styling, (View source styles):

Base Classes

.card - Base container with padding and border
.card__header - Header section container
.card__title - Title with base font size and weight
.card__description - Muted description text
.card__content - Flexible content container
.card__footer - Footer with row layout

Variant Classes

.card--transparent - Minimal prominence, transparent background (maps to transparent variant)
.card--default - Standard appearance with surface-secondary (default)
.card--secondary - Medium prominence with surface-tertiary (maps to secondary variant)
.card--tertiary - Higher prominence with surface-tertiary (maps to tertiary variant)

API Reference

Card

Prop	Type	Default	Description
`variant`	`"transparent" \| "default" \| "secondary" \| "tertiary"`	`"default"`	Semantic variant indicating prominence level
`className`	`string`	-	Additional CSS classes
`children`	`React.ReactNode`	-	Card content

Card.Header

Prop	Type	Default	Description
`className`	`string`	-	Additional CSS classes
`children`	`React.ReactNode`	-	Header content

Card.Title

Prop	Type	Default	Description
`className`	`string`	-	Additional CSS classes
`children`	`React.ReactNode`	-	Title content (renders as `h3`)

Card.Description

Prop	Type	Default	Description
`className`	`string`	-	Additional CSS classes
`children`	`React.ReactNode`	-	Description content (renders as `p`)

Card.Content

Prop	Type	Default	Description
`className`	`string`	-	Additional CSS classes
`children`	`React.ReactNode`	-	Main content

Card.Footer

Prop	Type	Default	Description
`className`	`string`	-	Additional CSS classes
`children`	`React.ReactNode`	-	Footer content

Card

Related Components

On this page

Related Components