Cards

The Card Widget holds information. It can include images, headers, footers, and more.Cards are usually displayed in groups, see the " Card Groups " page for more information.

The Card Widget appears with the same image as the Image Widget. When viewed in the Page Editor, it appears as a larger container than the Image Widget. Double-click on the Card Widget, as seen above, to access its advanced properties.

  • Show Header.  Display an area at the top of the component where you can drag other objects (usually icons or text)

  • Show Footer. Display a box at the bottom of the component where you can drag other objects (usually icons or text)

  • Flat Style. Remove the rounded edges by default

  • No Padding. If this option is checked, the objects contained in the Card object will be displayed using all available space. Otherwise an inside margin will be used.

  • Show Image. If this option is unchecked, then the component won’t display an image.
    There are four available options for displaying an image:

     1. Top : The image is displayed under the Header at the top of the Card.
     2. Bottom : the image is displayed at the bottom of the component, above the Footer.
     3. Overlay : The image is displayed using all available space.
     4. Cover : The image is displayed at the top of the Card Widget. It's height is adjustable.

  • Flat Style. Remove the rounded edges by default

Card Header
...

This is the Card Content

Card Examples


References:

arrow_right_circle_fill

Bootstrap Reference: https://getbootstrap.com/docs/4.3/components/card/

Copyright©  Nymphide Lab 2020 - All Rights Reserved 

...