Components
Card
A vessel: round, resting at the first elevation, one hairline for its edge. Root, Header, Title, Description, Content, Footer — sections carry their own whitespace, so any subset composes.
#Basic usage
The four treasures
Brush, ink, paper, and the inkstone.
A vessel rests at the first elevation, round where a control is square-cut. Sections compose in any subset.
<script setup lang="ts">
import { Card } from "@bysages/vue";
</script>
<template>
<Card.Root class="w-104">
<Card.Header>
<Card.Title>The four treasures</Card.Title>
<Card.Description>Brush, ink, paper, and the inkstone.</Card.Description>
</Card.Header>
<Card.Content>
<p>
A vessel rests at the first elevation, round where a control is square-cut. Sections compose
in any subset.
</p>
</Card.Content>
<Card.Footer class="flex gap-2 justify-end"> Updated this morning </Card.Footer>
</Card.Root>
</template>
#Props
#CardRoot
A styled part — no props of its own; it takes the anatomy's shared styling.
#CardHeader
A styled part — no props of its own; it takes the anatomy's shared styling.
#CardTitle
A styled part — no props of its own; it takes the anatomy's shared styling.
#CardDescription
A styled part — no props of its own; it takes the anatomy's shared styling.
#CardContent
A styled part — no props of its own; it takes the anatomy's shared styling.
#CardFooter
A styled part — no props of its own; it takes the anatomy's shared styling.