Card

Cards represent a complete collection of information about an entity or region. They are used to visually group blocks of content or interactions together.

For more information on how to use the features and props for this component, check out the developer documentation.

Usage

The Card component is an <article/> that is designed to elevate content against a non-primary color background. It will render any children passed to it and will grow or shrink in size accordingly.

Anatomy

Media

The CardMedia component is intended to wrap Images, videos, or audio content. It will stretch the content to the full width of the Card. While it can be used anywhere within a Card, it is best utilized at the top, above any header.

Header

The CardHeader component will render its content, typically Text, at the top of a Card. If actions are provided, they will render inline with the other header content.

Content

The CardContent component is a Flex container capable of accepting any Flex container props. It is reccommended to use the CardContent component to wrap any content in order to apply proper padding throughout the Card.

Footer

The CardFooter component will render its children at the bottom of a Card. This content can be aligned using the justify prop.

Full demo

The following demo combines all of the Card components discussed above to create a full representation of a Card.

Properties

Name	Type	Default	Description
`as`	`ElementType`		HTML tag or React Component to render the component as.
`children`	`ReactNode`		Components and content for the Card.
`className`	`string`		Additional CSS classes.
`forwardedAs`	`ElementType`		HTML tag or React Component to finally render the component as.
`onClick`	`(event: any) => void`		Callback for onClick event.
`role`	`string`	`"region"`	HTML role attribute for accessibility.

Custom theming

You can override the styles of the Card component by setting a custom theme on the Configuration component.

Theme properties

{      'border-radius': 'base.border-radius', // → base.border-radius
      background: 'base.palette.primary-background', // → base.palette.primary-background
      padding: 'base.spacing', // → base.spacing
      'border-color': 'base.palette.interactive' // → base.palette.interactive
    }
  }
}