Cards

What you need to know about Brightspot cards

Cards have become a popular way of displaying information rather than using a text-heavy list. However, cards can be difficult to use well. Use the suggestions and examples below to guide your decisions.

Best Practices:

• Consider what is most important for your viewers - an image or a description?

Things to Avoid:

• Using images with any white space and light-colored text on top
• Using images that are textured, making the text unreadable

Brightspot separates their cards primarily between the list content types and the promo content types. The card list types are displayed first below. See the bottom of the page for examples of simple RichText and Quote cards.

List Cards

1. Card, Background

Under the list content section, this is the "Card, Background" component. These are especially important to consider whether or not the text is readable over the selected image. The image focus point and background brightness can be adjusted.

2. Card, Image Only

This image only option is also a list item called "Card, Image Only." This is great way to display multiple images.

3. Card, Image On Side

This type of list "Card, Image On Side" is a great way to highlight the text if that is what is most important.

4. Card, Image On Top

This list type is called "Card, Image On Top" which provides a larger image than the example above while still giving a preview of the text.

5. List Speech Promo

The list option is similar to the cards above. This one is specifically built for BYU speeches and works well with events. However, if used to display an article, it will display the time and date the article was created.

6. Card, Logo On Top

This "Card, Logo On Top" list type will display the images in a horizontal fashion while previewing the text.

7. Card, Text Only

This list option doesn't utilize images and is called "Card, Text Only."

Promo Cards

8. Card, Image on Top (Large)

This promo type is called "Card, Image on Top (Large)." The default version of this is currently in repair as the image appears blurry. The only difference is that the text is smaller than what appears below.

9. Card, Image Only

This example promo is called "Card, Image Only" and is center aligned.

10. Card, Image Only Large

This promo is called "Card, Image Only Large" and won't display any text from the original work.

Additional Cards

11. RichText Card

The RichText Card is found in the RichText section of Brightspot. The background color of the module as well as the text color and alignment can be changed.

12. Quote Card

This pull quote example called "Quote, Card" can also be found in the Quotes section of the demo site.