Card
CSS
Card classes are used on native HTML elements.
Classes
CSS Class | Host Element(s) | Type | Description | Required |
---|---|---|---|---|
.card | div | layout | Parent container of card elements. | yes |
.card-header | div | layout | Child element of .card for header content | no |
.card-block | div | layout | Child element of .card for header content | no |
.card-footer | div | layout | Child element of .card for footer content | no |
.clickable | div | feature | Adds (css only) visual and mouse treatments that indicate clickability. Must be paired with .card class. | no |
.card-img | div | layout | Elements with .card-img can be places anywhere in the card or it can occupy the entire card. | no |
.card-media-block | div | layout | Container for a media block group of elements - image, description (title & text). | no |
wrap | div | layout | Paired with the .card-media-block class it moves the .card-media-description container below the image. | no |
.card-media-image | div | layout | Child element of .card-media-block for sizing and positioning images. | yes for .card-media-block containers |
.card-media-description | div | layout | Child element of .card-media-block containing title and text children elements. | yes for .card-media-block containers |
.card-media-title | div | content | Child element of .card-media-description. | yes for .card-media-block containers |
.card-media-text | div | content | Child element of .card-media-description. | yes for .card-media-block containers |
.card-text | div | content | Child element of the .card-block. | no |