The Ultimate Toolbox for creating
amazing web sites!

An Introduction to Cards

A Card is a lightweight content container, offering a rich array of features. It comes equipped with customizable headers and footers, a diverse range of content options, versatile styling, and robust display capabilities. The design philosophy behind the Card object draws inspiration from Bootstrap's Card component, providing a seamless and user-friendly way to organize and present content.
The Card support different content types, like Header, Footer, Text, Buttons, Dividers, Video and/or Images.


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.


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.

Other content types

In addition to the aforementioned content types, cards also provide support for custom HTML, video integration, list items, and ecommerce functionality. There is a dedicated tutorial to guide you through the process of using the eCommerce tools:

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.


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.

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.


Card Container

A Card Container is a dedicated object to simplify laying out a series of cards. It has the following layout options:




Card Container Demos

Card Repeater

A Card Repeater operates similarly to a Card Container, with a key distinction: all cards within it share the same layout and style. This means that any modification made to one card will automatically propagate to all other cards within the same container.

For instance, if you add a button to one card, it will simultaneously appear in all the other cards. Removing an item will have the same effect, as it will be removed from every card within the repeater. Similarly, adjustments to the style attributes, such as font size, background color, or borders, will be uniformly applied to all cards.

Furthermore, duplicating a selected card is a breeze – simply click the clone button to create an identical copy.

Please note that due to the uniformity in layout and structure, you cannot drag and drop a card into a Card Repeater if it possesses a different configuration. The Card Repeater excels in maintaining consistency across its cards, ensuring a harmonious and synchronized design.