Card

<div class="zui-card">
<div class="zui-card-header">
  <div class="zui-card-title">Card Title</div>
  <div class="zui-card-description">A brief description of this card's content.</div>
</div>
<div class="zui-card-body">
  <p>Card body content goes here.</p>
</div>
</div>

import { Card, CardHeader, CardTitle, CardDescription, CardBody } from '@mrmartineau/zui/react'

<Card>
<CardHeader>
  <CardTitle>Card Title</CardTitle>
  <CardDescription>A brief description of this card's content.</CardDescription>
</CardHeader>
<CardBody>
  <p>Card body content goes here.</p>
</CardBody>
</Card>

---
import { Card, CardHeader, CardTitle, CardDescription, CardBody } from '@mrmartineau/zui/astro'
---

<Card>
<CardHeader>
  <CardTitle>Card Title</CardTitle>
  <CardDescription>A brief description of this card's content.</CardDescription>
</CardHeader>
<CardBody>
  <p>Card body content goes here.</p>
</CardBody>
</Card>

import { Card, CardHeader, CardTitle, CardDescription, CardBody } from '@mrmartineau/zui/solid'

<Card>
<CardHeader>
  <CardTitle>Card Title</CardTitle>
  <CardDescription>A brief description of this card's content.</CardDescription>
</CardHeader>
<CardBody>
  <p>Card body content goes here.</p>
</CardBody>
</Card>

<script lang="ts">
import { Card, CardHeader, CardTitle, CardDescription, CardBody } from '@mrmartineau/zui/svelte'
</script>

<Card>
<CardHeader>
  <CardTitle>Card Title</CardTitle>
  <CardDescription>A brief description of this card's content.</CardDescription>
</CardHeader>
<CardBody>
  <p>Card body content goes here.</p>
</CardBody>
</Card>

<template>
<Card>
<CardHeader>
  <CardTitle>Card Title</CardTitle>
  <CardDescription>A brief description of this card's content.</CardDescription>
</CardHeader>
<CardBody>
  <p>Card body content goes here.</p>
</CardBody>
</Card>
</template>

<script setup>
import { Card, CardHeader, CardTitle, CardDescription, CardBody } from '@mrmartineau/zui/vue'
</script>

<div class="zui-card">
<div class="zui-card-header">
  <div class="zui-card-title">Confirm Action</div>
  <div class="zui-card-description">Are you sure you want to proceed?</div>
</div>
<div class="zui-card-footer">
  <button class="zui-button zui-button-variant-outline">Cancel</button>
  <button class="zui-button">Confirm</button>
</div>
</div>

import { Card, CardHeader, CardTitle, CardDescription, Button } from '@mrmartineau/zui/react'

<Card>
<CardHeader>
  <CardTitle>Confirm Action</CardTitle>
  <CardDescription>Are you sure you want to proceed?</CardDescription>
</CardHeader>
<div className="zui-card-footer">
  <Button variant="outline">Cancel</Button>
  <Button>Confirm</Button>
</div>
</Card>

---
import { Card, CardHeader, CardTitle, CardDescription, Button } from '@mrmartineau/zui/astro'
---

<Card>
<CardHeader>
  <CardTitle>Confirm Action</CardTitle>
  <CardDescription>Are you sure you want to proceed?</CardDescription>
</CardHeader>
<div class="zui-card-footer">
  <Button variant="outline">Cancel</Button>
  <Button>Confirm</Button>
</div>
</Card>

import { Card, CardHeader, CardTitle, CardDescription, Button } from '@mrmartineau/zui/solid'

<Card>
<CardHeader>
  <CardTitle>Confirm Action</CardTitle>
  <CardDescription>Are you sure you want to proceed?</CardDescription>
</CardHeader>
<div class="zui-card-footer">
  <Button variant="outline">Cancel</Button>
  <Button>Confirm</Button>
</div>
</Card>

<script lang="ts">
import { Card, CardHeader, CardTitle, CardDescription, Button } from '@mrmartineau/zui/svelte'
</script>

<Card>
<CardHeader>
  <CardTitle>Confirm Action</CardTitle>
  <CardDescription>Are you sure you want to proceed?</CardDescription>
</CardHeader>
<div class="zui-card-footer">
  <Button variant="outline">Cancel</Button>
  <Button>Confirm</Button>
</div>
</Card>

<template>
<Card>
<CardHeader>
  <CardTitle>Confirm Action</CardTitle>
  <CardDescription>Are you sure you want to proceed?</CardDescription>
