Cards

A card is nothing more than a bordered container for content. Cards are primarily used to segment content from the main content area or to segment it from each other. Cards can also be used to highlight content or otherwise provide a standard format for types of content. This page will cover some common card uses as well as general guidelines for cards. The anatomy of a card can be broken into a few parts: title, body, image, and footer.

Card Title

Almost all cards should have a title. Where that title is placed is determined by the cards usage. Most of the times the card title will be located in the card header, at the top of the card. However a card where the focus is on an image, the title may be placed below the image. For cards that don't need to stand out as much, the header could be placed within the card body itself.

When trying to determine where to place the title, start with placing it in the card header. Most of the time that works great. If you have more than one card on a page, you may opt to place it in the body, or use a single card to house the content of multiple cards. If the focal point of your card is an image, it's often best to place the title below the image in a colored bar or inside the body below the image.

Top Heading

For cards in the sidebar, the top heading should always use the h4 class for its size and often use the text-bold class. When using inverse text, the bolded variant is highly encouraged. The heading can be either a div or a h tag, as either will work as long as card-header is added as well.

Middle Heading

Card Body Heading

Placing the heading in the middle of the card can be used when an image, or possible some other element is used at the top of the card. The exact same code can be used as when applying the heading at the top.

Card Body

The body is the meat of the card and contains most of the content. There are two main content styles we encourage, though cards are flexible and you can do pretty much anything. Try these first and then try something else if it doesn't work for you. The main types are single body and grouped body.

Single Body

A single bodied card is just that, a card with a single body area. Inside that body you could put multiple lines of text, lists or even headings and sections. A single body card is best when the card has a singular purpose and the content within it is all very closely related.

Single Body Example

This is an example of a single body card. All of the text is contained in a single area and there are no borders, lines or breaks between the content.

Grouped Body

Grouped body cards are great for more complexy data and lists of links. Though not required, they often provide a nice segmentation of content, especially when the content within the card is related, but could benefit from clear segmentation. If you think the content needs its own title, it can often benefit from a grouped body card.

Grouped Body Example

This is an example of a groups body card. This is the first section of content.
This is an example of a groups body card. This is the second section of content.

Examples of Grouped Body Cards

Information

Contact

...

Policies

...

Links

...

Links

Helpful Link 1 Helpful Link 2 Helpful Link 3 Helpful Link 4 Helpful Link 5

Contact

  • John Doe

    Executive Editor
    Utah State Office

    john.doe@usu.edu
    P: 435-797-0000 | C: 435-770-0000

  • John Doe

    Executive Editor
    Utah State Office

    john.doe@usu.edu
    P: 435-797-0000 | C: 435-770-0000

Card Images

Most of the time, card images should be used at the top of the card. Place of the title above or below the image is up to you, but it is preferred to not place text over the images. Bootstrap comes with classes card-img-top for images at the top of the card, and card-img-bottom for images at the bottom, and w-100 for images in the middle.

Top Image
Middle Image
Middle Image
Bottom Image

The card footer is most commonly used to house buttons. For a series of navigational cards, this makes it easy for alignment and positioning so all the cards have their links in roughly the same location. This positioning is done for you if you add the class nav-card on the main card element.

Nav Card

This card has the nav-card class on it. This will position any buttons in the footer to the bottom right corner. When a series of nav-cards is used, this provide uniformity.
Button Action

Normal Card

This card has no special styling. Note if using buttons and other background color elements, the button colors should generally match the background color.
Button Action

Card Styling

The majority of card styling is handled with background colors on the header or footer. Colors should generally look uniform on a card. Multiple cards on the same page should not use strong colors because they can start to look distracting. We recommend the use of only using background colors on headers and footers. If you are placing the card title inside the card body, you can optionally create an empty footer or header and give it a background color and add the class p-2 to give it appropriate sizing. We call these bordered cards and they help the card stand out from other content.

The default card footer applies a gray background that typically wouldn't be used, so apply one of the bg-[colorName] classes to the card footer to achieve the color you would like.

Do Not Do This

The bordered card is not designed to accompany a heading style outside the card body. This style ends up sandwiching the content between two bars which we do not want. Avoid the sandwich.

Card Alignment Issues

The main issue you will come across is dealing with card alignment. Often times when there are mutliple cards in a row, the desire is for the cards to all be the same height, but if the content isn't just right, by default this doesn't happen. The trick then is to simple make sure the card's parent element has the display property assigned to flex. The easiest way to do this is with the class d-flex. As a side effect, the card will no longer be forced to be 100% width of its container, so a good idea is to also add w-100 onto the card. Often times this isn't necessary, but if you notice 1 of the cards not as wide as the others this is the case.

No W-100 Class

:(
Button Action

With W-100 Class

:)
Button Action

Stacking

Another alignment issue deals with stacking cards. It's often easy to layout your page for larger screen sizes and forget to check about mobile. Often times cards stack on mobile and they don't have default margins around them, so the cards touch each other. It's almost always a good idea to add a mb-3 class on cards so the don't touch content below them when they stack.

Event Cards

If you are listing events on a page and have an image and a date, consider using the event-card class on a wrapper over the image to create a unique card that really stands out.

Event Title
Badge
00
MMM

Color rules still apply. So try to make sure the title background, button color and date background all match together.

Link Text
00
MMM
Event Title

Color rules still apply. So try to make sure the title background, button color and date background all match together.

Link Text

Things Not to Do

There are some things you may be tempted to do that we ask that you do not do. Here are some of those things.

  • Adding extra padding around card titles. Please refrain from doing this. The card-header class adds the appropriate amount of space around the text. Leave it be.
  • Mixing colors on cards. As stated, please keep card borders, buttons and backgrounds within the same color class.
  • Modifying card borders. Please just leave them alone. Don't make them thicker or styled. Than can be removed (if you are just going for the spacing of a card) but please don't to more than that.
  • Change the thickness of the bordered card style. Please just use the p-2 class for this border. The border, however, can be placed at the top of the card if desired.
  • Use mutliple card headings with backgrounds on a single card. We would prefer that you do not do this.

On This Page