Colors
The default color is the foundation blue default color. The colors that can be added are:
cu-orangebrickregaliadiplomastate-flagbowmanhowards-rockinnovation
Buttons
Structure
Each button should have the below structure:<a class="button cu-btn" href="#"></a>
Or<button class="button cu-btn"></button>
There are different utility classes in which can be added to button structures to style them as desired. They include colors, sizes, and type.
Icon Button Style examples and instructions on icon selection
This is a style of link/button different from the typical button. It provides the option for an icon with an underline accent for text.
We use Line Awesome to provide our icons. Please do not use inappropriate icons, or brand icons outside of the social media set of icons.
<a class="cu-accent-link" href="#">
<span class="cu-icon cu-bg-pur600">
<span class="las la-calculator"></span>
</span>
<span class="cu-accent cu-bc-pur600">Cost Calculator</span>
</a>
Cost Calculator
Accessibility guidelines for links
(descriptive CTAs, visual indicators besides color)
Link text must be indicative of the content to which it leads, usually an abbreviated form of the title of the linked-to page. Properly note (beside link and in the title attribute) any special characteristics of the link, including new window, file type and size, members-only restriction, required software, etc.
Clearly conveying link content and linked-to page characteristics improves the usability of link navigation.
Avoid the incorrect practice of using the language "click here" when creating links. The elements built into the templates are sized to be at least 48 pixels high and wide on mobile and other touchscreen devices for accessibility purposes.
Do not rely on colors alone to convey link text. The templates paragraph text uses color and underline to display a link.
