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.

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.


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.


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.


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.


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

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

asElementTypeHTML tag or React Component to render the component as.
childrenReactNodeComponents and content for the Card.
classNamestringAdditional CSS classes.
forwardedAsElementTypeHTML tag or React Component to finally render the component as.
onClick(event: any) => voidCallback for onClick event.
rolestring"region" HTML role attribute for accessibility.

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

      •       '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
      •     }
    •   }