Cards

Cards contain content and actions about a single subject.

Cards should be easy to scan for relevant and actionable information. Elements, like text and images, should be placed within them in a way that clearly indicates hierarchy.

Basic Card

<Card>
  <CardContent>
    <Typography gutterBottom variant="h3">
      Nelnet
    </Typography>
    <Typography>Customer-focused, high-quality loan servicing for almost 40 years.</Typography>
  </CardContent>
  <CardActions>
    <Button size="small" variant="text">
      Share
    </Button>
    <Button size="small" variant="text">
      Learn More
    </Button>
  </CardActions>
</Card>

<Card>
  <CardContent>
    <Typography gutterBottom variant="h3">
      Nelnet
    </Typography>
    <Typography>Customer-focused, high-quality loan servicing for almost 40 years.</Typography>
  </CardContent>
  <CardActions>
    <Button size="small" variant="text">
      Share
    </Button>
    <Button size="small" variant="text">
      Learn More
    </Button>
  </CardActions>
</Card>

Variants

Remove elevation and replace with a simple border using variant="outlined". You can also remove border-radius with the boolean prop square.

<Grid container spacing={2}>
  <Grid item md={6}>
    <Card variant="outlined">
      <CardContent>
        <Typography gutterBottom variant="h3">
          Outlined Card
        </Typography>
        <Typography>Customer-focused, high-quality loan servicing for almost 40 years.</Typography>
      </CardContent>
      <CardActions>
        <Button size="small" variant="text">
          Share
        </Button>
        <Button size="small" variant="text">
          Learn More
        </Button>
      </CardActions>
    </Card>
  </Grid>
  <Grid item md={6}>
    <Card square>
      <CardContent>
        <Typography gutterBottom variant="h3">
          Square Card
        </Typography>
        <Typography>Customer-focused, high-quality loan servicing for almost 40 years.</Typography>
      </CardContent>
      <CardActions>
        <Button size="small" variant="text">
          Share
        </Button>
        <Button size="small" variant="text">
          Learn More
        </Button>
      </CardActions>
    </Card>
  </Grid>
</Grid>

<Grid container spacing={2}>
  <Grid item md={6}>
    <Card variant="outlined">
      <CardContent>
        <Typography gutterBottom variant="h3">
          Outlined Card
        </Typography>
        <Typography>Customer-focused, high-quality loan servicing for almost 40 years.</Typography>
      </CardContent>
      <CardActions>
        <Button size="small" variant="text">
          Share
        </Button>
        <Button size="small" variant="text">
          Learn More
        </Button>
      </CardActions>
    </Card>
  </Grid>
  <Grid item md={6}>
    <Card square>
      <CardContent>
        <Typography gutterBottom variant="h3">
          Square Card
        </Typography>
        <Typography>Customer-focused, high-quality loan servicing for almost 40 years.</Typography>
      </CardContent>
      <CardActions>
        <Button size="small" variant="text">
          Share
        </Button>
        <Button size="small" variant="text">
          Learn More
        </Button>
      </CardActions>
    </Card>
  </Grid>
</Grid>

Media Card

By default, we use the combination of a div element and a background image to display the media, resulting in needing to define height or width (depending on card orientation).

If you want to display a video or a responsive image, set the component property for these use cases.

If the component prop is defined as an 'img', the image will take up the full width of the card (or card-internal container), and adopt a proportionate height. This potentially will result in a stretched image, or — if multiple cards are in use — variance in image height if not using a pre-constrained image size.

We recommend that you either:

Set the image constraints application-wide so that the CardMedia component can have an explicitly set height; or
Set the CardMedia component to img and enforce a consistent image size or ratio.

These settings reduce variability.

<Card>
  <CardMedia
    style={{ height: 175 }}
    image="https://via.placeholder.com/300x175?text=image"
    title="Nelnet"
  />
  <CardContent>
    <Typography gutterBottom variant="h3">
      Nelnet
    </Typography>
    <Typography>Customer-focused, high-quality loan servicing for almost 40 years.</Typography>
  </CardContent>
  <CardActions>
    <Button size="small" variant="text">
      Share
    </Button>
    <Button size="small" variant="text">
      Learn More
    </Button>
  </CardActions>
</Card>

