Cards are a great way to display many different types of content, and are quite flexible. In general, they are used for small pieces of content that need to be displayed stylistically. They are similar to the previous version of cards, except instead of needing to pick from several different snippets, all of the previous designs can be accomplished with a single snippet.
To add a Card Snippet
- Open the CMS Editor.
- Click the Snippet icon.
- Locate the Card Snippet by searching under the Content category.
- Once you have made your selection, click Insert.
- A table transform will appear in the CMS Editor. By default, the Snippet will give you four rows, however you can use the add/remove rows tool to add or remove additional cards. They will wrap correctly no matter how many you have.
- There are several different columns that allow you to put certain content in the rows:
- Header - A short piece of text to label the card.
- Image - An image stored on the site. This can be selected from the Image button in the editor toolbar.
- Note: You'll want to make sure the images are the same size, width and height-wise. Otherwise, the height-matching with the card content will be off.
- Icon - A selection of icons from Font Awesome. We're using version 4.6.3 of Font Awesome to provide the icons. You can search for available icons at https://faicons.com/ and type in the text of the name of the icon.
- Content - Any HTML content.
- Link - A piece of link-able text that can be assigned by a Dependency Tag or external link.
- Custom classes - Classes you can add to each card so they can be individually styled with CSS. Advanced use only.
You'll want to make sure that each of the cards has consistent content. Otherwise, the cards won't look unified. For example, if one card has an image and icon, make sure that all of them have images and icons. If you have mixed content combinations, use separate card snippets.
There are additional settings to give you even more customization capabilities. These can be shown by clicking the "Toggle Settings" button at the bottom of the snippet.
This will reveal this table:
Here is a rundown of each of the options:
- Translucent Header - Make a header semi-transparent, and placed on top of an image. Only used if a header and image are present.
- Header Below Image - Place the header at the bottom of, or below, an image. Only used if a header and image are present. Also works for translucent headers.
- Center Content - Whether the content region should be centered. This might be a nice option if you want to put in more content than just a small snippet of text. Only used if content is present.
- Border - Whether to put a light grey border around the content region. Only used if content is present.
Check out these examples to see some common combinations in action. However, many more combinations are possible. Don't be afraid to experiment!
The "toggle settings" button isn't working.
This will happen if you try to click the button immediately after inserting the snippet. To address this, simply save the page and reopen the editor.