A Card component that groups related content and actions with support for various sizes, variants, and styling options. Cards are container elements that provide visual separation and hierarchy for content sections.
Examples
<.card>
<p>Simple card content</p>
</.card>
<.card size="3" variant="classic">
<h3>Card Title</h3>
<p>Card content with classic styling</p>
</.card>
<.card variant="ghost" m="4">
<p>Ghost card with margin</p>
</.card>
<.card as_child>
<a href="/profile">
<p>Interactive card as link</p>
</a>
</.card>Props
size- Card size: "1", "2", "3", "4", "5" (default: "1")variant- Card variant: "surface", "classic", "ghost" (default: "surface")as_child- When true, merges props into immediate child element (default: false)- Plus margin props (m, mx, my, mt, mr, mb, ml) for spacing control
Summary
Functions
Attributes
m(:any) - Margin utility class string or map. Example:1or%{xs: '1', sm: '2'}.mx(:any) - Margin utility class string or map. Example:1or%{xs: '1', sm: '2'}.my(:any) - Margin utility class string or map. Example:1or%{xs: '1', sm: '2'}.mt(:any) - Margin utility class string or map. Example:1or%{xs: '1', sm: '2'}.mr(:any) - Margin utility class string or map. Example:1or%{xs: '1', sm: '2'}.mb(:any) - Margin utility class string or map. Example:1or%{xs: '1', sm: '2'}.ml(:any) - Margin utility class string or map. Example:1or%{xs: '1', sm: '2'}.as_child(:boolean) - Composes the component into its immediate child instead of rendering its own HTML element. Defaults tofalse.size(:string) - Card size from 1 to 5. Controls padding and border radius. Defaults to"1". Must be one of"1","2","3","4", or"5".variant(:string) - Visual style variant. One of 'surface', 'classic', or 'ghost'. Defaults to"surface". Must be one of"surface","classic", or"ghost".class(:string) - Additional CSS classes to add to the element. Defaults tonil.style(:string) - Defaults to"".- Global attributes are accepted.
Slots
inner_block(required)