CardImage | Mineral UI

CardImage renders images full-bleed inside of a Card. Use CardImage to display static media.

Examples #

Import Syntax #

import Card, { CardImage } from 'mineral-ui/Card';

Note

Cards normally occupy the full available width of their container. The Cards here are width-constrained for illustration purposes.

Displaying an Image in a Card #

CardImages should provide an alt attribute.

Card Title

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec mattis pretium massa. Aliquam erat volutpat. Nulla facilisi.

<DemoLayout>
  <Card>
    <CardImage src="/images/500x281.png" alt="gradient image" />
    <CardTitle>Card Title</CardTitle>
    <CardBlock>{loremIpsum}</CardBlock>
  </Card>
</DemoLayout>

API & Theme #

CardImage Props #

The CardImage component takes the following React props.

Note

CardImage does not have properties of its own. Undocumented properties will be applied to the root element.

Usage #

When/How to Use #

CardImage is used when you want to reinforce the intent of the Card. Images shouldn't be used alone in a Card, but should be paired with a call to action and/or a CardTitle.

If you are putting text over top of the CardImage, use a solid color or an image with sufficient contrast to the text.

Best Practices #

Use the CardImage component with an alt attribute, to provide an adequate experience for all users.

Card Title

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec mattis pretium massa. Aliquam erat volutpat. Nulla facilisi.