Dottiv1.1
← Components

Card

Component

Flexible container component with multiple variants and styling options.

Installation & Usage

Basic Usage
import { Card } from 'dotti'

<Card variant="default" padding="md">
  <h3>Card Title</h3>
  <p>Card content goes here</p>
</Card>

Examples

Card Variants

Different card styles for various use cases.

Default

Standard card with border

Glass

Glassmorphism effect

Dotted

Dotted border style

Code
<Card variant="default" padding="md">
  <h4>Default Card</h4>
  <p>Standard card with border</p>
</Card>

<Card variant="glass" padding="md">
  <h4>Glass Card</h4>
  <p>Glassmorphism effect</p>
</Card>

<Card variant="dotted" padding="md">
  <h4>Dotted Card</h4>
  <p>Dotted border style</p>
</Card>

Props