ZUI — Card

Usage

Card Title

A brief description of this card's content.

Card body content goes here.

<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>

Confirm Action

Are you sure you want to proceed?

<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>

Elevated

Elevated Card

Uses a shadow instead of a border.

Shadow-based card style.

<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>

Interactive

Clickable Card

This entire card is a link.

<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>

Shape

Use the shape prop to change the corners: default (rounded), hard (square) or squircle. A squircle is a rounded square with smooth corners. Browsers without corner-shape support show normal rounded corners.

Default

Card content.

Hard

Card content.

Squircle

Card content.

<div class="zui-card">
<div class="zui-card-header">
  <div class="zui-card-title">Default</div>
</div>
<div class="zui-card-body">
  <p>Card content.</p>
</div>
</div>

<div class="zui-card zui-card-shape-hard">
<div class="zui-card-header">
  <div class="zui-card-title">Hard</div>
</div>
<div class="zui-card-body">
  <p>Card content.</p>
</div>
</div>

<div class="zui-card zui-card-shape-squircle">
<div class="zui-card-header">
  <div class="zui-card-title">Squircle</div>
</div>
<div class="zui-card-body">
  <p>Card content.</p>
</div>
</div>

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

<Card>
<CardHeader>
  <CardTitle>Default</CardTitle>
</CardHeader>
<CardBody>
  <p>Card content.</p>
</CardBody>
</Card>

<Card shape="hard">
<CardHeader>
  <CardTitle>Hard</CardTitle>
</CardHeader>
<CardBody>
  <p>Card content.</p>
</CardBody>
</Card>

<Card shape="squircle">
<CardHeader>
  <CardTitle>Squircle</CardTitle>
</CardHeader>
<CardBody>
  <p>Card content.</p>
</CardBody>
</Card>

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

<Card>
<CardHeader>
  <CardTitle>Default</CardTitle>
</CardHeader>
<CardBody>
  <p>Card content.</p>
</CardBody>
</Card>

<Card shape="hard">
<CardHeader>
  <CardTitle>Hard</CardTitle>
</CardHeader>
<CardBody>
  <p>Card content.</p>
</CardBody>
</Card>

<Card shape="squircle">
<CardHeader>
  <CardTitle>Squircle</CardTitle>
</CardHeader>
<CardBody>
  <p>Card content.</p>
</CardBody>
</Card>

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

<Card>
<CardHeader>
  <CardTitle>Default</CardTitle>
</CardHeader>
<CardBody>
  <p>Card content.</p>
</CardBody>
</Card>

<Card shape="hard">
<CardHeader>
  <CardTitle>Hard</CardTitle>
</CardHeader>
<CardBody>
  <p>Card content.</p>
</CardBody>
</Card>

<Card shape="squircle">
<CardHeader>
  <CardTitle>Squircle</CardTitle>
</CardHeader>
<CardBody>
  <p>Card content.</p>
</CardBody>
</Card>

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

<Card>
<CardHeader>
  <CardTitle>Default</CardTitle>
</CardHeader>
<CardBody>
  <p>Card content.</p>
</CardBody>
</Card>

<Card shape="hard">
<CardHeader>
  <CardTitle>Hard</CardTitle>
</CardHeader>
<CardBody>
  <p>Card content.</p>
</CardBody>
</Card>

<Card shape="squircle">
<CardHeader>
  <CardTitle>Squircle</CardTitle>
</CardHeader>
<CardBody>
  <p>Card content.</p>
</CardBody>
</Card>

<template>
<Card>
  <CardHeader>
    <CardTitle>Default</CardTitle>
  </CardHeader>
  <CardBody>
    <p>Card content.</p>
  </CardBody>
</Card>

<Card shape="hard">
  <CardHeader>
    <CardTitle>Hard</CardTitle>
  </CardHeader>
  <CardBody>
    <p>Card content.</p>
  </CardBody>
</Card>

<Card shape="squircle">
  <CardHeader>
    <CardTitle>Squircle</CardTitle>
  </CardHeader>
  <CardBody>
    <p>Card content.</p>
  </CardBody>
</Card>
</template>

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

To make squircle the default everywhere, add zui-squircle-all to <html> — see Squircle.

CSS custom properties

Set these on :root, on a wrapper, or on the element. See Component custom properties.

Property	Default	Description
`--zui-card-radius`	`var(--radius-xl)`	Border radius
`--zui-card-border`	`var(--color-border)`	Border colour
`--zui-card-bg`	`var(--color-surface)`	Background colour
`--zui-card-padding`	`var(--space-sm)`	Padding inside the card
`--zui-card-shadow`	`none` (`var(--shadow-lg)` when elevated)	Box shadow
`--zui-card-title-font-size`	`var(--step-1)`	Title font size
`--zui-card-description-font-size`	`var(--step--1)`	Description font size
`--zui-card-body-font-size`	`var(--step-0)`	Body font size

Card

Usage

With Footer

Elevated

Interactive

Shape

CSS custom properties

Theme