Note: Image is not to scale
Although a card defaults to the size of container it resides in, the dimensions and layout of a card depend entirely on its contents. Use the
css property to designate styling for your specific needs.
Cards are a greate way to group related content together.
An empty box with infinite possibilities
Cards can hold virtually any combination of elements/components. Mix and match to create a contained experience.
Test how it scales
Cards can hold so many elements/components, but with that freedom comes the responsibility of testing the responsiveness of the card.
Use unordered lists and list items for cards in a collection. This allows screen readers to parse the items as a list. The order of elements inside a card should be logical, and each interactive element should have an apparent hover state.
|children||The nested elements inside Card|