Card

Displays a card with header, content, and footer.

Enter your email below to login to your account

"use client";
import { Button } from "@smartacteam/ambient-web/button";
import { Card } from "@smartacteam/ambient-web/card";
import { Input } from "@smartacteam/ambient-web/input";
import { Label } from "@smartacteam/ambient-web/label";

export function CardDemo() {
  return (
    <Card.Root className="w-full max-w-sm">
      <Card.Header>
        <Card.Title>Login to your account</Card.Title>
        <Card.Description>
          Enter your email below to login to your account
        </Card.Description>
      </Card.Header>
      <Card.Content>
        <form>
          <div className="flex flex-col gap-6">
            <div className="grid gap-2">
              <Label htmlFor="email">Email</Label>
              <Input.Text
                id="email"
                type="email"
                placeholder="m@example.com"
                required
              />
            </div>
            <div className="grid gap-2">
              <div className="flex items-center">
                <Label htmlFor="password">Password</Label>
                <a
                  href="#"
                  className="ml-auto inline-block text-sm underline-offset-4 hover:underline"
                >
                  Forgot your password?
                </a>
              </div>
              <Input.Text id="password" type="password" required />
            </div>
          </div>
        </form>
      </Card.Content>
      <Card.Footer className="flex-col gap-2">
        <Button type="submit" variant="primary" className="w-full">
          Login
        </Button>
        <Button variant="default" className="w-full">
          Login with Google
        </Button>
      </Card.Footer>
    </Card.Root>
  );
}

Usage

import { Card } from "@smartacteam/ambient-web/card";

<Card.Root>
  <Card.Header>
    <Card.Title>Card Title</Card.Title>
    <Card.Description>Card Description</Card.Description>
    <Card.Action>Card Action</Card.Action>
  </Card.Header>
  <Card.Content>
    <p>Card Content</p>
  </Card.Content>
  <Card.Footer>
    <p>Card Footer</p>
  </Card.Footer>
</Card.Root>

Examples

Brilliance Layer

The brilliance layer is a special card variant designed for AI insights and intelligent recommendations. It features an animated gradient shadow effect using blues and purples from the design system.

Energy Pattern Detected

Your consumption shows a significant improvement

Your energy consumption has decreased by 23% over the past week. This trend is primarily driven by reduced cooling demand during evening hours.

Peak efficiency: 7PM-9PM

Savings opportunity: $47/month

Updated just now

Optimization Recommendation

Smart scheduling could improve your efficiency

Based on your usage patterns, we recommend shifting your HVAC schedule forward by 30 minutes. This could reduce peak demand charges.

Current6:00 AM

→

Recommended5:30 AM

Potential savings: $12/mo

"use client";

import { Card } from "@smartacteam/ambient-web/card";

export function CardBrillianceDemo() {
  return (
    <div className="flex w-full max-w-2xl flex-col items-center gap-8">
      {/* AI Insights Card Example */}
      <Card.Root brilliance className="max-w-md">
        <Card.Header>
          <Card.Title>Energy Pattern Detected</Card.Title>
          <Card.Description>
            Your consumption shows a significant improvement
          </Card.Description>
        </Card.Header>
        <Card.Content>
          <div className="flex flex-col gap-4">
            <p className="font-otto text-sm">
              Your energy consumption has decreased by 23% over the past week.
              This trend is primarily driven by reduced cooling demand during
              evening hours.
            </p>
            <div className="flex flex-col gap-2 text-sm">
              <div className="flex items-center gap-2">
                <div className="h-2 w-2 rounded-full bg-blue-500" />
                <span className="text-fg-secondary">
                  Peak efficiency: 7PM-9PM
                </span>
              </div>
              <div className="flex items-center gap-2">
                <div className="h-2 w-2 rounded-full bg-purple-500" />
                <span className="text-fg-secondary">
                  Savings opportunity: $47/month
                </span>
              </div>
            </div>
          </div>
        </Card.Content>
        <Card.Footer className="text-sm text-foreground-secondary">
          Updated just now
        </Card.Footer>
      </Card.Root>

      {/* Recommendation Card Example */}
      <Card.Root brilliance className="max-w-md">
        <Card.Header>
          <Card.Title>Optimization Recommendation</Card.Title>
          <Card.Description>
            Smart scheduling could improve your efficiency
          </Card.Description>
        </Card.Header>
        <Card.Content>
          <div className="flex flex-col gap-4">
            <p className="font-otto text-sm">
              Based on your usage patterns, we recommend shifting your HVAC
              schedule forward by 30 minutes. This could reduce peak demand
              charges.
            </p>
            <div className="flex gap-3">
              <div className="flex flex-col gap-1 rounded-md border border-stroke-default p-3">
                <span className="text-xs text-foreground-secondary">
                  Current
                </span>
                <span className="font-medium">6:00 AM</span>
              </div>
              <div className="flex items-center text-foreground-secondary">
                →
              </div>
              <div className="flex flex-col gap-1 rounded-md border-2 border-blue-500 bg-blue-50 p-3 dark:bg-blue-950">
                <span className="text-xs text-foreground-secondary">
                  Recommended
                </span>
                <span className="font-medium text-foreground-primary dark:text-foreground-inverse">
                  5:30 AM
                </span>
              </div>
            </div>
          </div>
        </Card.Content>
        <Card.Footer className="flex items-center justify-between gap-2">
          <span className="text-fg-secondary text-sm">
            Potential savings: $12/mo
          </span>
          <button className="rounded-md bg-blue-600 px-3 py-1.5 text-sm font-medium text-white hover:bg-blue-700">
            Apply
          </button>
        </Card.Footer>
      </Card.Root>
    </div>
  );
}

Root API Reference

Prop	Type	Default
`brilliance`	`boolean`	`false`