Facebook Pixel Card Snippets | Western Kentucky University Skip to main content

Card Snippets


A card snippet organizes information into a box with an optional header and footer, and depending on the style, image. The style of the card snippet can change (different stacking, with or without an image) but they all use the same snippet.

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.

 

Available Settings

CARD-STYLE
Controls the look and feel of the card snippet. (Options: STYLE-1, STYLE-2, STYLE-3, STYLE-4, STYLE-5)

 

Snippet Columns

Column one of the snippet table is called "Image". This is where you can edit the optional image of the card.

Column two of the snippet table is called "Title". This is where you can edit the optional title of the card.

Column three of the snippet table is called "Sub-Title". This is where you can edit the option sub-title text of the card, shown just below the card title.

Column four of the snippet table is called "Content". This is where you can edit the content that is displayed in the body of the card

 

Example #1

This example uses STYLE-1. The cards are equally sized in a single row, with an optional image (automatcially cropped as a circle) shown for each card. For the style used in this example, the recommended image size is 100px by 100px the Sub-Title text is shown just below the card's Title text, and in italics.

Since each card is equally sized to fit on a single row, filling the available width, 2 to 3 cards per snippet is recommended. Adding additional cards to a single snippet will cause the width of each to shrink; removing cards will cause the width of each to grow. Multiple card snippets may be needed.

 

100 by 100 placeholder image

Card Title

Card Sub-Title

With a Font Awesome List Snippet

  • (270) 745-0000
  • (270) 745-0000
  • Your Office 245
    1906 College Heights Blvd.
    Bowling Green, KY 42101-1086

Card Title - No Image

Content of Card

Banana baby monkey. Space monkey tree exotic. Rainforest zoo. Zoo tree banana howler primate. Arboreal capuchin space monkey. Space monkey baby spider. Space monkey arboreal capuchin monkey tree. Banana zoo spider spider arboreal. Space monkey capuchin rainforest space monkey. Monkey endangered capuchin.

 

WKU Card Snippet
CARD-STYLE STYLE-1
Image Title Sub-Title Content
100 by 100 placeholder image Card Title Card Sub-Title

Content of Card

Font Awesome List Snippet
FA-COLOR RED
FA-SIZE MEDIUM
Icon Text Beside Icon
fa-phone (270) 780-2539
fa-fax (270) 745-2011
fa-map-marker

Tate Page Hall 256
1906 College Heights Blvd.
Bowling Green, KY 42101-1086

  Card Title - No Image  

Content of Card

Banana baby monkey. Space monkey tree exotic. Rainforest zoo. Zoo tree banana howler primate. Arboreal capuchin space monkey. Space monkey baby spider. Space monkey arboreal capuchin monkey tree. Banana zoo spider spider arboreal. Space monkey capuchin rainforest space monkey. Monkey endangered capuchin.

 


 

Example #2

This example uses STYLE-2. The cards are equally sized in a single row, with an optional image shown above each card title, sub-title, and content. For the style used in this example, the recommended image size is 350px by 100px the Sub-Title text is shown just below the card's Title text, and in italics.

Since each card is equally sized to fit on a single row, filling the available width, 2 to 3 cards per snippet is recommended. Adding additional cards to a single snippet will cause the width of each to shrink; removing cards will cause the width of each to grow. Multiple card snippets may be needed.

 

350 by 200 placeholder image

Card Title
Card Sub-Title

Content of Card

Spider monkey banana. Rainforest arboreal zoo spider spider. Monkey space monkey primate exotic endangered. Zoo banana baby tree howler. Tree tree. Banana zoo. Tree spider exotic tree. Baby capuchin monkey arboreal.

Card Title - No Image

Content of Card

Tree primate spider funny monkeys. Endangered endangered. Monkey spider exotic. Howler exotic. Arboreal rainforest exotic. Howler rainforest exotic spider tree. Funny monkeys rainforest endangered space monkey. Howler spider banana baby. Spider space monkey funny monkeys arboreal howler. Arboreal arboreal spider rainforest.

Zoo endangered zoo tree spider. Tree banana arboreal zoo. Howler spider arboreal howler. Primate capuchin spider. Arboreal rainforest funny monkeys capuchin. Capuchin rainforest. Howler baby exotic banana. Capuchin capuchin monkey.

 

WKU Card Snippet
CARD-STYLE STYLE-2
Image Title Sub-Title Content
350 by 200 placeholder image Card Title Card Sub-Title

Content of Card

Spider monkey banana. Rainforest arboreal zoo spider spider. Monkey space monkey primate exotic endangered. Zoo banana baby tree howler. Tree tree. Banana zoo. Tree spider exotic tree. Baby capuchin monkey arboreal.

  Card Title - No Image  

