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.
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.
In the Card's properties there are options to add a Header, Footer, Text, Buttons, Dividers and/or Images.
Button
Buttons support many styling options like background, border, font, padding.
Buttons can be used as a link or trigger an action via events.
Buttons support many styling options like background, border, font, padding.
Buttons can be used as a link or trigger an action via events.
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.
Divider
A divider can be used to insert a line.
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 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.
Image
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 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.
Text
Add text to the card. Text will always be full width. Use padding to add spacing around the text.
Add text to the card. Text will always be full width. Use padding to add spacing around the text.
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 this example the margin
Card Decks
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.
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.
Popover
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.
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.
You can view a live demo here:
http://www.quickandeasywebbuilder.com/support/cards
Download the demo project:
http://www.quickandeasywebbuilder.com/support/cards/cards.zip
http://www.quickandeasywebbuilder.com/support/cards
Download the demo project:
http://www.quickandeasywebbuilder.com/support/cards/cards.zip
