Card
Use cards to group related information in a container.
<dui-card class="relative mx-auto w-full max-w-sm pt-0">
<div class="absolute inset-0 z-30 aspect-video"></div>
<img
src="https://images.unsplash.com/photo-1563492065599-3520f775eeed?ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&q=80&w=2274"
alt="Photo by cartayen on Unsplash"
title="Photo by cartayen on Unsplash"
class="relative z-20 aspect-video w-full object-cover"
/>
<dui-card-header>
<dui-card-title>Bangkok, Thailand</dui-card-title>
<dui-card-description>
Bangkok is an exhilarating metropolis where ancient, gilded temples stand in vibrant contrast to modern
skyscrapers, world-class street food, and electrifying nightlife.
</dui-card-description>
</dui-card-header>
<dui-card-footer>
<dui-button variant="ButtonVariant.Outline" class="w-full">
<dui-icon name="bookmark"/>
Bookmark
</dui-button>
</dui-card-footer>
</dui-card>Usage
<dui-card>
<dui-card-header>
<dui-card-title>...</dui-card-title>
<dui-card-description>...</dui-card-description>
</dui-card-header>
<dui-card-content>
...
</dui-card-content>
<dui-card-footer>...</dui-card-footer>
</dui-card>Examples
Default Size
<dui-card size="default" class="mx-auto w-full max-w-sm">
<dui-card-header>
<dui-card-title>Default Card</dui-card-title>
<dui-card-description>
This card uses the default size variant.
</dui-card-description>
</dui-card-header>
<dui-card-content>
<p>
The card component supports a size prop that defaults to
"default" for standard spacing and sizing.
</p>
</dui-card-content>
<dui-card-footer>
<dui-button variant="ButtonVariant.Outline" class="w-full">
Action
</dui-button>
</dui-card-footer>
</dui-card>Small Size
<dui-card size="CardSize.Small" class="mx-auto w-full max-w-sm">
<dui-card-header>
<dui-card-title>Small Card</dui-card-title>
<dui-card-description>
This card uses the small size variant.
</dui-card-description>
</dui-card-header>
<dui-card-content>
<p>
The card component supports a size prop that can be set to
"sm" for a more compact appearance.
</p>
</dui-card-content>
<dui-card-footer>
<dui-button variant="ButtonVariant.Outline" size="ButtonSize.Small" class="w-full">
Action
</dui-button>
</dui-card-footer>
</dui-card>Header with Border
<dui-card class="mx-auto w-full max-w-sm">
<dui-card-header class="border-b">
<dui-card-title>Header with Border</dui-card-title>
<dui-card-description>
This is a card with a header that has a bottom border.
</dui-card-description>
</dui-card-header>
<dui-card-content>
<p>
The header has a border-b class applied, creating a visual
separation between the header and content sections.
</p>
</dui-card-content>
</dui-card>Footer with Border
<dui-card class="mx-auto w-full max-w-sm">
<dui-card-content>
<p>
The footer has a border-t class applied, creating a visual
separation between the content and footer sections.
</p>
</dui-card-content>
<dui-card-footer class="border-t">
<dui-button variant="ButtonVariant.Outline" class="w-full">
Footer with Border
</dui-button>
</dui-card-footer>
</dui-card>Image
<dui-card class="relative mx-auto w-full max-w-sm pt-0">
<div class="bg-primary absolute inset-0 z-30 aspect-video opacity-50 mix-blend-color"></div>
<img
src="https://images.unsplash.com/photo-1604076850742-4c7221f3101b?q=80&w=1887&auto=format&fit=crop&ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D"
alt="Photo by mymind on Unsplash"
title="Photo by mymind on Unsplash"
class="relative z-20 aspect-video w-full object-cover brightness-60 grayscale"
/>
<dui-card-header>
<dui-card-title>Beautiful Landscape</dui-card-title>
<dui-card-description>
A stunning view that captures the essence of natural beauty.
</dui-card-description>
</dui-card-header>
<dui-card-footer>
<dui-button class="w-full">
<dui-icon name="plus"/>
Button
</dui-button>
</dui-card-footer>
</dui-card>Login
<dui-card class="mx-auto w-full max-w-sm">
<dui-card-header>
<dui-card-title>Login to your account</dui-card-title>
<dui-card-description>
Enter your email below to login to your account
</dui-card-description>
</dui-card-header>
<dui-card-content>
<form>
<dui-field-group>
<dui-field>
<dui-field-label for="email">Email</dui-field-label>
<dui-input id="email" type="email" placeholder="m@example.com" required/>
</dui-field>
<dui-field>
<div class="flex items-center">
<dui-field-label for="password">Password</dui-field-label>
<a href="#" class="ml-auto inline-block underline-offset-4 hover:underline">
Forgot your password?
</a>
</div>
<dui-input id="password" type="password" required/>
</dui-field>
</dui-field-group>
</form>
</dui-card-content>
<dui-card-footer class="flex-col gap-2">
<dui-button type="submit" class="w-full">
Login
</dui-button>
<dui-button variant="ButtonVariant.Outline" class="w-full">
Login with Google
</dui-button>
<div class="mt-4 text-center">
Don't have an account? <a href="#" class="underline underline-offset-4">
Sign up
</a>
</div>
</dui-card-footer>
</dui-card>Meeting Notes
<dui-card class="mx-auto w-full max-w-sm">
<dui-card-header>
<dui-card-title>Meeting Notes</dui-card-title>
<dui-card-description>
Transcript from the meeting with the client.
</dui-card-description>
<dui-card-action>
<dui-button variant="ButtonVariant.Outline" size="ButtonSize.Small">
<dui-icon name="captions"/>
Transcribe
</dui-button>
</dui-card-action>
</dui-card-header>
<dui-card-content>
<p>
Client requested dashboard redesign with focus on mobile
responsiveness.
</p>
<ol class="mt-4 flex list-decimal flex-col gap-2 pl-6">
<li>New analytics widgets for daily/weekly metrics</li>
<li>Simplified navigation menu</li>
<li>Dark mode support</li>
<li>Timeline: 6 weeks</li>
<li>Follow-up meeting scheduled for next Tuesday</li>
</ol>
</dui-card-content>
<dui-card-footer>
<dui-avatar-group>
<dui-avatar src="/avatars/avatar-3.jpg" />
<dui-avatar src="/avatars/avatar-2.jpg" />
<dui-avatar src="/avatars/avatar-1.jpg" />
<dui-avatar-group-count>+8</dui-avatar-group-count>
</dui-avatar-group>
</dui-card-footer>
</dui-card>