Content of Card

Tree primate spider funny monkeys. Endangered endangered. Monkey spider exotic. Howler exotic. Arboreal rainforest exotic. Howler rainforest exotic spider tree. Funny monkeys rainforest endangered space monkey. Howler spider banana baby. Spider space monkey funny monkeys arboreal howler. Arboreal arboreal spider rainforest.

Zoo endangered zoo tree spider. Tree banana arboreal zoo. Howler spider arboreal howler. Primate capuchin spider. Arboreal rainforest funny monkeys capuchin. Capuchin rainforest. Howler baby exotic banana. Capuchin capuchin monkey.

 


 

Example #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 recommended image size for this style is 640px by 480px, but other sizes work as well.

Each card is as large as the image specified. Due to the responsive nature of images and how they are used with this style, using smaller images, allows for less content. Additionally, the available content area on smaller screen sizes, such as those on mobile devices, will be less. Content that does not fit within the content area will overflow the top and bottom of the image.

 

640 by 480 placeholder image

Card Title
Card Sub-Title

Content of Card

Monkey monkey. Baby howler zoo. Funny monkeys funny monkeys capuchin exotic. Tree exotic capuchin zoo. Baby rainforest primate arboreal. Tree capuchin arboreal primate. Zoo zoo funny monkeys. Banana funny monkeys baby banana baby. Space monkey baby baby howler.

Western Kentucky University

Card Title - No Image

Content of Card

Exotic rainforest funny monkeys exotic space monkey. Primate rainforest exotic primate. Exotic zoo arboreal rainforest. Zoo baby. Funny monkeys spider exotic. Howler rainforest rainforest.

640 by 550 placeholder image

No Title. No Sub-Title.

Monkey tree. Primate spider. Tree primate arboreal endangered exotic. Arboreal funny monkeys. Arboreal primate baby rainforest endangered. Rainforest exotic spider endangered. Baby space monkey.

Snippet Examples

 

WKU Card Snippet
CARD-STYLE STYLE-3
Image Title Sub-Title Content
640 by 480 placeholder image Card Title Card Sub-Title

Content of Card

Monkey monkey. Baby howler zoo. Funny monkeys funny monkeys capuchin exotic. Tree exotic capuchin zoo. Baby rainforest primate arboreal. Tree capuchin arboreal primate. Zoo zoo funny monkeys. Banana funny monkeys baby banana baby. Space monkey baby baby howler.

  Card Title - No Image  

Content of Card

Exotic rainforest funny monkeys exotic space monkey. Primate rainforest exotic primate. Exotic zoo arboreal rainforest. Zoo baby. Funny monkeys spider exotic. Howler rainforest rainforest.

640 by 550 placeholder image    

No Title. No Sub-Title.

Monkey tree. Primate spider. Tree primate arboreal endangered exotic. Arboreal funny monkeys. Arboreal primate baby rainforest endangered. Rainforest exotic spider endangered. Baby space monkey.

Snippet Examples

 


 

Example #4

This example uses STYLE-4. The cards are equally sized in a single row, with an optional 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. At first glance, the content is hidden, only the card Title and Sub-Title are show. Hovering over the card will expand the content section; on mobile devices, tap the card to expand its content.

Since each card is equally sized to fit on a single row, filling the available width, 3 to 4 cards per snippet is recommended, depending on the page layout. Adding additional cards to a single snippet will cause the width of each to shrink; removing cards will cause the width of each to grow. Multiple card snippets may be needed.

Image Cropping - Similar to the Hero Image, these images will resize to the middle of the image and respond to the height of the card which is ~250px.  We recommend all images be 250px tall with differing widths for the placement - see below.  Also like the Hero Image, the cropping focuses on the middle of the image when resizing and will crop the sides of your image out. Do not use images with text with this card style as it will likely be cropped out also.


Recommended Image Sizes
(Single Column Page Layout)

One card, 1200 x 250 pixels
Two cards, 575 x 250 pixels
Three or more cards, 350 x 250 pixels

Recommended Image Sizes(Two Column Page Layout)

One card, 750 x 250 pixels
Two or more cards, 350 x 250 pixels

 

350 by 250 placeholder image

Card Title

Image is 350x250

Content of Card

Monkey arboreal funny monkeys baby. Arboreal funny monkeys. Funny monkeys tree spider primate. Zoo baby monkey exotic funny monkeys. Tree capuchin. Endangered exotic endangered arboreal baby. Rainforest capuchin arboreal spider tree. Spider rainforest space monkey capuchin. Endangered primate capuchin.

350 by 250 placeholder image

Card Title

Content of Card - No Sub-Title

