Card Snippets

---

Cards are a flexible content container that organizes images, headings, content, or links into neats group. Multiple card styles are available using the same snippet. Cards can be stacked, include an image, sub-heading, and extra content. Use cards to group similar content and links together. This provides users with a recognizable formatted group of items to scan or select from.

Cards are a great replacement for sliders. Rather than hiding images in the slider that users must click through, cards allow you to display the same amount of content (image, title, text and links) in a way that can all be viewed at once. When working with images in cards it is a good idea to remain consistent. Use images that are the same dimensions and style. Either use matching graphics or a set of photographs, try not to mix the two.

Inserting Card Snippets

 

Snippet Options

---

CARD-STYLE

Controls the look and feel of the card snippet. If no style is specified STYLE-2 will be used.

• STYLE-1 - Small style cards with a circle cropped image.
• STYLE-2 - Basic cards with the image on top. (Default)
• STYLE-3 - Image background cards.
• STYLE-4 - Feature image hover cards.
• STYLE-5 - Stack of cards.

 

 

Snippet Columns

---

Image

The image to be displayed in the card. Each style has recommended image sizes, see style examples for details.

When using multiple cards in a row, we recommend using all the same size image for consistency.

 Images only, other content will be removed.

 

Title

The title or heading of the card. Displays as an heading level 4 (h4) size in WKU Red.

/  Text only, other content will be removed. Headings can be linked, but we recommend using a button in the content area instead.

 

Sub-Title

A sub-title that is grouped with the heading, typically displayed in a lighter italic font (except STYLE-4).

 Text only, other content will be removed.

 

Content

The content of the card. This is where you would include a description of the content and add a button if you wanted.

 WYSIWYG Content, nested snippets, components, and assets allowed.

 

 

Styles

---

Style 1

STYLE-1 cards automatically added into columns, with an optional image cropped as a circle. Anything text in the card content column is displayed smaller. This card works great as a business card or person profile.

---

 Recommended Image Size

Use a square image with the focus in the center to ensure a perfect circle crop.

• 100 x 100

---

 

 

Style 2

STYLE-2 cards use the typical layout for a card. The image is displayed uncropped above the title, sub-title, and content. Mutliple cards are automatically placed into columns.

---

 Recommended Image Width

Images can be any height, as long as they match.

• One Card: 1200px
• Two Cards: 575px
• Three+ Cards: 350px

---

 

 

Style 3

This example uses STYLE-3. The cards are centered, one per row. The image specified for each card, is used as the background; the card's Title, Sub-Title and Content on top of the image. If no image is specified a default is used. The size of the card is determined by the size of the image used. On smaller devices the image will retain it's aspect ratio, so make sure your content fits over the image at any screen size.

---

 Recommended Image Size

Use darker images so that the content above can be read easily.

Each card is as large as the image specified. Due to the responsive nature of images and how they are used with this style, content that does not fit above the image will be condensed and potentially overflow to the top and bottom of the image. Other image sizes are allowed, but remember to check that the content fits over the image.

• 640 x 480

---

 

 

Style 4

STYLE-4 cards are equally sized in a single row, with an image shown above each card title (a default image will be used if none is specified). The Sub-Title is shown as a red banner and white text at the bottom left of the card image, just above the card Title.

Hovering over the card will enable an effect on the image, zooming slightly and tinting it red. This card also allows the ability to link the entire card, adding a link icon ( ) to the top right corner to distinguish it.

---

 Image Cropping

This card style will crop out part of your images, this is to ensure that the images cover the card on all device widths and for each amount of columns. What you may see of an image on a desktop computer could be cropped out on a mobile device. Try to keep the content of the images in the center, and do not use images that contain text.

 

 Recommended Image Size

To ensure coverage and consistency with the zooming effect the height of images in this card style is locked at 250px. Using images this height will ensure your images fit the card best.

 

 Linking the Entire Card

Style-4 cards have the option of turning the entire card into a link. This will also add a link icon the top right of your card. To do this, add your image to the snippet, select it, and then make it a link. This link will then be applied to the entire card once saved.

When linking a card, do not include any other links or buttons in the card Title or Content.

---

 

 

Style 5

STYLE-5 cards create cards similar to STYLE-2, but instead of using columns, the cards are stacked vertically on top of each other. This is sometimes referred to as a card stack.

---

 Recommended Image Width

Images can be any height in this style.

• One Column: 1200px
• Two Column Main: 900px
• Three Column Main: 768px
• Side Columns: 575px

---