Card sets are full of interactive elements such as text, links, buttons, or images associated with a singular thought/action.
See an example of this content type
Adding a Card Set
From the paragraph builder select the button labeled Add Card Set
Enter the heading for this Card Set in the Card Set Title field.
Under Title Options select whether the Card Set Title should be aligned left or centered. The default is visually hidden.
Select the Card Size and number of cards per row.
| Info |
|---|
Cards Per Row: Small (4); Medium (3); Large (2); Extra Large (1). |
Select the alignment and distribution of the cards in the card set with Justify Cards option.
| Info |
|---|
Alignment options include start, end, and center. |
Deselect the check box Add Card Border if you would not like borders around your cards; if you would like borders, leave this box checked.
Use the Text Alignment option to specify the text alignment (left or center) for the cards in this set.
If desired, add a horizontal border to separate rows (top, bottom, or both) with the Horizontal Border option.
Adding an Individual Card
In the Card Builder section, select Add Individual Card
If you would like an image added to your card, under Image, choose an image from your computer and Upload the image.
| Info |
|---|
For the best results, size and crop your image before uploading. |
| Info |
|---|
5 MB upload limit. |
| Info |
|---|
Allowed types: png gif jpg jpeg. |
| Info |
|---|
Images must be larger than 445x312 pixels. |
Enter the card heading in the Title field.
| Info |
|---|
If you do not want to display the card title, select the visually hide title checkbox |
Specify the Title Font Size; options include small, medium, large, and x-large (default is large).
If you would like the Title field to be linked, use the Title Link field.
| Info |
|---|
If a Title Link has been added, you may select to target the current window or a new window under the attributes option |
You may choose to link the entire card to the same link as the Title Link by selecting the checkbox to make the entire card linked.
Add content to the Body field.
If you would like a CTA button in your card, use this field to add a URL and Link Text
| Info |
|---|
The Link text displays on the Button and is the call-to-action for this page. The URL defines the button link. |
Adding an Icon Card
In the Card Builder section, select Add Individual Card Icon
Determine icon (Choose ONLY one):
Select an icon from the Icon dropdown list. (Leave none for second option)
Place the code for a SVG in the Custom field OR a bootstrap icon (if you have the bootstrap icon library enabled). NOTE: Only <svg>, <i>, or <span> parent tags are allowed.
| Info |
|---|
If using SVG, be sure to add a <title>ICON DESC</title> to your code immediately after the <svg> opening tag for W3C compliance. |
Enter an optional card heading in the Title field.
Specify the Title Font Size; options include small, medium, large, and x-large (default is large).
If you would like the Title field to be linked, use the Link field.
| Info |
|---|
By default the Title and Icon link to the same page, internal path or external URL. |
Add content to the Body field.