The Complete Guide to the Material-UI Card Header

The Material-UI Card Header component is a versatile component that can make Card layouts look great. Naturally I wondered: what does a Card look like with every single prop enabled?

There are nine total props on the card header; I’ve actually only enabled eight of them because the disableTypography prop actually turns off two other props (titleTypographyProps and subheaderTypographyProps).

Even after making use of all possible props in the Header, the Card component doesn’t look too overdone:

The Code Sandbox link with full React code is in the Resources section. Here’s how to add background color and mobile responsiveness to MUI Card.

Here’s a YouTube version of this article or watch below:

Card Header Action

The Material-UI Card Header Action prop is cryptically described as “The action to display in the card header” by the docs. The prop name sounds like it is a verb and would control a click event.

However, the action prop type is node and when examining the card header in dev tools, we see that the action prop actually renders whatever component is passed to it.

In our demo, I passed in an icon button and icon, and call a click handler. This is typical functionality.

action={
  <IconButton aria-label="settings">
    <EditIcon onClick={(event) => handleClick()} />
  </IconButton>
}

However, almost any kind of component could be passed to this prop.

Hint: don’t confuse CardHeader action prop with the CardActions component.

Card Header Avatar

The avatar prop is intended for placing an avatar picture on the left side of the card header. However, the avatar prop type is node, which means it can accept any component.

Comparing the action prop and avatar prop, there’s no difference except for the default styling applied to each in order to position the wrapping div. Also, each has a unique class automatically applied. For avatar, the class is .MuiCardHeader-avatar.

I simply used an avatar component in this demo.

avatar={
  <Avatar className={classes.avatar}></Avatar>
}

Learn more about MUI Avatar Styling here.

Card Header Classes

The classes prop provides a way to use the Material-UI Styling API.

I created a subheader class using makeStyles. This is just like creating a class that will be used with a className prop.

Applying it looks slightly different because the classes prop accepts the class as an object instead of a string. The string value of the class must be paired with a key.

classes={{ subheader: classes.subheader }}

Card Header Component

The component prop receives a either an element (in string form like ‘div’) or a component. It then uses this element or component as the root node of the Header.

I chose the Box component:

component={Box}

We can see below that now Box classes are applied to the root node.

I investigated whether Box props could be passed and applied, but I was unable to find a way. Maybe this means it’s not possible, or maybe it simply means I couldn’t figure it out.

Card Header Title and Subheader

The title and subheader props receive a node (element or component), but if passed a string they will render that as well.

Both the subheader and the title props render their payload inside of a span (which is actually a Typography component, more about this below). Out of curiosity, I passed a div with text. The div rendered inside the span:

subheader={<div>And a centered subheader!</div>}

The div here doesn’t add any value, but the benefit of passing in an element is that you could add custom styling or behavior, for example a click listener.

If you pass a custom element, you probably want to turn off the subheader typography by setting disableTypography=false.

Card Header TitleTypographyProps and SubheaderTypographyProps

If you leave the Typography component wrapper enabled, you can pass props to it via titleTypographyProps and subheaderTypographyProps.

For example, I passed the following:

titleTypographyProps={{
variant: "h5",
align: "center"
}},
subheaderTypographyProps={{
  variant: "h6",
  align: "center",
  color: "secondary",
  gutterBottom: true
}}

This styled the title and subheader to center aligned and larger text, plus added color: #f50057 to the subheader.

Take a look at the Typography component and it’s API to see what props are available.

Resources

My MUI course on Udemy is now available!!! Build a full MUI app from beginning to end, learn every aspect of the sx prop, styled API, and the theme, and tackle the most challenging components! Do you want an active Q&A with me?!? Check here for coupons for my MUI course on Udemy.

Code Sandbox Link

Test your JavaScript knowledge with these 50 challenging JavaScript questions!

Here’s how to add video and image media to Cards.

MUI Docs Link