Tree primate spider funny monkeys. Endangered endangered. Monkey spider exotic. Howler exotic. Arboreal rainforest exotic. Howler rainforest exotic spider tree. Funny monkeys rainforest endangered space monkey. Howler spider banana baby. Spider space monkey funny monkeys arboreal howler. Arboreal arboreal spider rainforest.

Zoo endangered zoo tree spider. Tree banana arboreal zoo. Howler spider arboreal howler. Primate capuchin spider. Arboreal rainforest funny monkeys capuchin. Capuchin rainforest. Howler baby exotic banana. Capuchin capuchin monkey.

350 by 250 placeholder image

Card Title

Card Sub-Title

Content of Card

Howler funny monkeys. Arboreal monkey banana space monkey. Monkey exotic banana exotic. Spider howler primate primate capuchin. Zoo exotic. Tree endangered endangered.

 

WKU Card Snippet
CARD-STYLE STYLE-4
Image Title Sub-Title Content
350 by 250 placeholder image Card Title Image is 300x250

Content of Card

Monkey arboreal funny monkeys baby. Arboreal funny monkeys. Funny monkeys tree spider primate. Zoo baby monkey exotic funny monkeys. Tree capuchin. Endangered exotic endangered arboreal baby. Rainforest capuchin arboreal spider tree. Spider rainforest space monkey capuchin. Endangered primate capuchin.

350 by 250 placeholder image Card Title  

Content of Card - No Sub-Title

Tree primate spider funny monkeys. Endangered endangered. Monkey spider exotic. Howler exotic. Arboreal rainforest exotic. Howler rainforest exotic spider tree. Funny monkeys rainforest endangered space monkey. Howler spider banana baby. Spider space monkey funny monkeys arboreal howler. Arboreal arboreal spider rainforest.

Zoo endangered zoo tree spider. Tree banana arboreal zoo. Howler spider arboreal howler. Primate capuchin spider. Arboreal rainforest funny monkeys capuchin. Capuchin rainforest. Howler baby exotic banana. Capuchin capuchin monkey.

350 by 250 placeholder image Card Title Card Sub-Title

Content of Card

Howler funny monkeys. Arboreal monkey banana space monkey. Monkey exotic banana exotic. Spider howler primate primate capuchin. Zoo exotic. Tree endangered endangered.

 

350 by 250 placeholder image

Card Title

Card Sub-Title

Content of Card

Monkey arboreal funny monkeys baby. Arboreal funny monkeys. Funny monkeys tree spider primate. Zoo baby monkey exotic funny monkeys. Tree capuchin. Endangered exotic endangered arboreal baby. Rainforest capuchin arboreal spider tree. Spider rainforest space monkey capuchin. Endangered primate capuchin.

350 by 250 placeholder image

Card Title

Content of Card

Tree primate spider funny monkeys. Endangered endangered. Monkey spider exotic. Howler exotic. Arboreal rainforest exotic. Howler rainforest exotic spider tree. Funny monkeys rainforest endangered space monkey. Howler spider banana baby. Spider space monkey funny monkeys arboreal howler. Arboreal arboreal spider rainforest.

Zoo endangered zoo tree spider. Tree banana arboreal zoo. Howler spider arboreal howler. Primate capuchin spider. Arboreal rainforest funny monkeys capuchin. Capuchin rainforest. Howler baby exotic banana. Capuchin capuchin monkey.

 

WKU Card Snippet
CARD-STYLE STYLE-4
Image Title Sub-Title Content
350 by 250 placeholder image Card Title Card Sub-Title

Content of Card

Monkey arboreal funny monkeys baby. Arboreal funny monkeys. Funny monkeys tree spider primate. Zoo baby monkey exotic funny monkeys. Tree capuchin. Endangered exotic endangered arboreal baby. Rainforest capuchin arboreal spider tree. Spider rainforest space monkey capuchin. Endangered primate capuchin.

350 by 250 placeholder image Card Title  

Content of Card

Tree primate spider funny monkeys. Endangered endangered. Monkey spider exotic. Howler exotic. Arboreal rainforest exotic. Howler rainforest exotic spider tree. Funny monkeys rainforest endangered space monkey. Howler spider banana baby. Spider space monkey funny monkeys arboreal howler. Arboreal arboreal spider rainforest.

Zoo endangered zoo tree spider. Tree banana arboreal zoo. Howler spider arboreal howler. Primate capuchin spider. Arboreal rainforest funny monkeys capuchin. Capuchin rainforest. Howler baby exotic banana. Capuchin capuchin monkey.

 


 

Example #5

This example uses STYLE-5. The cards are stacked vertically on top of each other. If the optional image is specified, it is shown above the card. For the style used in this example, the recommended image size is 900px by 400px.

 

Card Title
Card Sub-Title

Content of Card

