ComponentsDisplayCard

Card

A surface for grouping related content. 6 variants with support for media, interactive states, selected state, and composable header/body/footer.

6 variantsInteractiveMediaSelected stateOverlay

Variants

Live preview

elevated (default), filled, outlined, ghost, gradient — all support hover states

Elevated

Shadow + hover lift

Filled

Tonal background

Outlined

Border highlight

Ghost

Dashed border

Gradient

Brand colors

App.tsx

tsx

1import { Card, CardBody } from 'omverse-ui'
2 
3<Card variant="elevated" style={{ width: 176 }}>
4  <CardBody>
5    <p>Elevated</p>
6    <p style={{ opacity: 0.6, marginTop: 4 }}>Shadow + hover lift</p>
7  </CardBody>
8</Card>
9 
10<Card variant="filled" style={{ width: 176 }}>
11  <CardBody>
12    <p>Filled</p>
13    <p style={{ opacity: 0.6, marginTop: 4 }}>Tonal background</p>
14  </CardBody>
15</Card>
16 
17<Card variant="outlined" style={{ width: 176 }}>
18  <CardBody>
19    <p>Outlined</p>
20    <p style={{ opacity: 0.6, marginTop: 4 }}>Border highlight</p>
21  </CardBody>
22</Card>
23 
24<Card variant="ghost" style={{ width: 176 }}>
25  <CardBody>
26    <p>Ghost</p>
27    <p style={{ opacity: 0.6, marginTop: 4 }}>Dashed border</p>
28  </CardBody>
29</Card>
30 
31<Card variant="gradient" style={{ width: 176 }}>
32  <CardBody>
33    <p>Gradient</p>
34    <p style={{ opacity: 0.8, marginTop: 4 }}>Brand colors</p>
35  </CardBody>
36</Card>

Glass variant

Live preview

Use on colored backgrounds to reveal the frosted-glass blur

Glass card

Frosted glass effect

Another glass

Works on any background

App.tsx

tsx

1import { Card, CardBody } from 'omverse-ui'
2 
3{/* Glass needs a colored backdrop to show the frosted effect */}
4<div style={{
background: 'linear-gradient(135deg, #6366F1, #A855F7)',
padding: 32,
borderRadius: 16,
display: 'flex',
gap: 16,
10}}>
<Card variant="glass" style={{ width: 208 }}>
  <CardBody>
    <p>Glass card</p>
    <p style={{ opacity: 0.8, marginTop: 4 }}>Frosted glass effect</p>
  </CardBody>
</Card>
17 
<Card variant="glass" style={{ width: 208 }}>
  <CardBody>
    <p>Another glass</p>
    <p style={{ opacity: 0.8, marginTop: 4 }}>Works on any background</p>
  </CardBody>
</Card>
24</div>

With media + header + footer

Live preview

CardMedia, CardHeader (with action), CardBody and CardFooter compose the full card

Mountain Trek

Himalayas · 5 days

A 5-day guided trek through the Himalayas with expert guides.

Available

Launch campaign

Marketing · 3 days left

Active

Drive awareness for the new product launch across all channels.

App.tsx

tsx

1import { Avatar, Badge, Button, Card, CardBody, CardFooter, CardHeader, CardMedia } from 'omverse-ui'
2 
3{/* Card with image overlay content */}
4<Card variant="elevated" style={{ width: 208 }} interactive>
<CardMedia
  src="https://picsum.photos/seed/mountain/400/200"
  alt="Mountain Trek"
  height={160}
  overlay
  overlayContent={
    <>
      <p style={{ fontWeight: 600 }}>Mountain Trek</p>
      <p style={{ opacity: 0.8, fontSize: 12 }}>Himalayas · 5 days</p>
    </>
  }
/>
<CardBody>
  <p style={{ fontSize: 13, color: 'var(--color-text-secondary)' }}>
    A 5-day guided trek through the Himalayas with expert guides.
  </p>
