Card

Content container for headings, text, links, and actions.

Browsers: Chrome 123+Firefox 121+Safari 17.5+
Tier: 0
Bundle compressed: 164 B
Forced layout budget: 0 ms
Axe budget: 0
SSR compatible: Yes
Published contract: Test harness

Playground

Card

React

CSS

Tailwind

import { Card } from "@gunkin/uiify";

export default function Example() {
  return (
    <Card as="article" className="">
      <h2>Release notes</h2>
      <p>A short summary of the latest product changes.</p>
      <a href="#release-notes">Read the release notes</a>
    </Card>
  );
}

@layer components {
  [data-uiify-card] {
    border: var(--border-width) solid var(--border);
    border-radius: var(--radius-lg);
    background: var(--card);
    color: var(--card-foreground);
    padding-block: 1rem;
    padding-inline: 1rem;
  }
}

import { Card } from "@gunkin/uiify";

export default function Example() {
  return (
    <Card
      as="article"
      className="
        grid gap-md w-max max-w-[min(28rem,calc(100vw_-_2_*_var(--space-lg)))] p-6 border border-border rounded-xl
        [corner-shape:squircle] bg-card text-card-foreground shadow-popover [&[popover]:not(:popover-open)]:hidden
        motion-safe:[&[popover]]:[transition:var(--transition-presence)]
        motion-safe:[&[popover]:not(:popover-open)]:opacity-0
        motion-safe:[&[popover]:not(:popover-open)]:[scale:var(--presence-scale)]
        motion-safe:starting:[&[popover]:popover-open]:opacity-0
        motion-safe:starting:[&[popover]:popover-open]:[scale:var(--presence-scale)]
      "
    >
      <h2>Release notes</h2>
      <p>A short summary of the latest product changes.</p>
      <a href="#release-notes">Read the release notes</a>
    </Card>
  );
}

/* app.css */

@layer reset, ui, app, tokens, base, demo, components, utilities, theme;

@import "@gunkin/uiify/styles/reset";

@import "@gunkin/uiify/components/behavior.css";

@import "@gunkin/uiify/styles/tokens";

@import "@gunkin/uiify/styles/tailwind";

@import "tailwindcss/utilities.css";

@theme { --spacing: 0.25rem; --font-weight-normal: 400; --font-weight-medium: 500; --font-weight-semibold: 600; --font-weight-bold: 700; }

@source inline('grid gap-md w-max max-w-[min(28rem,calc(100vw_-_2_*_var(--space-lg)))] p-6 border border-border rounded-xl [corner-shape:squircle] bg-card text-card-foreground shadow-popover [&[popover]:not(:popover-open)]:hidden motion-safe:[&[popover]]:[transition:var(--transition-presence)] motion-safe:[&[popover]:not(:popover-open)]:opacity-0 motion-safe:[&[popover]:not(:popover-open)]:[scale:var(--presence-scale)] motion-safe:starting:[&[popover]:popover-open]:opacity-0 motion-safe:starting:[&[popover]:popover-open]:[scale:var(--presence-scale)]');

@layer base { :root { --uiify-control-text: var(--text-sm); } @media (pointer: coarse) { :root { --uiify-control-text: var(--text-base); } } }

/* Authored animation and registered properties used by the Tailwind skin.
 * Visual rules belong in utility recipes; only at-rule definitions live here. */
@layer components {
  @keyframes uiify-presence-in {
    from {
      opacity: 0;
      scale: var(--presence-scale);
    }
  }
}

@layer components {
  @keyframes uiify-presence-out {
    to {
      opacity: 0;
      scale: var(--presence-scale);
    }
  }
}

@property --uiify-spinner-tail {
  syntax: "<angle>";
  inherits: false;
  initial-value: 0deg;
}

@property --uiify-spinner-length {
  syntax: "<angle>";
  inherits: false;
  initial-value: 36deg;
}

@layer components {
  @keyframes uiify-spinner-rotate {
    to {
      transform: rotate(360deg);
    }
  }
}

@layer components {
  @keyframes uiify-spinner-orbit {
    0% {
      --uiify-spinner-tail: 0deg;
      --uiify-spinner-length: 36deg;
    }

    50% {
      --uiify-spinner-tail: 90deg;
      --uiify-spinner-length: 324deg;
    }

    100% {
      --uiify-spinner-tail: 360deg;
      --uiify-spinner-length: 36deg;
    }
  }
}

@layer components {
  @keyframes uiify-skeleton-pulse {
    50% {
      opacity: 0.45;
    }
  }
}

@layer components {
  @keyframes uiify-skeleton-shimmer {
    to {
      background-position: -200% 0;
    }
  }
}

@layer components {
  @keyframes uiify-skeleton-reveal {
    from {
      opacity: 0;
    }
    to {
      opacity: 1;
    }
  }
}

@property --candle-body-height {
  syntax: "<percentage>";
  inherits: true;
  initial-value: 0%;
}

@property --candle-body-top {
  syntax: "<percentage>";
  inherits: true;
  initial-value: 50%;
}

@property --candle-slot {
  syntax: "<percentage>";
  inherits: true;
  initial-value: 100%;
}

@property --candle-wick-height {
  syntax: "<percentage>";
  inherits: true;
  initial-value: 0%;
}

@property --candle-wick-top {
  syntax: "<percentage>";
  inherits: true;
  initial-value: 50%;
}

@property --candle-x {
  syntax: "<percentage>";
  inherits: true;
  initial-value: 0%;
}

@property --candle-scale {
  syntax: "<number>";
  inherits: true;
  initial-value: 1;
}

@property --line-y {
  syntax: "<percentage>";
  inherits: true;
  initial-value: 50%;
}

@property --line-prev-y {
  syntax: "<percentage>";
  inherits: true;
  initial-value: 50%;
}

@property --line-count {
  syntax: "<integer>";
  inherits: false;
  initial-value: 1;
}

@property --line-scale {
  syntax: "<number>";
  inherits: true;
  initial-value: 1;
}

@layer components {
  @keyframes uiify-otp-input-caret-blink {
    50% {
      opacity: 0;
    }
  }
}

Examples

Independent links

Choose a semantic root and keep each link independently interactive.

import { Card } from "@gunkin/uiify";

export default function Example() {
  return (
    <Card as="article">
      <h2>Project resources</h2>
      <p>Choose a resource to continue.</p>
      <a href="#overview">Overview</a>
      <a href="#settings">Settings</a>
    </Card>
  );
}

API

`Card`

Prop	Type	Default	Description
`children`	`ReactNode`	—	Content of the part.
`as`	`ElementType`	`"div"`	Native element or component used for the root.
`className`	`string`	—	Class applied to the root element.
`style`	`CSSProperties`	—	Native root styles.
`ref`	`Ref<HTMLElement>`	—	Ref forwarded to the rendered root element.
`render`	`ReactElement \| ((props, state) => ReactElement)`	—	Replace the rendered element while keeping behavior and accessibility wiring.

Keyboard

Key	Action

Accessibility

Groups related content without adding a role, focus target, or click behavior. Choose a semantic element such as article when the content warrants it; keep links and actions independent.

Styling hooks

data-uiify-card

Framework

Style

Theme

Language

Card

Playground

Card

Release notes

Examples

Independent links

Project resources

API

`Card`

Keyboard

Accessibility

Styling hooks