Cards are used to display information elevated from the main background.

:choco-info: Reference Bootstrap

Choco-theme respects all Bootstrap Card documentation.

Cards as Links

When a card is used as a link, meaning the whole element should be clickable, then the card will have a transition on hover. A card-link class is added to the containing element that has the class card. The stretched-link class is added to the <a> tag.

Cards with Blur (Glass Effect)

This works best when it is on top of an image. The background of the card is slightly opaque and it will blur the background image. This card is used mostly on the home pages of chocolatey.org as of now.

Featured Cards

This card type can be used when it is among other cards and needs to stand out, or when the card has "featured" content on it. A good example of this can be found on the docs home page for the "Highlights" area.