Skip to main content

Cards

Links to content displayed with pictures and/or text.

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.

Card Section Title

A view of BYU campus from Y Mountain at sunset.

Article Headline

If there is a subheadline, it will be previewed here.
December 03, 2020 03:50 PM
overrideTextColor= overrideCardAlternateTextColor= overrideDisableBackgroundImage= overrideTextAlignment= overrideCardHideSection= overrideCardHideByline= overrideCardHideDescription= overrideCardShowButton= overridebuttonBgColor= overrideButtonText=
A view of BYU campus from Y Mountain at sunset.

Article Headline

If there is a subheadline, it will be previewed here.
December 03, 2020 03:50 PM
overrideTextColor= overrideCardAlternateTextColor= overrideDisableBackgroundImage= overrideTextAlignment= overrideCardHideSection= overrideCardHideByline= overrideCardHideDescription= overrideCardShowButton= overridebuttonBgColor= overrideButtonText=
A view of BYU campus from Y Mountain at sunset.

Article Headline

If there is a subheadline, it will be previewed here.
December 03, 2020 03:50 PM
overrideTextColor= overrideCardAlternateTextColor= overrideDisableBackgroundImage= overrideTextAlignment= overrideCardHideSection= overrideCardHideByline= overrideCardHideDescription= overrideCardShowButton= overridebuttonBgColor= overrideButtonText=
A view of BYU campus from Y Mountain at sunset.

Article Headline

If there is a subheadline, it will be previewed here.
December 03, 2020 03:50 PM
overrideTextColor= overrideCardAlternateTextColor= overrideDisableBackgroundImage= overrideTextAlignment= overrideCardHideSection= overrideCardHideByline= overrideCardHideDescription= overrideCardShowButton= overridebuttonBgColor= overrideButtonText=
A view of BYU campus from Y Mountain at sunset.

Article Headline

If there is a subheadline, it will be previewed here.
December 03, 2020 03:50 PM
overrideTextColor= overrideCardAlternateTextColor= overrideDisableBackgroundImage= overrideTextAlignment= overrideCardHideSection= overrideCardHideByline= overrideCardHideDescription= overrideCardShowButton= overridebuttonBgColor= overrideButtonText=
A view of BYU campus from Y Mountain at sunset.

Article Headline

If there is a subheadline, it will be previewed here.
December 03, 2020 03:50 PM
overrideTextColor= overrideCardAlternateTextColor= overrideDisableBackgroundImage= overrideTextAlignment= overrideCardHideSection= overrideCardHideByline= overrideCardHideDescription= overrideCardShowButton= overridebuttonBgColor= overrideButtonText=
overrideTextColor= overrideCardAlternateTextColor= overrideDisableBackgroundImage= overrideTextAlignment= overrideCardHideSection= overrideCardHideByline= overrideCardHideDescription= overrideCardShowButton= overridebuttonBgColor= overrideButtonText=

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.

Just the Image

slideNumber:
slideNumber:
slideNumber:
slideNumber:
Photo of multi ethnic students smiling
slideNumber:
Image of leaves in autumn
slideNumber:
overrideDropshadow:

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.

Images on the side

BYU Websites review from Lola Taylor of Physical Facilities

November 05, 2019 04:42 PM
Lola Taylor shares her experience revamping the Physical Facilities site.

Student Life's Craig Cardon is moving 100 websites into the system

November 01, 2019 09:09 AM
Cardon describes how permissions management and workflow approval make their work manageable.

Article Headline

December 03, 2020 03:50 PM
If there is a subheadline, it will be previewed here.

Article Headline

December 03, 2020 03:50 PM
If there is a subheadline, it will be previewed here.

Article Headline

December 03, 2020 03:50 PM
If there is a subheadline, it will be previewed here.

Article Headline

December 03, 2020 03:50 PM
If there is a subheadline, it will be previewed here.
overrideBackgroundColorOrImage= overrideTextColor= overrideTextAlignment= overrideCardHideSection= overrideCardHideByline= overrideCardHideDescription= overridebuttonBgColor= overrideButtonText=

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.

