Layout & Component Blocks
Featured Cards
Overview
The Featured Card component is a visually engaging element designed to highlight important content and drive users to deeper pages. Featured Cards can be used individually or in groups to showcase articles, pages, or key resources, and they are fully responsive for a seamless experience across devices.
When to Use
- To highlight or feature content in a visually compelling way.
- When you want to draw attention to a key action or page (e.g., featured article, product, or campaign).
- To create visual emphasis within a section or as a standalone component.
How To
Create a Featured Cards Component
- Navigate to the page you’d like to update, and enter the Edit Mode for the page.
- Choose the Section you would like to add the component, click the plus (+) icon.
- Select the Featured Cards component for the component list.
Add a Component Header
- Click Add a Component Header button.
Select the Triangle Color
- Select the Triangle Color that will display on the cards.
To Add A Featured Card
Featured cards are meant to act as links to other pages. Each card requires a link.
- Link: start typing the title of the page you want to link to.
- Select the page from the list when it appears.
- If you are linking to a page outside the CU Denver website, paste the full URL (for example, https://www.example.edu) into the URL field instead.
- Add the image to the card by clicking the Add Media button to select from existing media library or upload a new image.
- Heading: this is the card title.
- Subheading: this is the supporting sentence on the card.
To Add Additional Card
- Click the Add Featured Card button.
Save Component
- Once all cards are added, click Save.
User Experience Best Practices
- Keep it short and scannable. Use concise headlines and brief descriptions to clearly explain the value.
- Include clear, descriptive button labels. Buttons should explain where the user will go, such as “View Degree Programs” or “Explore Campus Events,” instead of vague phrases like “Learn More.”