Content Row: Cards

A card is a small “card like” group of information.

card example

Card Layouts

There are three card layouts to select: Card Columns, Card Group, or Card Deck.

Card Columns

This layout allows for an unlimited number of cards.  The cards resize (like on Pinterest).

card columns

Card Group

In the Card Group layout, the cards are the same size and are attached to one another.

The layout is limited to 3 for 4 cards.  Otherwise each card will be too small.  Also the presence of a side menu reduces the area for the cards.

card group

 

Card Deck

In the Card Group layout, the cards are the same size but are not attached to one another.

The layout is limited to 3 for 4 cards.  Otherwise each card will be too small.  Also the presence of a side menu reduces the area for the cards.

card deck

 

Form for adding cards

The form lets you select the layout and the number of cards. 

  • Card columns – you may create unlimited number of cards.
  • Card deck or card group – (with side bar) limit to 3 cards. (with full-width) limit to 4 cards.

card form

First select the layout for the cards.  Each card shows as a row.You can rearrange the cards by using the arrows.  The red X will delete the card.  The green + adds a new card.

The Section heading is a "heading 1".  The card header is for looks and appears in the top banner of the card.

 card form detailed

You may use the parts of the card that you need.  No section is required.  However, if you add an image, than you must provide alternative text for the image.  

The title is bold at the top of the body text.  

The image shows at the top of the card above the body text.

The button text will be in a button format.  Be careful of the length of the text for the button.  It can extend over the side of the card.  It does not wrap.

Note: The text for the button will not show if you do not provide a link for the button.  

Example of Section Heading <h1>

Card header

sun

Card Body Title

Text within the body of the card. The button is linked to the main cascade user manual page.

Example Button