UMC Digital
UMC Sites

Card Widget

Create cards in a grid-style format using the official University of Utah Card Widget.

Rather than having a messy jumble of text, neatly organize your content using our card widget. There are several options you can customize to your liking.

Check out our guide "Adding Widgets to Your Page" to learn how to add this widget to any row, panel or section on your website.

Cards

Basic cards generally consist of a Card Title, Card Content and a Card Button, although you can also omit any of these by leaving the corresponding field  blank.

Note: By default a card's contents are aligned to the left. You can change the alignment to either right or center.

Our Services
This is where you can include a brief blurb or description for your audience.
View Our Services
Our Faculty
This is where you can include a brief blurb or description for your audience.
Meet Our Faculty
Our Students
This is where you can include a brief blurb or description for your audience.
Meet Our Students

Card Images

You can also add header images in the card widget. To keep the sizing of card images consistent we render the image as a background-image with a dynamic width and a height of 200px. By default card images are positioned horizontally and vertically centered. With accessibility in mind, images should not include text.

Note: If you are finding your subject within your image is being cut off, try centering them both horizontally and vertically or use one of the horizontal image layouts in the Card Widget settings.

Introduction to Science
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec odio. Quisque volutpat mattis eros. Nullam malesuada erat ut turpis.
View Page
New Students Welcome
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec odio. Quisque volutpat mattis eros. Nullam malesuada erat ut turpis.
View Page

Horizontal Card Images

Cards that use images can also be formatted to stack horizontally versus vertically, with the image being either on the left or right of the content.

Note: Horizontal Cards are generally used for content with longer titles or descriptions and look best with one card per row. Horizontal cards will stack vertically on mobile devices.

Undergrads Research in the Field
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec odio. Quisque volutpat mattis eros. Nullam malesuada erat ut turpis.
See what they are Researching

Settings

Name Type Description
Card Layout Select Choose different layout options. Vertical with Image on Top, Horizontal with Image on Left, Horizontal with Image on Right.
Cards Per Row Select Choose how many cards to display per row (1- 6). Default is 3.
Cards Repeater Add cards. Each item represents a card.
Image as Icon Checkbox Checking this box will format the image to act as an icon. It's recommended to use consistent icons (in size, color and stroke weight).
Card Title Text Give your card a unique title that represents the image, copy and button.
Title Color Select Choose between Utah Red and Black. Default is Black.
Card Copy Textarea Give your card an appropriate description that represents the image, title and button. We recommend no more than two sentences of copy.
Button Title Text Text that appears in card button. The title should be short and concise.
Button URL URL The URL link for card button. You can either type or paste a URL or select content from your site (Page or Post).
Open Link in New Tab? Checkbox When checked, link will open in new browser tab. It is recommended that all external URLs should open up in a new tab.
Button Color Select Choose a color for your card button (Red, Black and Gray). Default is Utah Red.
Title, Copy & Button Alignment Select Choose to align your card title, copy and button (Left , Center and Right). Default is Left.