Card
Cards group related information and actions into flexible, reusable containers.
Import
import { Card } from "@shivms/ui";Variants
Elevated
Card Header
This is an example card demonstrating the available layout, media and action slots.
Outlined
Card Header
This is an example card demonstrating the available layout, media and action slots.
Filled
Card Header
This is an example card demonstrating the available layout, media and action slots.
Ghost
Card Header
This is an example card demonstrating the available layout, media and action slots.
Padding
Extra Small
Card Header
This is an example card demonstrating the available layout, media and action slots.
Small
Card Header
This is an example card demonstrating the available layout, media and action slots.
Medium
Card Header
This is an example card demonstrating the available layout, media and action slots.
Large
Card Header
This is an example card demonstrating the available layout, media and action slots.
Extra Large
Card Header
This is an example card demonstrating the available layout, media and action slots.
Radius
Small
Card Header
This is an example card demonstrating the available layout, media and action slots.
Medium
Card Header
This is an example card demonstrating the available layout, media and action slots.
Large
Card Header
This is an example card demonstrating the available layout, media and action slots.
Extra Large
Card Header
This is an example card demonstrating the available layout, media and action slots.
Shadow
Small
Card Header
This is an example card demonstrating the available layout, media and action slots.
Medium
Card Header
This is an example card demonstrating the available layout, media and action slots.
Large
Card Header
This is an example card demonstrating the available layout, media and action slots.
States
Bordered
Card Header
This is an example card demonstrating the available layout, media and action slots.
Hoverable
Card Header
This is an example card demonstrating the available layout, media and action slots.
Clickable
Card Header
This is an example card demonstrating the available layout, media and action slots.
Selected
Card Header
This is an example card demonstrating the available layout, media and action slots.
Disabled
Card Header
This is an example card demonstrating the available layout, media and action slots.
Media Position
Top
Card Header
This is an example card demonstrating the available layout, media and action slots.
Bottom
Card Header
This is an example card demonstrating the available layout, media and action slots.
Alignment
Start
Card Header
This is an example card demonstrating the available layout, media and action slots.
Center
Card Header
This is an example card demonstrating the available layout, media and action slots.
End
Card Header
This is an example card demonstrating the available layout, media and action slots.
Between
Card Header
This is an example card demonstrating the available layout, media and action slots.