<Card>
  <CardMedia
    style={{ height: 175 }}
    image="https://via.placeholder.com/300x175?text=image"
    title="Nelnet"
  />
  <CardContent>
    <Typography gutterBottom variant="h3">
      Nelnet
    </Typography>
    <Typography>Customer-focused, high-quality loan servicing for almost 40 years.</Typography>
  </CardContent>
  <CardActions>
    <Button size="small" variant="text">
      Share
    </Button>
    <Button size="small" variant="text">
      Learn More
    </Button>
  </CardActions>
</Card>

Complex Interaction

class InteractiveCard extends React.Component {
  constructor(props) {
    super(props);
    this.handleExpandClick = this.handleExpandClick.bind(this);
    this.state = { expanded: false };
  }

  handleExpandClick() {
    this.setState((state) => ({ expanded: !state.expanded }));
  }

  render() {
    return (
      <Card>
        <CardHeader
          avatar={<Avatar aria-label="Recipe">R</Avatar>}
          action={
            <IconButton>
              <MoreVert />
            </IconButton>
          }
          title="Razzle Dazzle Cupcakes"
          subheader="January 31, 2018"
        />
        <CardMedia
          style={{ height: 0, paddingTop: '31.25%' }}
          image="https://via.placeholder.com/400x125"
          title="Media"
        />
        <CardContent>
          <Typography>Cupcake ipsum dolor sit amet chocolate cake toffee apple pie.</Typography>
        </CardContent>
        <CardActions disableSpacing style={{ display: 'flex' }}>
          <IconButton aria-label="Add to favorites">
            <Favorite />
          </IconButton>
          <IconButton aria-label="Share">
            <Share />
          </IconButton>
          <IconButton
            margin={{ left: 'auto' }}
            onClick={this.handleExpandClick}
            aria-expanded={this.state.expanded}
            aria-label="Show more"
          >
            <ExpandMore />
          </IconButton>
        </CardActions>
        <Collapse in={this.state.expanded} timeout="auto" unmountOnExit>
          <CardContent>
            <Typography paragraph>Method:</Typography>
            <Typography paragraph>
              Pudding halvah pie sweet roll. Tiramisu liquorice bear claw lollipop oat cake. Cookie
              candy canes caramels dragée macaroon chocolate cake marzipan. Caramels muffin chupa
              chups gummi bears.
            </Typography>
            <Typography paragraph>
              Danish lemon drops pastry. Macaroon powder jujubes donut gummi bears. Candy
              marshmallow biscuit sweet roll cake. Brownie sweet chocolate cake donut pastry
              croissant.
            </Typography>
            <Typography paragraph>
              Marzipan lemon drops cookie lollipop soufflé dessert icing gummies halvah. Cookie
              sweet roll dessert candy canes bonbon.
            </Typography>
          </CardContent>
        </Collapse>
      </Card>
    );
  }
}

class InteractiveCard extends React.Component {
  constructor(props) {
    super(props);
    this.handleExpandClick = this.handleExpandClick.bind(this);
    this.state = { expanded: false };
  }

  handleExpandClick() {
    this.setState((state) => ({ expanded: !state.expanded }));
  }

  render() {
    return (
      <Card>
        <CardHeader
          avatar={<Avatar aria-label="Recipe">R</Avatar>}
          action={
            <IconButton>
              <MoreVert />
            </IconButton>
          }
          title="Razzle Dazzle Cupcakes"
          subheader="January 31, 2018"
        />
        <CardMedia
          style={{ height: 0, paddingTop: '31.25%' }}
          image="https://via.placeholder.com/400x125"
          title="Media"
        />
        <CardContent>
          <Typography>Cupcake ipsum dolor sit amet chocolate cake toffee apple pie.</Typography>
        </CardContent>
        <CardActions disableSpacing style={{ display: 'flex' }}>
          <IconButton aria-label="Add to favorites">
            <Favorite />
          </IconButton>
          <IconButton aria-label="Share">
            <Share />
          </IconButton>
          <IconButton
            margin={{ left: 'auto' }}
            onClick={this.handleExpandClick}
            aria-expanded={this.state.expanded}
            aria-label="Show more"
          >
            <ExpandMore />
          </IconButton>
        </CardActions>
        <Collapse in={this.state.expanded} timeout="auto" unmountOnExit>
          <CardContent>
            <Typography paragraph>Method:</Typography>
            <Typography paragraph>
              Pudding halvah pie sweet roll. Tiramisu liquorice bear claw lollipop oat cake. Cookie
              candy canes caramels dragée macaroon chocolate cake marzipan. Caramels muffin chupa
              chups gummi bears.
            </Typography>
            <Typography paragraph>
              Danish lemon drops pastry. Macaroon powder jujubes donut gummi bears. Candy
              marshmallow biscuit sweet roll cake. Brownie sweet chocolate cake donut pastry
              croissant.
            </Typography>
            <Typography paragraph>
              Marzipan lemon drops cookie lollipop soufflé dessert icing gummies halvah. Cookie
              sweet roll dessert candy canes bonbon.
            </Typography>
          </CardContent>
        </Collapse>
      </Card>
    );
  }
}

