A Card component is a visually appealing box that you can use to organize various pieces of related information neatly on your webpage. Cards can include a mix of elements such as an image, a headline, some brief text, and possibly a link to more details.
Live Example
This example shows the card component with all possible options. Most of these options can be turned on or off depending on the content, look, and feel of the information the will be included. See the documentation below the example for more information about the options and variations that are available.
Default card title
This is a where the card text goes. Nam luctus semper elementum. Aenean id blandit nulla. Vivamus dui dui, consectetur ac hendrerit at, finibus sed nunc.
Options and Variations
Orientation
The card component can be oriented both vertically and horizontally. In addition to the orientation you can also set the aspect ratio and position of the image on the card. The available aspect ratios are: (1:1, 3:4, 4:3, and 16:9). On the horizontal cards the images can be placed on either the right or left side of the card. On the vertical cards the image can be placed at either the top or the bottom of the card.
For visual consistency the same orientation and aspect ratio should be used for all the cards in a given card group.
Background Color
The card component supports a variety of background colors chosen from the U of U Health branding colors. Available colors are: white, light gray, Utah Red (both standard and light variations), Lake Powell Blue (both standard and light variations), and dark gray. All of our color combinations have also been optimized to pass the required web accessibility standards to ensure the greatest level of access for our patients.
White
Muted
Primary
Primary Light
Secondary
Secondary Light
Tertiary
Text Padding
Text padding refers to the space around the text elements inside the card. This space can be adjusted to allow more or less space around the card text as needed.
For visual consistency the same padding should be used for all the cards in a given card group.
Small
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
Default
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
Large
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
Text Alignment
Card text can be both left and center aligned. The contents of the card can be aligned either as a group or each text element can be aligned separately to allow for more customization options.
For visual consistency the same text alignment options should be used for all the cards in a given card group.
Card Left Aligned
Text left aligned. Nam luctus semper elementum. Aenean id blandit nulla. Vivamus dui dui, consectetur ac hendrerit at, finibus sed nunc.
Card Center Aligned
Text center aligned. Nam luctus semper elementum. Aenean id blandit nulla. Vivamus dui dui, consectetur ac hendrerit.
Mixed Alignment
Text left aligned. Nam luctus semper elementum. Aenean id blandit nulla. Vivamus dui dui, consectetur ac hendrerit at, finibus sed nunc.
Style Options
There are a number of style options that can be applied to cards to enhance their visual appeal. Each style can be applied individually giving the designer a variety of different options when creating cards. The different effect are shown applied to the cards below.
For visual consistency the same styles should be applied to all cards in a given card group.
No Styles
This is a card with no styles applied. It will display only the background color with no other style elements.
Box Shadow
This element will add a drop shadow to any card it is applied to. It provides a slight three dimensional effect to any cards it is applied to.
Hover Effect
The hover effect will give a visual response to the user when the mouse cursor rolls over it. Note: hover effects will not work on mobile as there is no way to hover on a mobile device.
Card Border
This effect adds a small stroke to the border of all cards. This is helpful to define the boundaries of a card that might otherwise be difficult to see.
Margins
The margin refers to the space above and below the card component. Adjusting the margin will either increase or decrease how close components immediately above or below are to the card. This is especially helpful when card requires fine tuning the spacing from elements such as heading or button components. Spacing covers a range from no spacing to extra large spacing.
No Margin.
No Margin.
Extra Small Margin.
Extra Small Margin.
Small Margin.
Small Margin.
Medium (Default) Margin.
Medium (Default) Margin.
Large Margin.
Large Margin.
Extra Large Margin.
Extra Large Margin.
Usage
Do...
- Use cards to organize related items visually, enhancing user navigation and comprehension.
- Display specific content like featured news or resources on cards to highlight important information.
- Keep card titles and details brief for clarity.
- Limit card body text to a few sentences for quick readability.
Don't...
- Use cards for all page content; not all information suits this format.
- Group unrelated items in a single card, as it confuses users.
- Mix different card styles in the same list or grid to maintain visual coherence.
- Use inconsistent image sizes.
- Create clickable card variants with multiple links to prevent navigation confusion.
Accessibility
- Ensure that you provide suitable alt text for the images on your cards. Alt text for images enhances web accessibility by offering a textual description for screen readers used by visually impaired users. See the a11yproject website for more information about writing alt text for images.