Components / Card

Card

A compositional surface with header, title, description, content, actions and footer.

Design system

Local source, ready to adapt.

Change tokens or edit the template directly.

Updated today

example.component.html

html

<aevko-card class="border-dashed rounded-none bg-transparent">
  ...
</aevko-card>

Installation

npx aevko-ui@latest add card --yes

Source ownership

Compose only the regions the design needs. Each primitive accepts consumer classes, making transparent, bordered or editorial cards straightforward.

Edit locallyThe installed template and stylesheet are application code, not a black box.

Theme semanticallyOverride --aevko-* tokens or ordinary classes without !important.

Property or slot	Type	Default	Description
`AevkoCard`	`component`	`required`	Surface and layout root.
`AevkoCardHeader`	`component`	`optional`	Groups title, description and actions.
`AevkoCardTitle`	`component`	`optional`	Primary title content.
`AevkoCardDescription`	`component`	`optional`	Supporting title copy.
`AevkoCardContent`	`component`	`optional`	Main projected content.
`AevkoCardActions`	`component`	`optional`	Header-level actions.
`AevkoCardFooter`	`component`	`optional`	Trailing metadata or actions.

Accessibility contract

Card adds no landmark role.
Choose a semantic wrapper in content when it represents an article, region or form.

Add an article, region or form landmark only when the card content genuinely has that meaning.