Card

<script setup>
import { Card } from "@dicehub/kappa/components/card";
</script>

<template>
  <Card style="width: 23rem;">
    <Card.Secondary as="header">Getting started</Card.Secondary>
    <Card.Primary as="article">
      <strong>Project guide</strong>
      <span>A short path from setup to first delivery.</span>
    </Card.Primary>
  </Card>
</template>

<script setup>
import { Check } from "@lucide/vue";
import { Button } from "@dicehub/kappa/components/button";
import { Card } from "@dicehub/kappa/components/card";
</script>

<template>
  <Card as="article" size="sm" style="width: 23rem;">
    <Card.Header>
      <Card.Title>Scheduled reports</Card.Title>
      <Card.Description>Weekly snapshots without manual exports.</Card.Description>
    </Card.Header>
    <Card.Content>
      <ul>
        <li><Check aria-hidden="true" />Choose daily or weekly delivery.</li>
        <li><Check aria-hidden="true" />Send to a channel or teammate.</li>
        <li><Check aria-hidden="true" />Include charts and key metrics.</li>
      </ul>
    </Card.Content>
    <Card.Footer><Button size="xs">Set up reports</Button></Card.Footer>
  </Card>
</template>

<script setup>
import { Badge } from "@dicehub/kappa/components/badge";
import { Button } from "@dicehub/kappa/components/button";
import { Card } from "@dicehub/kappa/components/card";
</script>

<template>
  <Card as="article" style="width: 23rem;">
    <img src="/event-cover.jpg" alt="People discussing a design system" />
    <Card.Header>
      <Card.Title>Design systems meetup</Card.Title>
      <Card.Description>A practical session on component APIs and accessibility.</Card.Description>
      <Card.Action><Badge>Featured</Badge></Card.Action>
    </Card.Header>
    <Card.Footer><Button size="sm">View event</Button></Card.Footer>
  </Card>
</template>

<script setup>
import { computed, ref } from "vue";
import { Badge } from "@dicehub/kappa/components/badge";
import { Button } from "@dicehub/kappa/components/button";
import { ButtonGroup } from "@dicehub/kappa/components/button-group";
import { Card } from "@dicehub/kappa/components/card";
import { Input } from "@dicehub/kappa/components/input";

const requests = [
  { origin: "api.example.com", status: "2xx" },
  { origin: "legacy.example.com", status: "4xx" },
];
const filter = ref("all");
const query = ref("");
const filtered = computed(() => requests.filter((request) =>
  (filter.value === "all" || request.status === filter.value) &&
  request.origin.includes(query.value.trim().toLowerCase()),
));
</script>

<template>
  <Card style="max-width: 36rem;">
    <Card.Header>
      <Card.Title>Request origins</Card.Title>
      <Card.Description>Recent traffic grouped by host.</Card.Description>
    </Card.Header>
    <Card.Content>
      <div class="toolbar">
        <Input v-model="query" aria-label="Filter origins" size="sm" />
        <ButtonGroup aria-label="Status filter">
          <Button v-for="status in ['all', '2xx', '4xx']" :key="status" @click="filter = status">
            {{ status }}
          </Button>
        </ButtonGroup>
      </div>
      <div v-for="request in filtered" :key="request.origin">
        <span>{{ request.origin }}</span>
        <Badge>{{ request.status }}</Badge>
      </div>
    </Card.Content>
    <Card.Footer>Showing {{ filtered.length }} of {{ requests.length }}</Card.Footer>
  </Card>
</template>

<script setup>
import { ArrowRight } from "@lucide/vue";
import { Card } from "@dicehub/kappa/components/card";
</script>

<template>
  <Card as="article" style="width: 23rem;">
    <Card.Secondary as="header">Release notes</Card.Secondary>
    <Card.Primary as="a" href="/release-notes">
      <strong>Read the component model <ArrowRight aria-hidden="true" /></strong>
      <span>One semantic anchor owns the complete primary layer.</span>
    </Card.Primary>
  </Card>
</template>

<script setup>
import { Card } from "@dicehub/kappa/components/card";
</script>

<template>
  <Card data-testid="card-root" style="width: 23rem;">
    <Card.Header data-testid="card-header">
      <Card.Title data-testid="card-title">Getting started</Card.Title>
      <Card.Description data-testid="card-description">
        Public attributes pass to every part.
      </Card.Description>
    </Card.Header>
    <Card.Content data-testid="card-content">A standard content region.</Card.Content>
    <Card.Footer data-testid="card-footer">Ready</Card.Footer>
  </Card>
</template>