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.
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.
Card Sub-Title
Content of Card. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
Card Sub-Title
Content of Card. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
Recommended Image Size
Use a square image with the focus in the center to ensure a perfect circle crop.
- 100 x 100
WKU Card Snippet | |||
---|---|---|---|
Options | |||
CARD-STYLE | STYLE-1 | ||
Cards | |||
Image | Title | Sub-Title | Content |
Card Title | Card Sub-Title |
Content of Card. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. |
|
Card Title - No Image | Card Sub-Title |
Content of Card. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. |
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.
Card Sub-Title
Content of Card. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
Card Sub-Title
Content of Card. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
Recommended Image Width
Images can be any height, as long as they match.
- One Card: 1200px
- Two Cards: 575px
- Three+ Cards: 350px
WKU Card Snippet | |||
---|---|---|---|
Options | |||
CARD-STYLE | STYLE-2 | ||
Cards | |||
Image | Title | Sub-Title | Content |
Card Title | Card Sub-Title |
Content of Card. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. |
|
Card Title - No Image | Card Sub-Title |
Content of Card. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. |
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
WKU Card Snippet | |||
---|---|---|---|
Options | |||
CARD-STYLE | STYLE-3 | ||
Cards | |||
Image | Title | Sub-Title | Content |
Card Title | Card Sub-Title |
Content of Card. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. |
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.
![Western Kentucky University](/_resources/images/card-style4-default.jpg)
Content of Card. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
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.
One Column Layout
- One Card: 1200 x 250
- Two or More Cards: 575 x 250
Two Column Layout
- One Card: 870 x 250
- Two Cards: 575 x 250
- Three or More Cards: Not Recommended
Three Column Layout
- One Card: 575 x 250
- Two Cards: 575 x 250
- Three or More Cards: Not Recommended
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.
Card Sub-Title
Content of Card. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
Card Sub-Title
Content of Card. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
Card Sub-Title
Content of Card. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
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
WKU Card Snippet | |||
---|---|---|---|
Options | |||
CARD-STYLE | STYLE-5 | ||
Cards | |||
Image | Title | Sub-Title | Content |
Card Title | Card Sub-Title |
Content of Card. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. |
|
Card Title - No Image | Card Sub-Title |
Content of Card. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. |
|
Card Title - No Image | Card Sub-Title |
Content of Card. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. |
Need Assistance?
The WKU ITS Service Desk is here to help. Give us a call, chat with a representative online, use the Self-Help Knowledge Base and more.
Some of the links on this page may require additional software to view.