How it works...

This example uses the CardContent component as the key organizational unit within Card. Everything else is up to you. For example, the card in this example uses three Typography components to render three different styles of text as the card's content.

The first Typography component uses the h4 variant and serves as the card's title. The second Typography component serves as the subtitle of the card and uses the subtitle1 variant. Lastly, there's the main content of the card, which uses the Typography default font. There is a marginTop style set on this text so that it's not pushed up against the subtitle.

Get React Material-UI Cookbook now with O’Reilly online learning.

O’Reilly members experience live online training, plus books, videos, and digital content from 200+ publishers.