Cards

Content containers with Schema.org microdata support and interactive variants.

Variants

Cards come in four variants: default, outlined, elevated, and filled.

The default card variant with standard styling.

A card with a visible border outline.

A card with a shadow to create depth.

A card with a filled background color.

Cards can include images at the top using the CardImage component.

This card includes a header image loaded from a placeholder service.

Cards support a structured layout with CardHeader, CardBody, and CardFooter sections.

This card uses separate header, body, and footer sections with bordered dividers for clear visual separation.

Interactive cards respond to hover and focus events, providing visual feedback to users.

Hover over or focus this card to see the interactive effect. It includes a hover state and focus ring for accessibility.

Cards can render as semantic HTML elements with Schema.org microdata for improved SEO and accessibility.

An exploration of modern voice interface design patterns and how they improve user experience in web applications.

February 25, 2026

Cards work well in grid layouts for presenting collections of content.

Learn the basics of setting up CompositeVoice in your project.

Explore the available STT, LLM, and TTS providers and their configuration options.

Deep dive into event-driven architecture, turn-taking strategies, and pipeline optimization.

Cards can incorporate badges to highlight status or categories.

New

This card uses a Badge in the header area to draw attention to new or important content.