Cards
Flexible card component with variants, sections, and image support
Same BEM classes and behavior as Astro, Svelte, and Vue.
Add this component
Run the command below in your project directory. When prompted, select the component(s) you want. The CLI will copy the CSS and component files.
Choose your package manager — click a tab to select, then copy the command.
Live examples
Usage
Usage
Full example for each framework (Astro, Vanilla, Svelte, Vue, React). Switch framework via View as or by clicking a Usage tab—both stay in sync.
Astro Vanilla Svelte Vue React ---
import Card from '../components/astro/Card.astro';
---
<Card variant="elevated">
<div class="card__body">
<h3>Card title</h3>
<p>Card content.</p>
</div>
</Card>
<!-- Rizzo CSS. No script needed. -->
<div class="card card--elevated">
<div class="card__header"><h3>Card title</h3></div>
<div class="card__body">Card content.</div>
</div>
<script>
import { Card } from '$lib/rizzo';
</script>
<Card variant="elevated">
<div class="card__body">
<h3>Card title</h3>
<p>Card content.</p>
</div>
</Card>
<script setup>
import Card from '@/components/rizzo/Card.vue';
</script>
<template>
<Card variant="elevated">
<div class="card__body">
<h3>Card title</h3>
<p>Card content.</p>
</div>
</Card>
</template>
import { Card } from './components/react';
<Card variant="elevated">
<div className="card__body">
<h3>Card title</h3>
<p>Card content.</p>
</div>
</Card>
Other frameworks: Astro · Vanilla · Svelte · Vue