![](assets/img/generic/rectangle-1.jpg)
This is a simple card with an image.
--- title: Card description: Cards are a popular and flexible UI component. video: 'OMwg8UsrLrM' sass: scss/components/_card.scss tags: - card flex: true --- ## Basics A card is just an element with a `.card` class applied. You can put any kind of content inside. Make sure you wrap your content in a `.card-section` element in order to achieve the traditional card look. A card container has no padding, allowing you to place full-bleed images inside. Use the `.card-divider` and `.card-section` classes to sub-divide a card.
```html_exampleIt has an easy to override visual style, and is appropriately subdued.
Browser Bug (IE 11 - Flexbug): On IE 11, when using the card with image, you may see a lot of whitespace under each image that happens to match the original image size. The bug can be reproduced here on an IE11 browser. Use .card-image
class to wrap your image to resolve this.
This card makes use of the card-divider element.
This is a simple card with an image.
This is a simple card with an image inside a `.card-section`.
This is a simple card with an image.
This is a simple card with an image inside a `.card-section`.
Images work just fine below the content too!
Images work just fine below the content too!
This row of cards is embedded in an X-Y Block Grid.
It has an easy to override visual style, and is appropriately subdued.
It has an easy to override visual style, and is appropriately subdued.
This row of cards is embedded in an Flex Block Grid.
It has an easy to override visual style, and is appropriately subdued.
It has an easy to override visual style, and is appropriately subdued.