An Introduction to Cards
A Card is a lightweight, flexible content container. It includes options for headers and footers, a wide variety of content, styling, and powerful display options. The Card object was inspired by Bootstrap's v4 Card component.
When used in combination with a flexbox container, multiple cards with different content can have the same height, which normally would be difficult to achieve.
Bootstrap Cards can also be used as Popovers, this basically uses the Card as an advanced tooltip/pop-up box that appears when the user clicks or hovers on an element. Popovers can be placed at the top, right, bottom of left of the container object and can be activated via click, hover or focus.
Buttons support many styling options like background, border, font, padding.
Buttons can be used as a link or trigger an action via events.
The offset between items can be set with margins. It is also possible to use negative top or bottom margin to overlap items.
In this example the margin
In the Card's properties there are options to add a Header, Footer, Text, Buttons, Dividers and/or Images.
A divider can be used to insert a line.
Header / Footer
Add an optional header or footer within a card. The header / footer can be configured as heading (h1, h2 ...)
A header will always be added as the first item. A footer will always be added as the last item, at the bottom of the card.
Add an image to the card. By default the image will be full width, but you can optionally set a width and height. These values are responsive and can be different in breakpoints. An image can either be inline or overlay. When set as overlay it will be rendered behind all other items. You can only use one overlay images per card.
Add text to the card. Text will always be full width. Use padding to add spacing around the text.
If you leave the text field empty and set an icon then it can be used a 'social icon'.
If multiple buttons are added sequentially then they will be displayed in one row.
To display buttons on a different row, they must be separated with a divider. Set the border-radius to 500 to create a round button/icon.
How to line up card items horizontally?
In some cases it may look nicer to have the last items of cards, for example "Read More" buttons lined up horizontally.
This can be done by placing the cards in a card container: (or flexbox container):
- make sure the 'Read More' button of each card is the last card item in the card.
- use a negative bottom-margin, for example -20. This causes the button to align 20 pixels from the bottom of the card.