Spider monkey spider monkey zoo. Exotic tree baby. Endangered monkey. Monkey capuchin funny monkeys funny monkeys capuchin. Exotic exotic. Arboreal howler arboreal capuchin spider. Spider endangered.

Monkey arboreal endangered primate primate. Howler howler primate. Arboreal capuchin zoo spider arboreal. Zoo spider spider endangered rainforest. Space monkey baby. Arboreal exotic. Howler space monkey funny monkeys exotic primate.

Card Title

Content of Card

Arboreal primate primate spider. Space monkey endangered space monkey. Tree tree capuchin tree arboreal. Arboreal primate arboreal capuchin primate. Rainforest exotic. Funny monkeys space monkey zoo zoo baby. Funny monkeys rainforest primate zoo. Spider arboreal capuchin capuchin. Zoo endangered exotic endangered.

Baby monkey. Exotic spider. Rainforest endangered monkey arboreal funny monkeys. Baby primate funny monkeys. Monkey spider. Capuchin spider tree zoo. Howler space monkey spider monkey. Endangered endangered exotic primate. Primate monkey endangered rainforest endangered.

Card Title
Card Sub-Title

Content of Card

Rainforest monkey. Exotic endangered funny monkeys. Space monkey tree arboreal. Exotic zoo. Baby endangered primate spider primate. Rainforest capuchin zoo howler.

Arboreal rainforest baby endangered. Exotic endangered howler capuchin. Space monkey rainforest tree primate endangered. Space monkey funny monkeys. Banana endangered space monkey arboreal. Monkey funny monkeys primate space monkey primate.

 

WKU Card Snippet
CARD-STYLE STYLE-5
Image Title Sub-Title Content
  Card Title Card Sub-Title

Content of Card

Spider monkey spider monkey zoo. Exotic tree baby. Endangered monkey. Monkey capuchin funny monkeys funny monkeys capuchin. Exotic exotic. Arboreal howler arboreal capuchin spider. Spider endangered.

Monkey arboreal endangered primate primate. Howler howler primate. Arboreal capuchin zoo spider arboreal. Zoo spider spider endangered rainforest. Space monkey baby. Arboreal exotic. Howler space monkey funny monkeys exotic primate.

  Card Title  

Content of Card

Arboreal primate primate spider. Space monkey endangered space monkey. Tree tree capuchin tree arboreal. Arboreal primate arboreal capuchin primate. Rainforest exotic. Funny monkeys space monkey zoo zoo baby. Funny monkeys rainforest primate zoo. Spider arboreal capuchin capuchin. Zoo endangered exotic endangered.

Baby monkey. Exotic spider. Rainforest endangered monkey arboreal funny monkeys. Baby primate funny monkeys. Monkey spider. Capuchin spider tree zoo. Howler space monkey spider monkey. Endangered endangered exotic primate. Primate monkey endangered rainforest endangered.

  Card Title Card Sub-Title

Content of Card

Rainforest monkey. Exotic endangered funny monkeys. Space monkey tree arboreal. Exotic zoo. Baby endangered primate spider primate. Rainforest capuchin zoo howler.

Arboreal rainforest baby endangered. Exotic endangered howler capuchin. Space monkey rainforest tree primate endangered. Space monkey funny monkeys. Banana endangered space monkey arboreal. Monkey funny monkeys primate space monkey primate.

 

900 by 400 placeholder image

Card Title
With Image

Content of Card

Primate arboreal. Funny monkeys funny monkeys arboreal zoo zoo. Howler spider monkey funny monkeys. Monkey zoo banana. Monkey zoo monkey banana. Zoo exotic rainforest zoo. Endangered space monkey banana. Arboreal endangered. Space monkey monkey.

Rainforest arboreal baby. Capuchin howler capuchin exotic. Spider spider. Howler zoo capuchin arboreal tree. Tree capuchin. Space monkey howler. Spider space monkey space monkey rainforest rainforest. Spider space monkey endangered primate.

 

WKU Card Snippet
CARD-STYLE STYLE-5
Image Title Sub-Title Content
900 by 400 placeholder image Card Title With Image

Content of Card

Primate arboreal. Funny monkeys funny monkeys arboreal zoo zoo. Howler spider monkey funny monkeys. Monkey zoo banana. Monkey zoo monkey banana. Zoo exotic rainforest zoo. Endangered space monkey banana. Arboreal endangered. Space monkey monkey.

Rainforest arboreal baby. Capuchin howler capuchin exotic. Spider spider. Howler zoo capuchin arboreal tree. Tree capuchin. Space monkey howler. Spider space monkey space monkey rainforest rainforest. Spider space monkey endangered primate.




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.

Get Help



Some of the links on this page may require additional software to view.

 Last Modified 9/14/18