Image on Top

data-content-type="article"

BYU Websites review from Lola Taylor of Physical Facilities

November 05, 2019 04:42 PM
Lola Taylor shares her experience revamping the Physical Facilities site.
overrideBackgroundColorOrImage= overrideTextColor= overrideTextAlignment= overrideCardHideSection= overrideCardHideByline= overrideCardHideDescription= overridebuttonBgColor= overrideButtonText= overrideTextAlignment=
data-content-type="article"

Life Sciences' web team: BrightSpot is heavily optimized out of the box

October 18, 2019 04:28 PM
Early adopter Kevin Bauer shares his experience moving Life Sciences into BYU Websites.
overrideBackgroundColorOrImage= overrideTextColor= overrideTextAlignment= overrideCardHideSection= overrideCardHideByline= overrideCardHideDescription= overridebuttonBgColor= overrideButtonText= overrideTextAlignment=
data-content-type="article"

Student Life's Craig Cardon is moving 100 websites into the system

November 01, 2019 09:09 AM
Cardon describes how permissions management and workflow approval make their work manageable.
overrideBackgroundColorOrImage= overrideTextColor= overrideTextAlignment= overrideCardHideSection= overrideCardHideByline= overrideCardHideDescription= overridebuttonBgColor= overrideButtonText= overrideTextAlignment=
data-content-type=""
overrideBackgroundColorOrImage= overrideTextColor= overrideTextAlignment= overrideCardHideSection= overrideCardHideByline= overrideCardHideDescription= overridebuttonBgColor= overrideButtonText= overrideTextAlignment=
data-content-type="image"
Photo of multi ethnic students smiling

HR_Banner.jpg

overrideBackgroundColorOrImage= overrideTextColor= overrideTextAlignment= overrideCardHideSection= overrideCardHideByline= overrideCardHideDescription= overridebuttonBgColor= overrideButtonText= overrideTextAlignment=
data-content-type="image"
Image of leaves in autumn

Autumn on campus

overrideBackgroundColorOrImage= overrideTextColor= overrideTextAlignment= overrideCardHideSection= overrideCardHideByline= overrideCardHideDescription= overridebuttonBgColor= overrideButtonText= overrideTextAlignment=
overrideBackgroundColorOrImage= overrideTextColor= overrideTextAlignment= overrideCardHideSection= overrideCardHideByline= overrideCardHideDescription= overridebuttonBgColor= overrideButtonText=

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.

List Title Here.

Description here.

6. Card, Logo On Top

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

Horizontal Image

Hidden image
Lola Taylor shares her experience revamping the Physical Facilities site.
Hidden image
Early adopter Kevin Bauer shares his experience moving Life Sciences into BYU Websites.
Hidden image
Cardon describes how permissions management and workflow approval make their work manageable.
Hidden image
Photo of multi ethnic students smiling
Hidden image
Image of leaves in autumn
overrideTextAlignment= overrideTextColor= overrideBackgroundColorOrImage= overrideDividerColor=

7. Card, Text Only

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

Text Only

BYU Websites review from Lola Taylor of Physical Facilities

Lola Taylor shares her experience revamping the Physical Facilities site.

Life Sciences' web team: BrightSpot is heavily optimized out of the box

Early adopter Kevin Bauer shares his experience moving Life Sciences into BYU Websites.

Student Life's Craig Cardon is moving 100 websites into the system

Cardon describes how permissions management and workflow approval make their work manageable.

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.

BYU Websites review from Lola Taylor of Physical Facilities

November 05, 2019 04:42 PM
Lola Taylor shares her experience revamping the Physical Facilities site.

9. Card, Image Only

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

slideNumber:

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.

Hidden image
RichText Card Title

Here is an example of a RichText Card.

12. Quote Card

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

Hidden image
At those times when you wonder if there is any reason to hope, when you wonder if anyone cares—or if anyone should care—I invite you to ask God what He thinks of you—what He really thinks of you.
KEVIN J WORTHEN, SEPTEMBER 2020
overrideBackgroundColorOrImage: overrideTextColor: overrideTextAlignment: