Card · ui.voila.dev

Product designer — Launch week

Northgate Labs · Saturday, June 20

Open

End-to-end design support for the launch sprint, including asset production and final design QA.

<Card.Root>
	<Card.Header>
		<Card.Title>Brand designer — Launch week</Card.Title>
		<Card.Description>Northwind Studio · Saturday, June 20</Card.Description>
		<Card.Action><Badge>Open</Badge></Card.Action>
	</Card.Header>
	<Card.Content>…</Card.Content>
	<Card.Footer className="justify-end gap-2">
		<Button size="sm">Apply</Button>
	</Card.Footer>
</Card.Root>

Card.Action goes inside the header, not after it — the header is a grid and the action occupies its right-hand column.

An <img> as the card's first child is detected and bled to the edges, so a cover image needs no wrapper.

API

Card.Root

Prop	Type	Default
`size`	`"default" \| "sm"`	`"default"`
`render`	`ComponentRenderFn<HTMLProps, {}>` \| `ReactElement<unknown, string \| JSXElementConstructor<any>>`	—	Allows you to replace the component's HTML element with a different tag, or compose it with another component. Accepts a `ReactElement` or a function that returns the element to render.

Plus every <div> prop. Source: card/components/card-root.tsx.

Card.Action

Prop	Type	Default
`render`	`ComponentRenderFn<HTMLProps, {}>` \| `ReactElement<unknown, string \| JSXElementConstructor<any>>`	—	Allows you to replace the component's HTML element with a different tag, or compose it with another component. Accepts a `ReactElement` or a function that returns the element to render.

Plus every <div> prop. Source: card/components/card-action.tsx.

Card.Content

Prop	Type	Default
`render`	`ComponentRenderFn<HTMLProps, {}>` \| `ReactElement<unknown, string \| JSXElementConstructor<any>>`	—	Allows you to replace the component's HTML element with a different tag, or compose it with another component. Accepts a `ReactElement` or a function that returns the element to render.

Plus every <div> prop. Source: card/components/card-content.tsx.

Card.Description

Prop	Type	Default
`render`	`ComponentRenderFn<HTMLProps, {}>` \| `ReactElement<unknown, string \| JSXElementConstructor<any>>`	—	Allows you to replace the component's HTML element with a different tag, or compose it with another component. Accepts a `ReactElement` or a function that returns the element to render.

Plus every <div> prop. Source: card/components/card-description.tsx.

Card.Footer

Prop	Type	Default
`render`	`ComponentRenderFn<HTMLProps, {}>` \| `ReactElement<unknown, string \| JSXElementConstructor<any>>`	—	Allows you to replace the component's HTML element with a different tag, or compose it with another component. Accepts a `ReactElement` or a function that returns the element to render.

Plus every <div> prop. Source: card/components/card-footer.tsx.

Card.Header

Prop	Type	Default
`render`	`ComponentRenderFn<HTMLProps, {}>` \| `ReactElement<unknown, string \| JSXElementConstructor<any>>`	—	Allows you to replace the component's HTML element with a different tag, or compose it with another component. Accepts a `ReactElement` or a function that returns the element to render.

Plus every <div> prop. Source: card/components/card-header.tsx.

Card.Title

Prop	Type	Default
`render`	`ComponentRenderFn<HTMLProps, {}>` \| `ReactElement<unknown, string \| JSXElementConstructor<any>>`	—	Allows you to replace the component's HTML element with a different tag, or compose it with another component. Accepts a `ReactElement` or a function that returns the element to render.

Plus every <div> prop. Source: card/components/card-title.tsx.