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

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:
https://quickandeasywebbuilder.com/ecommerce_cards.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.

Popover

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.

Copyright 2024 Quick 'n Easy Web Builder
Follow us on: