Card

Flexible and modular card component for displaying content in a structured and visually appealing way. Built with atomic design principles.

Installation

Import

import { Card } from '@svelte-atoms/core/card';

Preset Configuration

Customize the card appearance using presets

You can customize the default styles for Card components by defining presets in your configuration:

Examples

Explore different card variations and use cases

Basic Card

Simple card with header and content

Card Title

This is a card description.

Main content goes here.

Code

<script>
  import { Card } from '@svelte-atoms/core';
</script>

<Card.Root>
  <Card.Header>
    <Card.Title>Card Title</Card.Title>
    <Card.Description>This is a card description.</Card.Description>
  </Card.Header>
  <Card.Content>
    <p>Main content goes here.</p>
  </Card.Content>
</Card.Root>

Card Variants

Different visual styles for cards

Default

Outlined

Elevated

Code

<Card.Root variant="default">
  <Card.Header>
    <Card.Title>Default Card</Card.Title>
  </Card.Header>
</Card.Root>

<Card.Root variant="outlined">
  <Card.Header>
    <Card.Title>Outlined Card</Card.Title>
  </Card.Header>
</Card.Root>

<Card.Root variant="elevated">
  <Card.Header>
    <Card.Title>Elevated Card</Card.Title>
  </Card.Header>
</Card.Root>

Clickable Card

Interactive card with click handler

Clickable Card

Click anywhere on this card.

Code

<Card.Root clickable onclick={() => console.log('Clicked!')}>
  <Card.Header>
    <Card.Title>Clickable Card</Card.Title>
    <Card.Description>Click anywhere on this card.</Card.Description>
  </Card.Header>
</Card.Root>

Card with Actions

Card with action buttons

Action Card

Content with actions.

Code

<Card.Root>
  <Card.Header>
    <Card.Title>Action Card</Card.Title>
  </Card.Header>
  <Card.Content>
    <p>Content with actions.</p>
  </Card.Content>
  <Card.Actions>
    <button>Primary Action</button>
    <button>Secondary</button>
  </Card.Actions>
</Card.Root>

API Reference

Card.Root Props

Prop

Type

Default

Description

disabled

boolean

false

Disabled

factory

Factory<CardBond>

undefined

Factory

Accessibility

Built-in Accessibility Features

• Proper semantic HTML structure
• Keyboard navigation for clickable cards
• ARIA attributes for interactive states
• Focus management and visible focus indicators
• Screen reader support for card content

Button

Checkbox