Highlights Cards

Default Grid

Displays highlight cards in a grid layout with options for two, three or four columns. Cards can be displayed with or without images and can include optional links to another section of the website, specific content or an external website. Links are not required, so cards can also be used to present information without directing visitors to another page.

Always select the Manual option when creating highlight cards. The COPE options should not be used. 

Carousel

The Highlight Cards Carousel displays cards in a horizontal, scrolling layout with options for a minimum of two and a maximum of four cards visible per row. Up to 20 cards can be added to a single carousel. Visitors can navigate through additional cards using the carousel controls.

Cards can be displayed with or without images and can include headings, descriptive text and optional links. Links can direct visitors to another section of the website, a specific content item or an external URL. Links are not required, so cards can also be used to display information without directing visitors to another page.

The carousel is available with white or dark blue background options and can be displayed full width or alongside the secondary navigation. Keep card headings and descriptions consistent in length to maintain a clean layout and make the information easy to scan.

Always select the Manual option when creating highlight cards. The COPE options should not be used.

Icon Grid

The Highlight Cards Icon Grid displays content in rows of two columns, with the option to include an icon or small image on the right side of the card. If an odd number of items is added, the final item will automatically be centered beneath the row above. This layout works well for organizing department resources, services, programs or other related information.

Each item can include an icon, heading, descriptive text and an optional link. Links can direct visitors to another section of the website, a specific content item or an external URL. Icons and links are not required, so the grid can also be used to display information without additional visual elements or navigation.

Icons should be selected from the Icons folder within the Mines Branding section of the Media Library. Using these approved icons helps maintain a consistent look across the website. When selecting icons, choose ones that relate to the content being presented and use a consistent style throughout the grid.

The Icon Grid is available with white or dark blue background options and can be displayed full width or alongside the secondary navigation.

Always select the Manual option when creating highlight cards. The COPE options should not be used.

Image Button Grid

The Highlight Cards Image Button Grid displays images in a grid layout with four column row. Additional items automatically wrap to the next row and are centered beneath the row above. This layout works well for highlighting programs, department resources, services or other areas of a website where images can help visitors identify and navigate to related content.

Despite the name, Image Button Grid items are not traditional buttons. The term "button" refers to the ability to make each image clickable, allowing visitors to navigate to another section of the website, a specific content item or an external URL. The image itself serves as the link.

The Image Button Grid is available with white or dark blue background options and can be displayed full width or alongside the secondary navigationWhile items can technically be added without images, this is not recommended because the layout is designed to feature images as the primary visual element. Links will only function when an image is present, so an image must be included for visitors to navigate to the linked content.

Choose images that clearly represent the content being linked to and use consistent image sizes throughout the grid. 

Always select the Manual option when creating highlight cards. The COPE options should not be used.

Return to Design System Overview