Customized Card Layout

Here is a media card leveraging Grid to create a custom layout.

<Card>
  <Grid container justify="space-between">
    <Grid item xs={8} md={9}>
      <CardContent>
        <Typography variant="h5" gutterBottom>
          <Link href="#" underline="always">
            Hello, I'm Anna
          </Link>
        </Typography>
        <Typography variant="body1" color="textSecondary">
          I love sticking my tongue out when I smile.
        </Typography>
      </CardContent>
    </Grid>
    <CardMedia
      component={(props) => <Grid item xs={4} md={3} {...props} />}
      image="https://images.prismic.io/unifi/76fdb179-2695-40e0-b197-f0a913eb3d5c_Anna.jpg"
      title="Anna"
    />
  </Grid>
</Card>

<Card>
  <Grid container justify="space-between">
    <Grid item xs={8} md={9}>
      <CardContent>
        <Typography variant="h5" gutterBottom>
          <Link href="#" underline="always">
            Hello, I'm Anna
          </Link>
        </Typography>
        <Typography variant="body1" color="textSecondary">
          I love sticking my tongue out when I smile.
        </Typography>
      </CardContent>
    </Grid>
    <CardMedia
      component={(props) => <Grid item xs={4} md={3} {...props} />}
      image="https://images.prismic.io/unifi/76fdb179-2695-40e0-b197-f0a913eb3d5c_Anna.jpg"
      title="Anna"
    />
  </Grid>
</Card>

Customized Clickable Layout

This example also shows how to use the CardActionArea component to enable the entire card surface as clickable. Screen readers will read all display and image alternative text, so keep the content brief inside CardActionArea. Use CardActionArea sparingly, reserving for cases when the intent of the card as a clickable element is clear from context in the layout.

Note: Implementation will require an onClick function to define the action for CardActionArea to take.

<Card>
  <CardActionArea style={{ display: 'flex', justifyContent: 'space-between' }}>
    <CardContent style={{ flexBasis: '80%' }}>
      <Typography variant="h5" gutterBottom>
        Hi, I'm Solo
      </Typography>
      <Typography variant="body1" color="textSecondary">
        My teefs are white & perfectly straight.
      </Typography>
    </CardContent>
    <CardMedia
      style={{ flexBasis: '20%' }}
      component="img"
      image="https://images.prismic.io/unifi/48143592-3ec0-48d9-89e8-3ca1b1be9ea9_Solo.jpg"
      title="Solo"
    />
  </CardActionArea>
</Card>

<Card>
  <CardActionArea style={{ display: 'flex', justifyContent: 'space-between' }}>
    <CardContent style={{ flexBasis: '80%' }}>
      <Typography variant="h5" gutterBottom>
        Hi, I'm Solo
      </Typography>
      <Typography variant="body1" color="textSecondary">
        My teefs are white & perfectly straight.
      </Typography>
    </CardContent>
    <CardMedia
      style={{ flexBasis: '20%' }}
      component="img"
      image="https://images.prismic.io/unifi/48143592-3ec0-48d9-89e8-3ca1b1be9ea9_Solo.jpg"
      title="Solo"
    />
  </CardActionArea>
</Card>

Cards

Basic Card

Variants

Media Card

Complex Interaction

Customized Card Layout

Customized Clickable Layout

Properties

<Card />

<CardActionArea />

<CardActions />

<CardContent />

<CardHeader />

<CardMedia />