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.
A divider can be used to insert a line.
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:
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.
A Card Container is a dedicated object to simplify laying out a series of cards. It has the following layout options:
- card deck
Automatically aligns the cards horizontally with equal width and height. Even with different content lengths!
Basically, card deck is just a simplified version of a Flex Container where the flexbox properties of the Card will be forced to
flexgrow: 1, flexshrink: 1, flexbasis: 0%
- card columns
Organize the cards into columns. Cards are ordered from top to bottom and left to right.
Displays the cards in an animated carousel. The number of cards per slide and spacing is configurable per breakpoint. It is also possible to set how many cards will be scrolled per page. The card carousel can be controlled via events: media play, media stop, slideshow next, slideshow previous
Cards will be dynamically rearranged based on the available space in the browser window. Masonry measures all of the items and rearranges them in the best way with what is spatially available. You can configure different column counts in breakpoints.
Easily create a grid (columns / rows) with cards.
In portlets mode, the visitor of the website can rearrange cards via drag & drop. Also, cards can be hidden or expanded/collapsed. The state of the portlets will be saved for the next time the user visits the website.
Display the cards in a 3D cover flow carousel.
Display the cards stacked on top of each other.
Display the cards in a 3D cube.
One card is visible at a time. A 'flip' transition will be used to switch between cards.
Card Container Demos
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.