CU Utilities
Bootstrap 4 has a robust set of builtin utility classes to handle things like borders, padding, margin, etc. Some utility classes utilize color, and we have come up with an established set of CU branded color options for these. These classes may be used by developers when implementing/developing widgets, as well as by site builders when configuring widgets.
Borders
| Class | RGBA value | Visual |
| CU_white | (255, 255, 255, 1) | |
| CU_black | (0, 0, 0, 1) | |
| CU_grayLight | (221, 221, 221, 1) | |
| CU_gray | (153, 153, 153, 1) | |
| CU_grayDark | (89, 89, 85, 1) | |
| CU_goldLight | (225, 214, 187, 1) | |
| CU_gold | (207, 184, 124, 1) | |
| CU_goldDark | (165, 150, 105, 1) |
Border Width
| Class | Value | Visual |
| border-1 | border-width: 1px; | |
| border-2 | border-width: 2px; | |
| border-3 | border-width: 3px; | |
| border-4 | border-width: 4px; | |
| border-5 | border-width: 5px; |
Backgrounds
| Class | RGBA value | Visual |
| bg-CU_transparent | (0, 0, 0, 0) | |
| bg-CU_white | (255, 255, 255, 1) | |
| bg-CU_whiteTransparent | (255, 255, 255, .7) | |
| bg-CU_black | (0, 0, 0, 1) | |
| bg-CU_blackTransparent | (0, 0, 0, .7) | |
| bg-CU_grayLight | (221, 221, 221, 1) | |
| bg-CU_gray | (153, 153, 153, 1) | |
| bg-CU_grayDark | (89, 89, 85, 1) | |
| bg-CU_goldLight* | (225, 214, 187, 1) | |
| bg-CU_gold* | (207, 184, 124, 1) | |
| bg-CU_goldDark* | (165, 150, 105, 1) |
Text Color
| Class | RGBA value | Visual |
| text-CU_white | (255, 255, 255, 1) | Sample |
| text-CU_black | (0, 0, 0, 1) | Sample |
| text-CU_gold | (207, 184, 124, 1) | Sample |
Approved Color Combinations
| Text Class | Background Class | Visual |
| text-CU_black | bg-CU_white | Sample |
| text-CU_black | bg-CU_whiteTransparent | Sample |
| text-CU_white | bg-CU_black | Sample |
| text-CU_white | bg-CU_blackTransparent | Sample |
| text-CU_gold | bg-CU_black | Sample |
| text-CU_black | bg-CU_grayLight | Sample |
| text-CU_black | bg-CU_gray | Sample |
| text-CU_white | bg-CU_grayDark | Sample |
| text-CU_black | bg-CU_goldLight | Sample |
| text-CU_black | bg-CU_gold | Sample |
| text-CU_black | bg-CU_goldDark | Sample |
Combo Classes and FF Template Numbers
| Combo Class | F&F Template Number | Visual |
| combo-CU_text-black-bg-white | combo-TemplateOne | Sample |
| combo-CU_text-black-bg-whiteTransparent | combo-TemplateSix (future state on F&F) | Sample |
| combo-CU_text-white-bg-black | combo-TemplateThree | Sample |
| combo-CU_text-white-bg-blackTransparent | combo-TemplateSeven (future state on F&F) | Sample |
| combo-CU_text-gold-bg-black | combo-TemplateFive | Sample |
| combo-CU_text-black-bg-grayLight | combo-TemplateEight (future state on F&F) | Sample |
| combo-CU_text-black-bg-gray | combo-TemplateNine (future state on F&F) | Sample |
| combo-CU_text-white-bg-graydark | combo-TemplateFour | Sample |
| combo-CU_text-black-bg-goldLight | combo-TemplateTen (future state on F&F) | Sample |
| combo-CU_text-black-bg-gold | combo-TemplateTwo | Sample |
| combo-CU_text-black-bg-goldDark | combo-TemplateEleven (future state on F&F) | Sample |