TOC => Cards

Cards

Cards provide a flexible and extensible content container with multiple variants and options.

This is an example of a basic card. By default, the card has a title and a body like this one, but you can add other elements like headers, footers & images!

Example Card Title

This is the body of the card. It can contain most basic HTML elements, including text, images, lists and links.

The Card Admin Panel

A Card's settings are organized into three tabs: Content, Layout and Style.

   The Content Tab

Title

The title is the internal name of the card, and may also be displayed inside the card as a heading element.

Display Title checkbox

Check this box if you want the title filed to be displayed as a headline in the body of the card.

Subtitle

This text will appear as a secondary headline element in the card body.

Header Text

The card header spans the entire top of the card and is separated from the body with a border by default.

Footer Text

The card footer spans the entire bottom of the card and is separated from the body with a border by default.

Background Color

You may choose any valid CSS color code for the background of the card.

Image Display

This incorporates an image into the card layout. it may be aligned to the top, bottom, left or right. It may also be used as the card's background.

Card Image

Use this control to specify the Media asset you want to use as the card image.

HTML Body

This is the content that will be displayed in the main body of the card. It is edited in a WYSIWYG editor, and may contain most HTML elements including text, images & links.


   Content Layout Examples

   Below are some examples of layouts achieved by using the settings on the Content tab:

Example Card Title
Example Card Subtitle

This is an example of a card with both a Title and a Subtitle displayed. It also has a custom color set for its background.

This card has both a header and a footer.

The body of this card has no headlines and contains rich text

This card has both a footer and a header.
Top Image

This is card with the Image Display set to 'Top Image'. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

Bottom Image

This is card with the Image Display set to 'Bottom Image'. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

moo
Image Overlay

This is card with the Image Display set to 'Overlay'.


Text in these cards can be tricky.

...
Horizontal Card

This Card has an Image set to 'Left'.  This creates a horizontally oriented card.  Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

 
  The Layout Tab


      Padding

      This will add space around the inside of the accordion container. The following values are available:

  • p-1 thru p-5: pads all sides
  • py-1 thru py-5: pads the top and bottom
  • pt-1 thru pt-5: pads the top
  • pb-1 thru pb-5: pads the bottom
  • px-1 thru px-5: pads the right and left
  • ps-1 thru ps-5: pads the left
  • pe-1 thru pe-5: pads the right

       See the Bootstrap docs for details on spacing classes.

      Margin

      This will add space around the outside of the accordion container. The following values are available:

  • m-1 thru m-5: pads all sides
  • my-1 thru my-5: pads the top and bottom
  • mt-1 thru mt-5: pads the top
  • mb-1 thru mb-5: pads the bottom
  • mx-1 thru mx-5: pads the right and left
  • ms-1 thru ms-5: pads the left
  • me-1 thru me-5: pads the right

      See the Bootstrap docs for details on spacing classes.


   The Style Tab


      Drop Shadow

      This will apply a drop shadow to the accordion.  you may choose between: no shadow, small shadow, default shadow or large shadow.

      Border Color

      This allows you to set the card's border color to any of Bootstrap's theme colors: Primary, Secondary, Success, Danger, Warning, Info, Light, Dark, White or default

      Border Width

      You may make the border of the card. valuses are: default, None, or a value of 1 thru 5.

      Border Radius

      This changes the radius of the corners of your card. Available values are: default, None, Pill, Circle or a value of 1 thru 3.

Drop Shadows

This card has a default Drop Shadow. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

Colored Borders

This card has its border color set to 'Warning'. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

Wide Borders

This card has its Border Width set to 4. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

Rounded Corners

This card has its Border Radius set to 'Pill'. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt  magna aliqua.

Page Contents
Back to TOC

The Card Widget

add more things