Card header

The CardHeader component is used to render the header of a card. This includes the title text, as well as some other potential elements. The reason you might want to use a CardHeader component is so that you can let it handle the layout styles of the header and to keep the markup within your Card semantic.

How to do it...

Let's say that you're building a card component for users of your application. As the card header, you want to display the user's name. Instead of using a Typography component to render the title using a text variant, you could use a CardHeader component, placed adjacent to the CardContent component. Here's how the code appears:

import React from 'react';

import {...