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'