Cards are built with as little markup and styles as possible, but still manage to deliver a ton of control and customization. Built with flexbox, they offer easy alignment and mix well with other components.
Cards include their own variant style for quickly changing the
background-color and of a card via the bg-variant and
border- props. Darker solid variants my require
setting the prop variant to adjust the text color.
Using a combination of grid components, utility classes and individual card sub-components, cards can be made horizontal in a mobile-friendly and responsive way.
Place the image in the background of the card by setting the
boolean prop overlay: