Skip to main content
components

Cards

Flexible containers for organizing content.

Package@g4rcez/componentsSectionDisplay Components

Examples

Basic Cards

Demonstrates a simple Card with a title and content, and a Card used as a link with a loading state.

OK
Content
Loading
tsx
"use client";
import { Card } from "@g4rcez/components";

function BasicCards() {
  return (
    <div className="flex flex-col gap-8 w-full">
      <Card title="Simple Card">Content</Card>
      <Card as="a" title="Card as Link (Loading)" loading>
        Content
      </Card>
    </div>
  );
}

Stats Card

Displays key statistics with an optional loading state.

Users

500

Users

tsx
"use client";
import { StatsCard } from "@g4rcez/components";

function StatsCardDemo() {
  return (
    <div className="flex flex-col gap-8 w-full">
      <StatsCard title="Users" value="500" />
      <StatsCard loading title="Users" value="500" />
    </div>
  );
}

When to use Cards

Use when

You need the documented Cards interaction or presentation in a product workflow.

Avoid when

A native HTML element already provides the Cards behavior you need.

Accessibility

Keep the Cards labeled and use its documented keyboard interaction. The component preserves visible focus and communicates state without relying on color alone.

  • Keep keyboard focus visible and follow the documented key commands.
  • Provide an accessible name and connect descriptions or errors to the control.