Card Snippets in the CMS

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

1. Open the CMS Editor.
2. Click the Snippet icon.
   
3. Locate the Card Snippet by searching under the Content category.
4. Once you have made your selection, click Insert.
5. 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.
6. There are several different columns that allow you to put certain content in the rows:
   1. Header - A short piece of text to label the card.
   2. 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.
   3. 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://fontawesome.com/v4/icons/. Select the icon you want and grab the title which will include "fa-something" (e.g. fa-building). Remove the "fa-" and insert the rest (e.g. building) into the snippet. These are case sensitive, so no capital letters.
   4. Content - Any HTML content.
   5. Link - A piece of link-able text that can be assigned by a Dependency Tag or external link.
   6. 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.

Settings

There are additional settings to give you even more customization capabilities.

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.

The "Advanced" options, in most cases, do NOT need to be utilized. They are there if you need more customization.

Advanced users only! These can do some seriously weird things to the card styles if used incorrectly.

• Custom grid classes - These are used if you want to have a different number of cards per row. For example, on a desktop, if you have 6 cards, and you want 3 to show up per row, you would put block-grid-lg-3. The sizes reflect the width of the browser page. Here are the sizes:
  • lg: screens larger than 1200px
  • md: between 992px and 1199px
  • sm: between 768px and 991px
  • xs: between 480px and 767px
• For example, block-grid-md-2 to shows 2 cards per row on a tablet in landscape (horizontal) orientation. block-grid-sm-2 would show 2 cards in portrait (vertical) orientation.  When making edits, you will need to test on numerous screen sizes and devices!
• Custom extra classes - Just in case you need to add classes that are not grid-related.

Some Examples

Check out these examples to see some common combinations in action. However, many more combinations are possible. Don't be afraid to experiment!

Troubleshooting

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.