What is it?

The latest update to MacSites introduces a new feature: Brighter World Icon Cards. This feature is part of our McMaster Brighter World brand evolution, designed to enhance the visual appeal and usability of MacSites. Circle cards are versatile content containers that can include text, images, and now, icons that align with our new brand identity. These icons help to differentiate content and improve user engagement visually.

How to use it?

1. Go to the editor for the page where you want to add a card.

2. Select the ‘Add Element’ button and choose the ‘Thumbnail Card’ option.

3. Within the Thumbnail Card element, find the ‘Image Style’ option and choose ‘Circle’.

4. Under ‘Circle Content Type’ select ‘Brighter World 2024 Icon’. Choose the name of the icon you’d like to use. The icon name will match the title exactly as it is in the icon library. The helper text includes a link to the icon library for easy reference.

5. Enter the title, text and links you want to display on the card.

6. Use the ‘Card Size’ and ‘Card Grid’ options to adjust the card’s appearance.

7. Publish Your Changes: Once you’re satisfied with the card’s content and appearance, click Publish or Update to make your changes live.

Which page templates can use it?

Circle cards are part of the suite of Thumbail Card options and are available on both Landing and Default page templates.

Use Cases

Highlighting Services

Use cards with icons to showcase different services your group or department offers. Each card can represent a unique service, with an icon that visually represents the service, making it easier for users to identify and understand.

Highlighting Strategic Goals or Priorities

Use cards with icons to clearly present your strategic goals or priorities. Each card can represent a different goal, with an icon that visually signifies the objective. This makes it easier for stakeholders to quickly grasp the key focus areas.

Icons to Represent Link Destinations

Use cards with icons to indicate where the card link will point. Each card can include a brief description and an icon that represents the type of content or destination (e.g., external website, internal page, document download). This helps users quickly understand the nature of the link and navigate more efficiently.

Note: This documentation was generated with the assistance of AI to ensure clarity and comprehensiveness.