Icon Cards
Advanced Training Module 3: Featured Content
Icon Cards provide a simple and visually engaging way to highlight important information, resources, services, or actions on your website. Similar to Featured Cards, they combine a title, description, and call to action, but use icons instead of images to create a cleaner and more compact design.
Because they require less visual space than Featured Cards, Icon Cards work particularly well for presenting multiple options or pathways in a consistent, easy-to-scan format.
Common uses include:
- Quick links
- Service directories
- Resource hubs
- Contact options
- Website support resources
- Frequently accessed tools
When to Use Icon Cards
Use Icon Cards when visitors need to choose between several options or destinations.
Examples include:
Student Resources
- Academic Support
- Awards & Scholarships
- Career Services
Website Services
- Training
- Documentation
- Request Support
Contact Options
- Phone
- Book a Meeting
Icon Cards work best when the content is concise and action-oriented.
Icon Cards vs Featured Cards
Although both blocks highlight content, they have different strengths.
Featured Cards
Use:
- Images
- Longer descriptions
- Visual storytelling
Best for:
- Homepages
- Programs
- Services
- recruitment content
Icon Cards
Use:
- Icons
- Short descriptions
- Compact layouts
Best for:
- Quick links
- Resource directories
- Task-based navigation
- Support information
If imagery is not essential, Icon Cards often provide a cleaner and more efficient layout.
Adding an Icon Cards Block
To add an Icon Cards block:
- Click the + button and search for Icon Cards.
- Select the block.
- Add a title and description to each card.
- Select an icon.
- Add a button or link destination.
- Save your changes.
A row of icon cards will be added to your page.
Choosing an Icon
Each Icon Card includes an icon that helps communicate purpose visually.
Choose icons that clearly relate to the content.
Examples:
| Content | Example Icon |
|---|---|
| Contact Information | Phone or Email |
| Documentation | File or Book |
| Training | Graduation Cap |
| Support | Headset |
| Events | Calendar |
| News | Newspaper |
Icons should support the content, not replace clear text.
Important: Never rely on icons alone. Visitors should still be able to understand the purpose of the card from its title and description.
Creating Effective Icon Cards
Each card should contain three key elements.
Title
Use a concise, descriptive title.
Examples:
- Request Support
- Documentation
- Upcoming Events
- Contact Us
Try to keep titles short and easy to scan.
Description
A brief description provides additional context.
Example: Browse guides, tutorials, and training resources for managing your website.
Descriptions should explain why the destination is useful.
Call to Action
Each card should guide visitors toward a destination.
Examples:
- Learn More
- View Resources
- Request Help
- Browse Events
Keep button labels clear and action-oriented.
Layout Options
The Icon Cards block includes several display options.
Block Heading
Add a heading above the group of cards.
Number of Columns
Control how many cards appear in each row.
Typical options include:
- 2 columns
- 3 columns
- 4 columns
Choose a layout that balances readability and visual appearance.
Background Colour
Many configurations include:
- White background
- Grey background
These options can help separate sections of a page visually.
Best Practices
Choose Meaningful Icons
Icons should reinforce the content and be immediately recognizable.
Keep Content Short
Icon Cards are designed for quick scanning.
Use Consistent Language
Titles and descriptions should follow a similar writing style.
Focus on Actions
Most Icon Cards should help visitors complete a task or find information.
Limit the Number of Cards
Too many options can overwhelm visitors and reduce effectiveness.
-
In this video, we are going to explore using Icon Cards for your website’s content.
Icon Cards are very similar in functionality and appearance to Featured Cards. The difference being instead of a featured image, you use icons instead.
An example set of icon cards is shown in the screen in different customization options you can go for.
Now that we have explained the purpose of a Icon Cards block and how it can improve your website’s content, we will now show you how to add them to your pages.
First, you want to go into editing mode of the page you want to add a block into. Then navigate to the block menu and add the block to your page.
Once its on your page, you can enter the information you want into each card.
If you want to insert more information in each card, lets say a button, or change the icon in a card, you can do so by clicking on the card you want to edit – a menu on the right should appear.
From there you can change your card’s icon or add a button link.
If you want to add another card, select anywhere in the block and click “select icon cards.” A blue plus button should appear on the bottom right of the block. Click on that and a new card should appear
If you want to customize the block as a whole, select the whole block using the same method you just did to add another card.
A menu on the right should appear, and from there you can:
- Add a header
- Add a description
- Choose background colours
- Change your column amount
As well as change card specific appearances such as background colours, card shadows, icon background, or icon shadows.
And by finishing those steps, we have now successfully added Icon Cards to a page.
Try it Out!
- Add an Icon Cards block to a page.
- Replace the default icons.
- Add titles and descriptions.
- Add links or buttons to each card.
- Experiment with different column layouts.
- Preview the page and evaluate how easy it is to scan and navigate.