MenuCaderno UI
npmGitHub
Theme

<cad-card> family

Card

Group related content. Add only the header, title, body, and footer you need.

With an outer border

Search indexing strategy

Compare query speed, indexing delay, and recovery time.

Ready for review

Without an outer border

The plain variant keeps the section dividers.

Review status

The query tests are complete. Choose an index at the next review.

3 checkpoints complete

Composition

Put a native heading inside cad-card-title to choose its heading level. Import icons and badges separately when using them.

The default paper variant has an outer border. Use variant="plain" for section dividers only. Add folded for a folded corner.

API reference: <cad-card>

foldedfoldedbooleanfalsehrefhrefstring''variantvariantCadCardVariant'paper'tonetoneCadCardTone'neutral'foldedbooleanfoldedyeshrefstringhrefnotoneCadCardTonetoneyesvariantCadCardVariantvariantyes(default)Card composition, usually header, content, and footer elements.baseCard article or anchor.bandOptional hatched band when folded is enabled.foldOptional folded paper corner.--cad-card-accentPer-instance accent color.--cad-card-bgPer-instance paper color.--cad-card-inkPer-instance foreground color.

Accessibility

Do not nest buttons or links inside a linked card. For multiple actions, omit href and put controls in cad-card-footer.

MIT licensed. Built with Caderno UI.Report an issue
Back to top