Card for Vue

A card holds a title, the text under it, and the actions that belong with them.

Use it when one subject should stand on its own, like a login. For repeating rows, such as files or settings, use an Item. In Vue, Ark UI adds no open or close behavior.

Installation

Anatomy

Usage

<script setup lang="ts">
import { Button } from "@/components/ui/button";
import {
  Card, CardAction, CardContent, CardDescription, CardFooter,
  CardHeader, CardTitle,
} from "@/components/ui/card";
import { Field, FieldLabel } from "@/components/ui/field";
import { Input } from "@/components/ui/input";
</script>

<template>
  <Card class="w-full max-w-sm">
    <CardHeader>
      <CardTitle>Login to your account</CardTitle>
      <CardDescription>
        Enter your email below to login to your account
      </CardDescription>
      <CardAction>
        <Button variant="link">Sign Up</Button>
      </CardAction>
    </CardHeader>
    <CardContent>
      <form>
        <div class="flex flex-col gap-6">
          <Field class="gap-2">
            <FieldLabel>Email</FieldLabel>
            <Input placeholder="m@example.com" required type="email" />
          </Field>
          <Field class="gap-2">
            <div class="flex items-center">
              <FieldLabel>Password</FieldLabel>
              <a
                class="ml-auto inline-block text-sm underline-offset-4 hover:underline"
                href="#"
              >
                Forgot your password?
              </a>
            </div>
            <Input required type="password" />
          </Field>
        </div>
      </form>
    </CardContent>
    <CardFooter class="flex-col gap-2">
      <Button class="w-full" type="submit">
        Login
      </Button>
      <Button class="w-full" variant="outline">
        Login with Google
      </Button>
    </CardFooter>
  </Card>
</template>

Accessibility

Demos

Small

size="sm" tightens the padding and the type for a card that is a side note rather than the page, such as this feature pitch with two buttons. Use it in a grid of offers or for a hint on a settings screen, and keep the default size when the card holds a form. A one-off gap, rather than the small preset, is what the spacing demo is for.

Spacing

--card-spacing sets the gaps and the insets for the header, the body, and the footer together. The toggle moves the same login card from 16px to 32px. Turn it up when the default rhythm is too tight for a marketing card, and down when an admin panel feels padded. size="sm" is the preset, and this variable is the manual knob.

Edge To Edge

The terms block uses negative margins from --card-spacing, so the text runs to the card border while the footer keeps its inset. That suits a scrollable agreement, a table, or a map that should not look padded. The image demo is the other full-bleed case, and it only applies when the picture is the first child. Use the margins when the bleed sits lower, above the footer.

Image

An image as the first child drops the top padding and rounds with the card. This cover carries a badge in CardAction and one footer button, the shape of a media tile whose picture is the header. A full-width block should use the negative margin from the edge-to-edge demo, not a pretend first child. Any dimming, like the scrim on this photo, is your own element.

Rtl

dir="rtl" on the card flips the login: the sign-up action stays at the end, and the forgot-password link uses a logical margin so it does not stick to the physical right. Use the attribute when this card is an island of Arabic or Hebrew on a left-to-right page. A whole form should inherit from Direction rather than repeating dir on every surface.

FAQ

API Reference