Scholarships
UNC Charlotte awards more than 1,600 scholarships each year, either merit-based or need-based.
Icon Card
The Icon Card block allows users to display an icon alongside text in a visually appealing card format. It includes a customizable icon, a heading title, a description and a call-to-action button. This block is ideal for highlighting key features or services, making it easier for users to create engaging, informative and interactive content.
When To Use This Component
Use the Icon Card component to highlight key features, services, or resources in a visually structured, easy-to-scan format. This component presents a combination of an icon, a short title, and a brief description in a clean, clickable layout, making it ideal for breaking down complex offerings into clear, visually appealing sections. Icon Cards help guide users to important content, create engaging entry points to deeper pages, and make it easier for prospective students, faculty, and visitors to quickly navigate and find relevant information, all while maintaining visual consistency and clarity.
USE CASES OR SCENARIOS
- Highlighting campus or student services
- Showcasing program features or benefits
- Providing quick access to resources or tools
- Organizing content on landing pages or overview sections
Component Do’s & Don’ts
There might be a time when you don’t know whether to use a Icon Card component or not. Here are some examples of how to effectively use a Icon Card component and when you shouldn’t use one:
DO
Keep the title short and descriptive so users can quickly understand the content at a glance, and write brief, scannable descriptions that support the CTA without overwhelming the user. Use icons that clearly relate to the content and reinforce meaning, and ensure the CTA button clearly communicates the intended action. Group Icon Cards with thematically related content to create a cohesive, intuitive experience for users.
DON’T
Do not use excessive characters in titles, descriptions, or link text, and avoid unbalanced amounts of text between items within the same row, as this can negatively affect readability and layout. Refrain from using long titles or descriptions that may break the design, and avoid generic or unrelated icons that could confuse users. Don’t use unrelated actions or topics within the same group, as this can overwhelm users and reduce clarity. If additional components or content are needed, use the Blocklink Card or Link List components instead.
Component Design Options
Below are the Icon Card component design options, with explanations of each and guidance on proper usage.
EDITABLE PARTS:
- Block Heading:
- Show Block Heading: Option to turn off or on the header.
- Eyebrow Text (optional): An eyebrow text is a small line of text that appears above the title. Its purpose is to provide context, category information, or a subtle introduction to the main heading without drawing as much attention as the headline itself.
- Title (optional): A header title should clearly convey the blocks main topic, be visually prominent, and guide visitors through the content while maintaining readability and accessibility.
- Description (optional): The description provides a brief, clear summary that supports the header title and helps visitors quickly understand the block content.
- Button (optional): The button prompts users to take a specific action. Its text should be short, clear, and compelling, and the linked URL must be correct and active to ensure users reach the intended destination.
- Button Color: Green, Gold
- Block Options:
- Background Color: Gray, Black, White (For ADA Compliance, the colors you choose will alter the card color)
- Card Color: Gray, Black, White (For ADA Compliance, the colors you choose will alter the background color)
- Icon Card Card:
- Icon: Choose from hundreds of icons to best represent your content, and use the search bar to quickly find the one you need.
- Title (optional): The title should clearly communicate the block’s primary topic. Keep titles concise, focused and short.
- Description (optional): The description provides a brief, clear summary that supports the CTA title and helps visitors quickly understand the block content.
- Link (optional): The button prompts users to take a specific action. Its text should be short, clear, and compelling, and the linked URL must be correct and active to ensure users reach the intended destination.
The example below shows the Icon Card in use, along with the selected configuration options.
- Block Heading:
- Show Block Heading: Yes
- Title: How to get in touch
- Description: Undergraduate Admissions is open 8 a.m. to 5 p.m., Monday-Friday…
- Block Options:
- Background Color: White
- Card Color: Black