Blocklink Cloud
Blocklink Cloud component serves as a way to organize and display a small number of related links in a structured manner with a simple CTA button.
When To Use This Component
This component should be used when you want to display between 2 and 4 links. Using this component will give them prominence on the page and will allow them to be contextualized with other like pages or resources.
USE CASES OR SCENARIOS
- Provide next step CTAs on an admissions page (ex. visit, apply, request info)
- Link to departments within a college (ex. architecture, art & art history, dance, music)
Component Do’s & Don’ts
There might be a time when you don’t know whether to use a Blocklink Cloud component or not. Here are some examples of how to effectively use a Blocklink Cloud component and when you shouldn’t use one:
DO
Use the block links cloud component when you want to prominently display a few links or CTAs that relate to each other thematically.
Component Character Limit:
Below are the recommended character limits for each title.
2 titles:
- Use no more than 40 total characters (including spaces) across both titles. You may divide the character count between the two titles however you prefer, as long as the combined length stays within the 40 character limit. See example below:
3 titles:
- Use no more than 45 total characters (including spaces) across both titles. You may divide the character count between the three titles however you prefer, as long as the combined length stays within the 45 character limit. See example below:
4 titles: Maximum Recommended
- Use no more than 50 total characters (including spaces) across both titles. You may divide the character count between the four titles however you prefer, as long as the combined length stays within the 50 character limit.
DON’T
Use an excessive amount of characters which will push the text off the page. Exceeding character limits may cause titles to appear too close together, resulting in a cluttered and unbalanced layout. This can conflict with brand standards and may push the CTA button outside the component container. Think small. If you want to link out to a large number of pages or resources, use the block link card or link list instead.
Component Design Options
Below are the Blocklink Cloud 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.
- 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
- Block Link Cloud Item:
- Title: The title should clearly communicate the block’s primary topic. Keep titles concise and focused, and adhere to the character limits outlined in the Do and Don’t section above.
- Link: The call-to-action (CTA) text encourages users to take a specific action. In this block, the link text is not displayed but is replaced by a button. For ADA compliance, link text is still required, and the linked URL must be correct and active to ensure users reach the intended destination.
The example below shows the Blocklink Cloud in use, along with the selected configuration options.
- Block Heading:
- Show Block Heading: Hide
- Block Options:
- Background Color: Black