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
This component should be used when you want to present a combination of an icon, a short title and a very short description in a clean, clickable layout. These cards are perfect for breaking down complex offerings into visually appealing sections, making it easier for prospective students, faculty and visitors to navigate and find relevant details.
USAGE EXAMPLES
- Campus Services: Highlight important student services like counseling, libraries or career centers with icons to quickly guide users to relevant sections.
- Student Services: Highlight key student resources like “Financial Aid,” “Housing” and “Student Clubs” with an icon for each service, making it easy for students to find relevant support.
Component Dos & Don’ts
There might be a time when you don’t know whether to use a block links component or not. Here are some examples of how to effectively use a block link component at Charlotte and when you shouldn’t use one:
DO
Use the icon card component for highlighting key features or services, making it easier for users to create engaging, informative and interactive content.
DON’T
Do not use a lot of characters for titles, descriptions and link texts. Don’t use unbalanced amounts of text between items in a row. If more components are required, use the blocklink card or list link components instead.
Component Design Options
Below you will find an example of the block links component and its various design options.
Editable Parts – section
- Title (optional)
- Description (optional)
- Button Text and Link (optional)
- Button Color: Green/Gold
Editable Parts – component
- Icon
- Title (optional)
- Description (optional)
- URL Text and Link (optional)
Show Block Heading: Show / Hide
Color Combo: Gray, Black, White
Button Color: Green, Gold