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.

Button

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.

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.

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.

Text

Add text to the card. Text will always be full width. Use padding to add spacing around the text.

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.

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.

You can view a live demo here:
http://www.wysiwygwebbuilder.com/support/cards

Download the demo project:
http://www.wysiwygwebbuilder.com/support/cards/cards.zip

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.

Demo:
https://www.wysiwygwebbuilder.com/support/cardsalign.html

Card Container

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.

carousel
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

masonry
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.

grid
Easily create a grid (columns / rows) with cards.

portlets
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.
coverflow
Display the cards in a 3D cover flow carousel.
stack
Display the cards stacked on top of each other.
cube
Display the cards in a 3D cube.
flip
One card is visible at a time. A 'flip' transition will be used to switch between cards.

Card Container Demos

https://www.wysiwygwebbuilder.com/support/wb15tryouts/card-container.html
https://www.wysiwygwebbuilder.com/support/wb16tryouts/masonry-demo.html
https://www.wysiwygwebbuilder.com/support/wb17tryouts/wb17_portlets.html
https://www.wysiwygwebbuilder.com/support/wb18tryouts/wb18_cardcontainer.html
https://www.wysiwygwebbuilder.com/support/wb16tryouts/wb16_rolloverlayer_cards.html

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.

The Ultimate Toolbox for creating amazing web sites!