CardMedia

Container for an image illustrating the card, for example on a list of blog posts.

Storybook documentation (opens in new tab)

React

<CardMedia image="{/* insert content */}" />

CSS

<div class="card_media">
  <div class="card_mediaInner" style="background-image: url("");"></div>
</div>  

Props

Width

Override the default width of the image (when used on a Card with direction="landscape" prop).

React

<CardMedia width={200} image="{/* insert content */}" />

CSS

<div class="card_media">
  <div class="card_mediaInner" style="background-image: url(""); width: 200px;"></div>
</div>  

Height

Override the default height of the image.

React

<CardMedia height={200} image="{/* insert content */}" />

CSS

<div class="card_media">
  <div class="card_mediaInner" style="background-image: url(""); height: 200px;"></div>
</div>  

FullWidth

Remove the gutter around the image.

Full width

React

<CardMedia fullWidth image="{/* insert content */}" />

CSS

<div class="card_media card_media-fullWidth">
  <div class="card_mediaInner" style="background-image: url("");"></div>
</div>