Cards and additional components
Find cards, charts, maps, embedded web content, and supporting interface elements.
The library contains more than basic text and inputs. Use its Cards and Other groups when an existing component fits the information you need to display.
Cards
The active choices are Card, Horizontal Card, Profile Card, Product Card, Feature Card, and Stats Card. Replace sample content and connect the actual data rather than assuming a Product Card already has a checkout flow.
Other components
The active choices are Carousel, Timeline, Accordion, Progress Bar, Tooltip, Stepper, Avatar, Google Maps, Chart, and Web embedded.
Add the component, select it, and configure its available settings. Some components need a source, options, data, or a connection before they become useful.
Test the real task
A chart needs accurate data and understandable labels. An embedded page needs a URL that allows embedding. A map may require its configured provider credentials. Verify loading and failure states in the published browser app.
Use an Accordion to reduce scanning effort when details are optional. Keep the most important instructions visible rather than hiding the only explanation of how to finish a task.