Skip to main content

Card

A card is a container element used to group together and separate blocks of content.

Demo

Usage​

<Card>Card Content.</Card>

When to use​

  • Group content. Use a card as a container for related content. When there's different areas of content on a page, a card helps to establish boundaries between them.

When not to use​

  • Few items. A card probably isn't necessary to contain one or two items. Everything on a page doesn't need to be wrapped in a card.

API Reference​

Card​

Usage​

To use Card, you can import the component from the @dhis2/ui library

import { Card } from '@dhis2/ui'

Props​

NameTypeDefaultRequiredDescription
childrennode
classNamestring
dataTeststring'dhis2-uicore-card'