Card

1<script setup lang="ts">2import { Card } from '@vitral/vue';3</script>4 5<template>6    <Card title="Simple card" style="width: 22rem">7        <p style="margin: 0">Cards group related content and actions. They have no role of their own; put a heading in the title slot when the card belongs in the page outline.</p>8    </Card>9</template>

1<script setup lang="ts">2import { Button, Card } from '@vitral/vue';3</script>4 5<template>6    <Card title="Advanced card" subtitle="With a banner and actions" style="width: 22rem">7        <template #header>8            <div style="height: 7rem; background: linear-gradient(135deg, var(--vt-primary-color), var(--vt-chart-2))" />9        </template>10        <p style="margin: 0">The header runs edge to edge and follows the card's corners. The footer lines its actions up at the bottom.</p>11        <template #footer>12            <Button label="Save" />13            <Button label="Cancel" severity="secondary" />14        </template>15    </Card>16</template>