Cards can be used as a flexible type of container.
Cards can be used as containers. There are several other components that can be used as the content of cards. Most of the time your main content should be in a
bodyis a shorthand for the use case where a
Cardcomponent only has a single
There are also
CardFooter components that can be used as a header and as a footer respectively. Use them only as the first child or as the last child of a card respectively.
CardImg component can be used to embed images into cards. You can pass it most properties that the
img component supports including
height. It also supports
bottom properties that set border-radius of the theme correctly.
Cards come in different colors. Most of the time the default color should be used unless the card is very important and the color communicates the cards intent.
There are the following colors to choose from:
Cards are currently not supported.
inverse property can be used to adjust the text color when the card color is dark. It is recommended to use
inverse when using
Cards in a Grid
Cards are a perfect candidate for structuring data on the screen. An easy way to layout cards is to use a container with a row and a column for each individual cards. Using the properties of
Col the size of the card can be adjusted. As cards by themselves do not have any margin it is often helpful to add an additional
m-2 CSS class to each card to create some spacing between the cards.
Cards in Columns
CardColumns component provides you with another neat way to layout a collection of cards in separate columns. Because this component uses the css grid there are rendering issues on some browsers with the box-shadow that cards might have in certain themes. A workaround might be to decrease the column-gap to zero and use padding instead. As a result of this issue it is currently not recommended to use the