</CardBody>
<CardFooter divider style={{ justifyContent: 'space-between' }}>
  <Badge color="success" variant="tonal">Available</Badge>
  <Button size="sm" variant="filled">Book now</Button>
</CardFooter>
26</Card>
27 
28{/* Card with header action */}
29<Card variant="elevated" style={{ width: 256 }} interactive>
<CardMedia
  src="https://picsum.photos/seed/launch/400/140"
  alt="Campaign"
  height={140}
/>
<CardHeader
  title="Launch campaign"
  subtitle="Marketing · 3 days left"
  action={<Badge color="success" variant="tonal">Active</Badge>}
/>
<CardBody>
  <p style={{ fontSize: 13, color: 'var(--color-text-secondary)' }}>
    Drive awareness for the new product launch across all channels.
  </p>
</CardBody>
<CardFooter divider style={{ justifyContent: 'space-between' }}>
  <div style={{ display: 'flex' }}>
    <Avatar name="John Doe" size="xs" style={{ boxShadow: '0 0 0 2px var(--color-background)' }} />
    <Avatar name="Alice Wang" size="xs" color="secondary" style={{ boxShadow: '0 0 0 2px var(--color-background)', marginLeft: -8 }} />
  </div>
  <div style={{ display: 'flex', gap: 8 }}>
    <Button size="sm" variant="text">View</Button>
    <Button size="sm" variant="filled">Edit</Button>
  </div>
</CardFooter>
55</Card>

Horizontal layout

Live preview

Set the card to flex-row and give CardMedia a fixed width for side-by-side layouts

Midnight Rain

Taylor Swift · 3:54

App.tsx

tsx

1import { Button, Card, CardBody, CardHeader, CardMedia } from 'omverse-ui'
2 
3<Card variant="elevated" style={{ width: 320, display: 'flex', flexDirection: 'row', overflow: 'hidden' }} interactive>
<CardMedia
  src="https://picsum.photos/seed/music/200/200"
  alt="Midnight Rain"
  style={{ width: 96, flexShrink: 0, borderRadius: '12px 0 0 12px', height: 'auto', alignSelf: 'stretch' }}
/>
<div style={{ display: 'flex', flexDirection: 'column', justifyContent: 'center' }}>
  <CardHeader title="Midnight Rain" subtitle="Taylor Swift · 3:54" />
  <CardBody>
    <Button size="sm" variant="filled" leadingIcon="play">Play</Button>
  </CardBody>
</div>
15</Card>

Selected state — action cards

Live preview

Combine interactive + selected + asButton to create fully-clickable selectable cards

App.tsx

tsx

1import { useState } from 'react'
2import { Badge, Card, CardBody } from 'omverse-ui'
3 
4const [selected, setSelected] = useState('template')
5 
6const ICONS = { scratch: 'file-text', template: 'bookmark', import: 'upload' } as const
7 
8const options = [
9  { id: 'scratch',  label: 'From scratch', desc: 'Start fresh' },
10  { id: 'template', label: 'Template',     desc: 'Use a preset' },
11  { id: 'import',   label: 'Import',       desc: 'Upload file' },
12]
13 
14<div style={{ display: 'flex', gap: 16 }}>
15  {options.map(opt => (
16    <Card
17      key={opt.id}
18      variant="outlined"
19      interactive
20      selected={selected === opt.id}
21      onClick={() => setSelected(opt.id)}
22      asButton
23      style={{ width: 176, textAlign: 'center' }}
24    >
25      <CardBody style={{ paddingTop: 20, paddingBottom: 20 }}>
26        <i className={`ti ti-${ICONS[opt.id]}`} style={{ fontSize: 24 }} aria-hidden="true" />
27        <p style={{ fontSize: 14, fontWeight: 500, marginTop: 8 }}>{opt.label}</p>
28        <p style={{ fontSize: 12, color: 'var(--color-text-secondary)', marginTop: 4 }}>{opt.desc}</p>
29        {selected === opt.id && (
30          <Badge color="default" variant="tonal" style={{ marginTop: 8 }}>Selected</Badge>
31        )}
32      </CardBody>
33    </Card>
34  ))}
35</div>

Stat cards

Live preview

Cards as data containers — no CardBody needed when using padding directly on Card

Total revenue

$48.2k

+12.5%

Active users

2,841

+8.2%

Bounce rate

24.1%

-3.1%

App.tsx

tsx

1import { Card } from 'omverse-ui'
2 
3<div style={{ display: 'flex', gap: 16 }}>
<Card variant="outlined" style={{ width: 176, padding: 16 }}>
  <p style={{ fontSize: 12, color: 'var(--color-text-secondary)' }}>Total revenue</p>
  <p style={{ fontSize: 22, fontWeight: 500, color: 'var(--color-text-primary)', marginTop: 4 }}>$48.2k</p>
  <p style={{ fontSize: 12, fontWeight: 500, marginTop: 8, color: '#10B981' }}>+12.5%</p>
</Card>
9 
<Card variant="outlined" style={{ width: 176, padding: 16 }}>
  <p style={{ fontSize: 12, color: 'var(--color-text-secondary)' }}>Active users</p>
  <p style={{ fontSize: 22, fontWeight: 500, color: 'var(--color-text-primary)', marginTop: 4 }}>2,841</p>
  <p style={{ fontSize: 12, fontWeight: 500, marginTop: 8, color: '#10B981' }}>+8.2%</p>
</Card>
15 
<Card variant="outlined" style={{ width: 176, padding: 16 }}>
  <p style={{ fontSize: 12, color: 'var(--color-text-secondary)' }}>Bounce rate</p>
  <p style={{ fontSize: 22, fontWeight: 500, color: 'var(--color-text-primary)', marginTop: 4 }}>24.1%</p>
  <p style={{ fontSize: 12, fontWeight: 500, marginTop: 8, color: '#EF4444' }}>-3.1%</p>
</Card>
21</div>

Profile card

Live preview

CardMedia + Avatar with negative margin creates a cover-photo-to-avatar overlap

John Doe

Product Designer

128

Projects

4.2k

Followers

98%

Rating

App.tsx

tsx

1import { Avatar, Card, CardBody, CardFooter, CardMedia } from 'omverse-ui'
2 
3<Card variant="outlined" style={{ width: 208, overflow: 'hidden' }}>
<CardMedia src="https://picsum.photos/seed/profile/400/120" alt="Cover" height={120} />
<div style={{ display: 'flex', justifyContent: 'center', marginTop: -28 }}>
  <Avatar name="John Doe" size="lg" style={{ boxShadow: '0 0 0 4px var(--color-background)' }} />
</div>
<CardBody style={{ textAlign: 'center', paddingTop: 8, paddingBottom: 0 }}>
  <p style={{ fontSize: 14, fontWeight: 600 }}>John Doe</p>
  <p style={{ fontSize: 12, color: 'var(--color-text-secondary)', marginTop: 2 }}>Product Designer</p>
</CardBody>
<CardFooter divider style={{ justifyContent: 'space-around', padding: 0, marginTop: 12 }}>
  {[['128', 'Projects'], ['4.2k', 'Followers'], ['98%', 'Rating']].map(([val, lbl]) => (
    <div key={lbl} style={{ flex: 1, textAlign: 'center', padding: '12px 0' }}>
      <p style={{ fontSize: 13, fontWeight: 600 }}>{val}</p>
      <p style={{ fontSize: 12, color: 'var(--color-text-disabled)' }}>{lbl}</p>
    </div>
  ))}
</CardFooter>
20</Card>

Props

PropTypeDefaultDescription

interactivebooleanfalseAdds hover / focus / active states

selectedbooleanfalseShows a selected ring or border

asButtonbooleanfalseRenders as a <button> for fully-clickable cards

radius'none' | 'sm' | 'md' | 'lg' | 'full''md'Border radius