Card

Imports

Use the same component slug for React, Vue, and style token lookup. Do not import components from package roots.

import { Card, CardHeader, CardTitle, CardDescription, CardContent, CardFooter } from "@line/abc-def-react/card";

<script setup lang="ts">
import { Card, CardHeader, CardTitle, CardDescription, CardContent, CardFooter } from "@line/abc-def-vue/card";
</script>

Shadcn references

Compare the corresponding shadcn React and Vue documentation for the same component slug.

Basic usage

import {
  Card,
  CardContent,
  CardDescription,
  CardHeader,
  CardTitle,
} from "@line/abc-def-react/card";

export function Example() {
  return (
    <Card>
      <CardHeader>
        <CardTitle>Project status</CardTitle>
        <CardDescription>Updated just now</CardDescription>
      </CardHeader>
      <CardContent>Ready for review.</CardContent>
    </Card>
  );
}

<script setup lang="ts">
import {
  Card,
  CardContent,
  CardDescription,
  CardHeader,
  CardTitle,
} from "@line/abc-def-vue/card";
</script>

<template>
  <Card>
    <CardHeader>
      <CardTitle>Project status</CardTitle>
      <CardDescription>Updated just now</CardDescription>
    </CardHeader>
    <CardContent>Ready for review.</CardContent>
  </Card>
</template>

Component tokens

Composition exports

Usage notes

• Use cards for repeated items or framed tools.
• Avoid nesting cards inside cards.
• Related component tokens use the `card` token group in `@line/abc-def-styles/css`.