UW Credit Union's colors follow a Marketing-approved color palette.
In the absence of color classes, elements will use the default gray text color and the default link color.
Color classes may be applied to any element. Child elements and anchor tags will assume the text color from any parent with a color specified.
<body>. Therefore, this class is only needed to set the default color on text that would normally be another color, i.e. text inside an <a>.
To ensure proper contrast of text against background, only use the color combinations displayed below. Other color combinations may not be accessible.
Use the display and width utility classes to change the default display or width of an element.
display:block;
display:inline-block;
display:inline;
display:flex;
width:auto;
width:100%;
These items float on all screen sizes.
These items float on MD+ screen sizes.
This text is indented on all screen sizes using .indent
This text is indented on medium screens and larger using .indent-md. On smaller screens, where screen real estate is limited, it is not indented to allow more horizontal space for the text.
Use horizontal rules to divide page content into logical sections. Vertical margins are automatically reduced on XS and SM screen sizes to save screen real estate.
The line below only appears on MD+ screen sizes.
Use the padding and margin utilty classes to override the default padding or margin on any element.
By default, 1 padding unit = 5px. (An app may override this value with the $padding-unit SASS variable.)
display:block;.
display:none;.
UW Credit Union uses 4 major breakpoints, which offer 5 target device/viewport sizes for controlling layout.
UW Credit Union uses utility classes to control visibility of elements at different device or viewport sizes. When an elelent is visible, its display is set to display: block;.
When you need to control visibility on an inline element, such as <span>, use the utility classes for inline visibility. This is helpful for shortening link and button text to fit small screens. When an elelent is visible, its display is set to display: inline;.
UW Credit Union's Marketing-approved font for the Web is Gotham Narrow. Our fallback font stack is Arial, Helvetica, sans-serif. Our base font size is 16px for XS, SM and 14px for MD+.
UW Credit Union sets font sizes for headings <h1> through <h6> and increases top margins if they fall directly after a paragraph.
For accessibility, avoid skipping levels in the heading hierarchy. For example, do not skip from an <h1> to an <h3>. If you want the visual style of an <h3>, use a class like .looks-like-h3 to visually style any block element as a heading.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque elementum dolor nisi, sed lobortis neque convallis a. Sed sodales vitae nibh sed mattis.
You can override the default font size on any element using the font size utility classes.
Note: Font sizes classes should be applied to block elements only, such as <p> or <div>. Applying these classes to inline elements, such as <span>, will result in incorrect line height.
XX-Large
X-Large
Large
Default Size
Small
XSmall
XXSmall
You can override the default font styling on any element using the font style utility classes.
Bold
Semibold
Normal
Normal Italic*
Light
Capital
Small Capital
Xsmall Capital
*Note: Our current web font package only provides italic for the normal font weight.
UW Credit Union sets a standard line height for copy. You can override the standard line height for elements that require more compact spacing using the .txt-line-normal class.
A paragraph with standard line height. Cupcake ipsum dolor sit amet cake sweet liquorice marzipan. Donut pie apple pie topping sweet. Lemon drops marshmallow pie halvah marshmallow soufflé cotton candy. Chupa chups pudding pie wafer cheesecake caramels dragée halvah danish.
Text with Less
Line Spacing
Indented Lists:
Left-Aligned Lists: