Card
Simple card with header, content, and footer.
Examples
import * as Card from "@solidiom/card"
;<Card.Root>
<Card.Header>
<Card.Title>Welcome</Card.Title>
<Card.Description>A simple card with all standard parts.</Card.Description>
</Card.Header>
<Card.Content>This is the main content area of the card.</Card.Content>
<Card.Footer>Footer section</Card.Footer>
</Card.Root>Minimal
Use only the parts you need. A card with just content is perfectly valid.
;<Card.Root>
<Card.Content>Content only card.</Card.Content>
</Card.Root>Header Only
Use the header parts without a content or footer section.
;<Card.Root>
<Card.Header>
<Card.Title>Card Title</Card.Title>
</Card.Header>
</Card.Root>Get Started
Learn how to integrate Solidiom into your project.
Install the primitives you need and compose them with your own styling. No mandatory design system — bring your own CSS, Tailwind, or UnoCSS.
Documentation →
View source
export function Root(props: CardRootProps) {
return (
<div
class={props.class}
style={props.style}
{...applySemanticAttrs({ scope: "card", part: "root" })}
>
{props.children}
</div>
)
}