Card

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

<Card href="#" titleLevel={3} />;

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

<Card isSelected />;

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

<Card isDisabled href="#" />;

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

function MediaPlaceholder() {
  return (
    <div aria-hidden="true" className="flex size-full items-center justify-center">
      <div className="size-[5.625rem] rounded-full bg-brand-subtle-hover" />
    </div>
  );
}

<Card media={<MediaPlaceholder />} href="#" />;

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

export function OptionalParts() {
  return (
    <div className="flex flex-col gap-3">
      <Card title="Title only" />
      <Card title="Title and body" body="Family cover up to Rs 1.5M." />
      <Card title="With meta" body="Family cover up to Rs 1.5M." meta="Updated 2 Oct" />
      <Card title="With a button action" action={<Button type="button">Download</Button>} />
    </div>
  );
}

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

<Card
  title="Krankenversicherung fuer die ganze Familie einschliesslich Eltern und Schwiegereltern"
  body="Familienschutz bis zu 1,5 Mio. Rs. mit Jubilee Life, einschliesslich Zahnbehandlung, Brillen und Vorsorgeuntersuchungen ab 2026."
  meta="Zuletzt aktualisiert am 2. Oktober 2026 von der Personalabteilung"
  action="Details ansehen"
  href="#"
/>;

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

<Card
  title="التأمين الصحي"
  body="تغطية للعائلة تصل إلى 1.5 مليون روبية مع جوبيلي لايف، وتشمل الوالدين ابتداءً من 2026."
  meta="تم التحديث في 2 أكتوبر"
  action="عرض التفاصيل"
/>;

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

<div className="max-w-56">
  <Card href="#" />
</div>;

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

export function InAGrid() {
  return (
    <div className="grid grid-cols-[repeat(auto-fill,minmax(16rem,1fr))] gap-4">
      <Card {...sample} href="#" titleLevel={3} />
      <Card
        {...sample}
        title="Dental cover"
        body="Checkups and fillings for the whole family."
        href="#"
        titleLevel={3}
      />
      <Card
        {...sample}
        title="Life insurance"
        body="Three times annual salary."
        isSelected
        titleLevel={3}
      />
    </div>
  );
}

import { useState } from "react";
import { Button, Card, Segment, SegmentedControl } from "@nexera-ui/react";

function PlanComparisonDemo() {
  const [billing, setBilling] = useState("monthly");
  const [selected, setSelected] = useState("Studio");
  const plans = [
    {
      name: "Starter",
      price: 12,
      detail: "For your next side project",
      features: "3 projects · Community support",
    },
    {
      name: "Studio",
      price: 29,
      detail: "For a growing creative team",
      features: "Unlimited projects · Priority support",
    },
    {
      name: "Scale",
      price: 79,
      detail: "For teams building together",
      features: "Advanced permissions · Dedicated support",
    },
  ];
  return (
    <div className="w-[52rem] max-w-full flex flex-col gap-5">
      <SegmentedControl
        aria-label="Billing period"
        selectedKeys={[billing]}
        onSelectionChange={(keys) => {
          const value = [...keys][0];
          if (value) setBilling(String(value));
        }}
      >
        <Segment id="monthly" label="Monthly" />
        <Segment id="yearly" label="Yearly · save 20%" />
      </SegmentedControl>
      <div className="grid grid-cols-1 gap-4 md:grid-cols-3">
        {plans.map((plan) => (
          <Card
            key={plan.name}
            title={plan.name}
            titleLevel={3}
            body={plan.detail}
            isSelected={selected === plan.name}
            meta={plan.features}
            action={
              <Button
                variant={selected === plan.name ? "primary" : "secondary"}
                onPress={() => {
                  setSelected(plan.name);
                }}
              >
                {selected === plan.name ? "Selected" : `Choose ${plan.name}`}
              </Button>
            }
          >
            <p className="my-4 text-heading-xl">
              ${billing === "yearly" ? (plan.price * 0.8).toFixed(2) : plan.price}
              <span className="text-body-default"> / month</span>
            </p>
          </Card>
        ))}
      </div>
      <p role="status" className="m-0 text-body-default">
        {selected} selected ·{" "}
        {billing === "yearly" ? "Billed yearly with 20% savings" : "Billed monthly"}.
      </p>
    </div>
  );
}

export function PlanComparison() {
  return <PlanComparisonDemo />;
}