Card
Card/container component using headless CardRaw with built-in skeleton loading states. Usage Classes
Flat
Simple background with no shadow or border.
Elevated
Shadow and border for depth.
Outlined
Transparent with border only.
Highlight
Premium gradient with ring/shadow.
Highlight Orange
Warm orange gradient theme.
Code
Dark background for code snippets.
padding="none" — Content controls its own padding
padding="sm" — 16px (p-4)
padding="md" — 24px (p-6)
padding="lg" — 32px (p-8, default)
none
md
lg
xl
2xl (default)
3xl
Toggle loading state with :loading prop
3 Lines (default)
Standard loading placeholder.
5 Lines
More content placeholder lines.
Cards show a brief skeleton on mount (150ms default) for smooth appearance. Use :skeleton-delay="0" to disable.
:skeleton-delay="0"No skeleton
:skeleton-delay="150"Default (150ms)
:skeleton-delay="500"Longer delay
Article Title
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
Total Users
Uptime
Response Time
<!-- Basic card -->
<UIKitDisplayCard>Content here</UIKitDisplayCard>
<!-- With variant -->
<UIKitDisplayCard variant="elevated">Elevated card</UIKitDisplayCard>
<UIKitDisplayCard variant="highlight">Highlight card</UIKitDisplayCard>
<!-- Custom padding -->
<UIKitDisplayCard padding="sm">Small padding</UIKitDisplayCard>
<!-- Force loading state -->
<UIKitDisplayCard :loading="true" :skeleton-lines="5">
Content shown when not loading
</UIKitDisplayCard>
<!-- Disable initial skeleton -->
<UIKitDisplayCard :skeleton-delay="0">
Shows content immediately
</UIKitDisplayCard>