</CardHeader>
<div class="zui-card-footer">
  <Button variant="outline">Cancel</Button>
  <Button>Confirm</Button>
</div>
</Card>
</template>

<script setup>
import { Card, CardHeader, CardTitle, CardDescription, Button } from '@mrmartineau/zui/vue'
</script>

<div class="zui-card zui-card-elevated">
<div class="zui-card-header">
  <div class="zui-card-title">Elevated Card</div>
  <div class="zui-card-description">Uses a shadow instead of a border.</div>
</div>
<div class="zui-card-body">
  <p>Shadow-based card style.</p>
</div>
</div>

import { Card, CardHeader, CardTitle, CardDescription, CardBody } from '@mrmartineau/zui/react'

<Card className="zui-card-elevated">
<CardHeader>
  <CardTitle>Elevated Card</CardTitle>
  <CardDescription>Uses a shadow instead of a border.</CardDescription>
</CardHeader>
<CardBody>
  <p>Shadow-based card style.</p>
</CardBody>
</Card>

---
import { Card, CardHeader, CardTitle, CardDescription, CardBody } from '@mrmartineau/zui/astro'
---

<Card class="zui-card-elevated">
<CardHeader>
  <CardTitle>Elevated Card</CardTitle>
  <CardDescription>Uses a shadow instead of a border.</CardDescription>
</CardHeader>
<CardBody>
  <p>Shadow-based card style.</p>
</CardBody>
</Card>

import { Card, CardHeader, CardTitle, CardDescription, CardBody } from '@mrmartineau/zui/solid'

<Card class="zui-card-elevated">
<CardHeader>
  <CardTitle>Elevated Card</CardTitle>
  <CardDescription>Uses a shadow instead of a border.</CardDescription>
</CardHeader>
<CardBody>
  <p>Shadow-based card style.</p>
</CardBody>
</Card>

<script lang="ts">
import { Card, CardHeader, CardTitle, CardDescription, CardBody } from '@mrmartineau/zui/svelte'
</script>

<Card class="zui-card-elevated">
<CardHeader>
  <CardTitle>Elevated Card</CardTitle>
  <CardDescription>Uses a shadow instead of a border.</CardDescription>
</CardHeader>
<CardBody>
  <p>Shadow-based card style.</p>
</CardBody>
</Card>

<template>
<Card class="zui-card-elevated">
<CardHeader>
  <CardTitle>Elevated Card</CardTitle>
  <CardDescription>Uses a shadow instead of a border.</CardDescription>
</CardHeader>
<CardBody>
  <p>Shadow-based card style.</p>
</CardBody>
</Card>
</template>

<script setup>
import { Card, CardHeader, CardTitle, CardDescription, CardBody } from '@mrmartineau/zui/vue'
</script>

<a href="#" class="zui-card zui-card-interactive">
<div class="zui-card-header">
  <div class="zui-card-title">Clickable Card</div>
  <div class="zui-card-description">This entire card is a link.</div>
</div>
</a>

import { Card, CardHeader, CardTitle, CardDescription } from '@mrmartineau/zui/react'

<Card href="#">
<CardHeader>
  <CardTitle>Clickable Card</CardTitle>
  <CardDescription>This entire card is a link.</CardDescription>
</CardHeader>
</Card>

---
import { Card, CardHeader, CardTitle, CardDescription } from '@mrmartineau/zui/astro'
---

<Card href="#">
<CardHeader>
  <CardTitle>Clickable Card</CardTitle>
  <CardDescription>This entire card is a link.</CardDescription>
</CardHeader>
</Card>

import { Card, CardHeader, CardTitle, CardDescription } from '@mrmartineau/zui/solid'

<Card href="#">
<CardHeader>
  <CardTitle>Clickable Card</CardTitle>
  <CardDescription>This entire card is a link.</CardDescription>
</CardHeader>
</Card>

<script lang="ts">
import { Card, CardHeader, CardTitle, CardDescription } from '@mrmartineau/zui/svelte'
</script>

<Card href="#">
<CardHeader>
  <CardTitle>Clickable Card</CardTitle>
  <CardDescription>This entire card is a link.</CardDescription>
</CardHeader>
</Card>

<template>
<Card href="#">
<CardHeader>
  <CardTitle>Clickable Card</CardTitle>
  <CardDescription>This entire card is a link.</CardDescription>
</CardHeader>
</Card>
</template>

<script setup>
import { Card, CardHeader, CardTitle, CardDescription } from '@mrmartineau/zui/vue'
</script>