Skip to Content

Featured Cards

Advanced Training Module 3: Featured Content

Featured Cards are designed to draw attention to important content, services, resources, and destinations on your website. They combine images, text, and calls to action into visually prominent panels that encourage visitors to explore further.

Unlike Card Blocks, which automatically display categorized content, Featured Cards are created manually. This gives you complete control over the message, imagery, and destination for each card.

Featured Cards are commonly used on:

They help answer the question: “What do I want visitors to do next?”

Use Featured Cards when you want to highlight a small number of important actions or destinations.

Examples include:

Key Services

Programs and Resources

Featured Cards work best when you want visitors to quickly identify the next step they should take.

Although they may look similar, these blocks serve different purposes.

Created manually.

You choose:

Best for:

Card Blocks

Generated automatically from content.

Best for:

If you need complete control over the content, use Featured Cards.

To add a Featured Cards block:

  1. Click the + button and search for Featured Cards.
  2. Select the block.
  3. Add a title and description to each card.
  4. Add an image if desired.
  5. Configure the destination link.
  6. Save your changes.

By default, the block typically creates a row of cards that can be customized further.

Every Featured Card contains three key elements.

Title

The title should clearly communicate the content or action.

Good examples:

Keep titles concise and easy to scan.

Description

A brief description provides additional context.

Example: Learn about admission requirements, deadlines, and application procedures.

Descriptions should help visitors understand why they should click.

Call to Action

Each card should link to a specific destination.

Examples include:

The destination should match the visitor’s expectations.

Image (Optional)

Images can make Featured Cards more visually engaging.

Choose images that:

Images should enhance the card, not distract from the content.

Block Layout Options

The Featured Cards block includes several layout options.

Block Heading

Add an overall heading above the card collection.

Number of Columns

Choose the number of cards displayed per row.

Common options include:

The ideal number depends on the amount of content and available page space.

Background Colours

Customize:

These options can help separate sections visually and improve readability.

Card Shadows

Optional card shadows can increase visual separation between cards and the page background.

Use shadows consistently throughout your site.

Common Homepage Example

Many homepages use Featured Cards to direct visitors toward important areas.

Example:

Explore Our Programs

Undergraduate Programs
Learn about degree options and admission requirements.

Graduate Programs
Explore research opportunities and advanced study.

Student Resources
Access services and support resources.

This type of layout quickly helps visitors self-identify and navigate to relevant content.

Best Practices

Focus on Visitor Needs
Featured Cards should help visitors accomplish tasks, not simply promote everything.

Use Strong Titles
Visitors often scan card titles before reading descriptions.

Limit the Number of Cards
Three to four cards are often easier to understand than large collections.

Include Clear Calls to Action
Every card should lead somewhere meaningful.

Use Consistent Images
Consistent imagery creates a more professional appearance.

Try it Out!

This site uses cookies to offer you a better browsing experience. Find out more on how we use cookies and how you can change your settings.