How to use
Z-index utilities
Z-index utilities control the stacking order of elements when items overlap. A higher z-index places an element above another element with a lower z-index. These classes are most useful for sticky bars, dropdowns, overlays, drawers, modals, floating controls, and decorative layers.
How z-index works
- Use z-index when elements overlap and one item needs to appear above another.
- Z-index works best on positioned elements such as relative, absolute, fixed, or sticky elements.
- A larger value appears above a smaller value when both elements share the same stacking context.
- Keep values limited and intentional so layering stays predictable across the site.
Recommended scale
- z-10 raised content or minor overlap
- z-20 sticky bars and pinned elements
- z-30 menus and dropdown panels
- z-40 drawers and larger overlays
- z-50 modals and priority interface layers
- z-100 rare override use only
Basic usage
Add a z-index utility directly to the element that needs to stack above or below another. In most cases, pair it with an existing positioning class or with a component that already establishes positioning behavior.
<div class="relative z-10">Layer above base content</div>
<div class="sticky z-20">Sticky bar</div>
<div class="absolute z-30">Dropdown panel</div>
<div class="fixed z-50">Modal or overlay content</div>Responsive usage
Responsive variants let layering change at different breakpoints. This is useful when a menu, toolbar, or utility bar behaves differently across screen sizes.
<div class="z-10 lg:z-30">
This element stacks normally at small sizes
and rises above more content at large sizes.
</div>Things to watch for
- Z-index does not fix overlap unless the element can participate in stacking.
- A child cannot always escape the stacking context created by its parent.
- Very large z-index values make systems harder to manage and debug.
- Use the smallest value that solves the problem.
Best practice
Treat z-index as a small system, not a one-off fix. Reuse the shared utility scale instead of assigning random high values. This keeps sticky navigation, dropdowns, drawers, modals, and decorative elements from competing with each other unexpectedly.
Copy Text
Use copyit on any container when you want users to copy its visible text with one click.
This pattern is useful for image paths, embed snippets, short code samples, and content tokens.
The utility reads the container text, copies it to the clipboard, shows a toast message, and adds a pulse effect for feedback. The toast container is created automatically, so no extra toast markup is required.
Example
/media/marketing/uvu-home/hero-campus.jpg
How to use it
- Add
copyitto any container that should copy its own visible text. - Click the container to copy the text to the clipboard.
- Keyboard users can focus the item and press
EnterorSpace. - Use short, clean text inside the container so only the needed value is copied.
- The script creates the toast container automatically, so no separate toast markup is needed.
- The pulse effect uses the existing decoration animation classes already used in the guide system.
Markup pattern
| Use | Markup | Result |
|---|---|---|
| Basic text copy | <div class="copyit">https://www.uvu.edu/</div> |
Copies the URL text on activation |
| Path or asset name | <p class="copyit">/media/marketing/uvu-logo.svg</p> |
Copies the file path on activation |
| Card or styled block | <div class="card-lifted copyit">hero-banner-dark</div> |
Copies the visible card text and keeps the existing card style |
Best use cases
| Content type | Good fit | Notes |
|---|---|---|
| Image paths | Yes | Helpful for asset libraries and reference pages |
| Short code snippets | Yes | Keep the copied text short and exact |
| Long paragraphs | No | Too much extra text can be copied by accident |
| Mixed content blocks | Use care | Everything visible in the container can be included in the copied result |
Notes
- This pattern copies text only, not HTML markup.
- The copied value comes from the container’s visible text content.
- The script adds focus support when needed so non-interactive elements can still be activated by keyboard.
- For the cleanest result, keep labels, helper text, and icons outside the
copyitelement unless they should also be copied.
Font Weight Utilities
The typography system uses numeric font-weight tokens and utility classes. The current CSS supports
.fw-100 through .fw-900, plus a few alias classes for common weights.
| Token | Utility Class | Alias | CSS Weight |
|---|---|---|---|
--fw-100 | .fw-100 | — | 100 |
--fw-200 | .fw-200 | — | 200 |
--fw-300 | .fw-300 | .fw-light, .fw-sm | 300 |
--fw-400 | .fw-400 | .fw-regular, .fw-md | 400 |
--fw-500 | .fw-500 | — | 500 |
--fw-600 | .fw-600 | — | 600 |
--fw-700 | .fw-700 | .fw-bold, .fw-lg | 700 |
--fw-800 | .fw-800 | — | 800 |
--fw-900 | .fw-900 | — | 900 |
Type Family Reference
These are the font family tokens used by the typography system. Heading and display utilities pull from the primary and secondary brand families,
while body copy uses the body font. Weight availability can vary by font family, but the guide weight scale is documented with the shared
--fw-* tokens and .fw-* utilities above.
| Token | Purpose | Current Value |
|---|---|---|
--font-body | Body copy, paragraphs, and list text | "arial", sans-serif |
--font-primary | Primary brand headings and links | "stratum-1-web", sans-serif |
--font-secondary | Display and heading utility scale | "proxima-nova", sans-serif |
Line Height
This is a reference chart only. The typography system already assigns line-height through the real line-height tokens and type classes. The root base size is 18px. For WCAG text spacing guidance, refer to W3.org: W3.org - Text spacing
In the current CSS, body copy uses --lh-p, small type uses --lh-sm or --lh-xs,
and headings use --lh-h1 through --lh-h6.
| Line Height Multiplier | 16px | 18px | 20px | 22px | 27px | 32px | 39px | 48px | 58px | 71px | 86px | 105px | 127px |
|---|---|---|---|---|---|---|---|---|---|---|---|---|---|
| HEADINGS: 1.2x | 19.2 | 21.6 | 24.0 | 26.4 | 32.4 | 38.4 | 46.8 | 57.6 | 69.6 | 85.2 | 103.2 | 126.0 | 152.4 |
| LARGE TXT 20+: 1.4x | 22.4 | 25.2 | 28.0 | 30.8 | 37.8 | 44.8 | 54.6 | 67.2 | 81.2 | 99.4 | 120.4 | 147.0 | 177.8 |
| STANDARD LINE HEIGHT 20+: 1.5x | 24.0 | 27.0 | 30.0 | 33.0 | 40.5 | 48.0 | 58.5 | 72.0 | 87.0 | 106.5 | 129.0 | 157.5 | 190.5 |
| BODY TEXT: 1.6x | 25.6 | 28.8 | 32.0 | 35.2 | 43.2 | 51.2 | 62.4 | 76.8 | 92.8 | 113.6 | 137.6 | 168.0 | 203.2 |
| 1.75x | 28.0 | 31.5 | 35.0 | 38.5 | 47.25 | 56.0 | 68.25 | 84.0 | 101.5 | 124.25 | 150.5 | 183.75 | 222.25 |
Line Height Utility Reference
These are the utility classes and tokens currently available in the typography CSS.
| Utility Class | Token | Use |
|---|---|---|
.lh-xs | --lh-xs | Extra-small text and tighter utility cases |
.lh-sm | --lh-sm | Small text |
.lh-p | --lh-p | Paragraph and body text |
.lh-6 | --lh-h6 | Heading 6 scale |
.lh-5 | --lh-h5 | Heading 5 scale |
.lh-4 | --lh-h4 | Heading 4 scale |
.lh-3 | --lh-h3 | Heading 3 scale |
.lh-2 | --lh-h2 | Heading 2 scale |
.lh-1 | --lh-h1 | Heading 1 scale |
.lh-lg | --lh-lg | Large display type |
.lh-xl | --lh-xl | Extra-large display type |
.lh-xxl | --lh-xxl | Double extra-large display type |
Px : Rem : Pt
This conversion table uses the system base of 18px = 1rem. It is a guide reference only. In implementation, use the real typography tokens and utility classes first, then use rem values when you need custom design documentation.
| PX | = | REM | PT | PX | = | REM | PT | PX | = | REM | PT | PX | = | REM | PT |
|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|
| 1 | = | 0.0556 | 0.75pt | 2 | = | 0.1111 | 1.5pt | 3 | = | 0.1667 | 2.25pt | 4 | = | 0.2222 | 3pt |
| 5 | = | 0.2778 | 3.75pt | 6 | = | 0.3333 | 4.5pt | 7 | = | 0.3889 | 5.25pt | 8 | = | 0.4444 | 6pt |
| 9 | = | 0.5000 | 6.75pt | 10 | = | 0.5556 | 7.5pt | 11 | = | 0.6111 | 8.25pt | 12 | = | 0.6667 | 9pt |
| 13 | = | 0.7222 | 9.75pt | 14 | = | 0.7778 | 10.5pt | 15 | = | 0.8333 | 11.25pt | 16 | = | 0.8889 | 12pt |
| 17 | = | 0.9444 | 12.75pt | 18 | = | 1.0000 | 13.5pt | 19 | = | 1.0556 | 14.25pt | 20 | = | 1.1111 | 15pt |
| 21 | = | 1.1667 | 15.75pt | 22 | = | 1.2222 | 16.5pt | 23 | = | 1.2778 | 17.25pt | 24 | = | 1.3333 | 18pt |
| 25 | = | 1.3889 | 18.75pt | 26 | = | 1.4444 | 19.5pt | 27 | = | 1.5000 | 20.25pt | 28 | = | 1.5556 | 21pt |
| 29 | = | 1.6111 | 21.75pt | 30 | = | 1.6667 | 22.5pt | 31 | = | 1.7222 | 23.25pt | 32 | = | 1.7778 | 24pt |
| 33 | = | 1.8333 | 24.75pt | 34 | = | 1.8889 | 25.5pt | 35 | = | 1.9444 | 26.25pt | 36 | = | 2.0000 | 27pt |
| 37 | = | 2.0556 | 27.75pt | 38 | = | 2.1111 | 28.5pt | 39 | = | 2.1667 | 29.25pt | 40 | = | 2.2222 | 30pt |
| 41 | = | 2.2778 | 30.75pt | 42 | = | 2.3333 | 31.5pt | 43 | = | 2.3889 | 32.25pt | 44 | = | 2.4444 | 33pt |
| 45 | = | 2.5000 | 33.75pt | 46 | = | 2.5556 | 34.5pt | 47 | = | 2.6111 | 35.25pt | 48 | = | 2.6667 | 36pt |
| 49 | = | 2.7222 | 36.75pt | 50 | = | 2.7778 | 37.5pt | 51 | = | 2.8333 | 38.25pt | 52 | = | 2.8889 | 39pt |
| 53 | = | 2.9444 | 39.75pt | 54 | = | 3.0000 | 40.5pt | 55 | = | 3.0556 | 41.25pt | 56 | = | 3.1111 | 42pt |
| 57 | = | 3.1667 | 42.75pt | 58 | = | 3.2222 | 43.5pt | 59 | = | 3.2778 | 44.25pt | 60 | = | 3.3333 | 45pt |
| 61 | = | 3.3889 | 45.75pt | 62 | = | 3.4444 | 46.5pt | 63 | = | 3.5000 | 47.25pt | 64 | = | 3.5556 | 48pt |
| 65 | = | 3.6111 | 48.75pt | 66 | = | 3.6667 | 49.5pt | 67 | = | 3.7222 | 50.25pt | 68 | = | 3.7778 | 51pt |
| 69 | = | 3.8333 | 51.75pt | 70 | = | 3.8889 | 52.5pt | 71 | = | 3.9444 | 53.25pt | 72 | = | 4.0000 | 54pt |
| 73 | = | 4.0556 | 54.75pt | 74 | = | 4.1111 | 55.5pt | 75 | = | 4.1667 | 56.25pt | 76 | = | 4.2222 | 57pt |
| 77 | = | 4.2778 | 57.75pt | 78 | = | 4.3333 | 58.5pt | 79 | = | 4.3889 | 59.25pt | 80 | = | 4.4444 | 60pt |
| 81 | = | 4.5000 | 60.75pt | 82 | = | 4.5556 | 61.5pt | 83 | = | 4.6111 | 62.25pt | 84 | = | 4.6667 | 63pt |
| 85 | = | 4.7222 | 63.75pt | 86 | = | 4.7778 | 64.5pt | 87 | = | 4.8333 | 65.25pt | 88 | = | 4.8889 | 66pt |
| 89 | = | 4.9444 | 66.75pt | 90 | = | 5.0000 | 67.5pt | 91 | = | 5.0556 | 68.25pt | 92 | = | 5.1111 | 69pt |
| 93 | = | 5.1667 | 69.75pt | 94 | = | 5.2222 | 70.5pt | 95 | = | 5.2778 | 71.25pt | 96 | = | 5.3333 | 72pt |
| 97 | = | 5.3889 | 72.75pt | 98 | = | 5.4444 | 73.5pt | 99 | = | 5.5000 | 74.25pt | 100 | = | 5.5556 | 75pt |
| 101 | = | 5.6111 | 75.75pt | 102 | = | 5.6667 | 76.5pt | 103 | = | 5.7222 | 77.25pt | 104 | = | 5.7778 | 78pt |
| 105 | = | 5.8333 | 78.75pt | 106 | = | 5.8889 | 79.5pt | 107 | = | 5.9444 | 80.25pt | 108 | = | 6.0000 | 81pt |
| 109 | = | 6.0556 | 81.75pt | 110 | = | 6.1111 | 82.5pt | 111 | = | 6.1667 | 83.25pt | 112 | = | 6.2222 | 84pt |
| 113 | = | 6.2778 | 84.75pt | 114 | = | 6.3333 | 85.5pt | 115 | = | 6.3889 | 86.25pt | 116 | = | 6.4444 | 87pt |
| 117 | = | 6.5000 | 87.75pt | 118 | = | 6.5556 | 88.5pt | 119 | = | 6.6111 | 89.25pt | 120 | = | 6.6667 | 90pt |
| 121 | = | 6.7222 | 90.75pt | 122 | = | 6.7778 | 91.5pt | 123 | = | 6.8333 | 92.25pt | 124 | = | 6.8889 | 93pt |
| 125 | = | 6.9444 | 93.75pt | 126 | = | 7.0000 | 94.5pt | 127 | = | 7.0556 | 95.25pt | 128 | = | 7.1111 | 96pt |
| 129 | = | 7.1667 | 96.75pt | 130 | = | 7.2222 | 97.5pt | 131 | = | 7.2778 | 98.25pt | 132 | = | 7.3333 | 99pt |
| 133 | = | 7.3889 | 99.75pt | 134 | = | 7.4444 | 100.5pt | 135 | = | 7.5000 | 101.25pt | 136 | = | 7.5556 | 102pt |
| 137 | = | 7.6111 | 102.75pt | 138 | = | 7.6667 | 103.5pt | 139 | = | 7.7222 | 104.25pt | 140 | = | 7.7778 | 105pt |
| 141 | = | 7.8333 | 105.75pt | 142 | = | 7.8889 | 106.5pt | 143 | = | 7.9444 | 107.25pt | 144 | = | 8.0000 | 108pt |
| 145 | = | 8.0556 | 108.75pt | 146 | = | 8.1111 | 109.5pt | 147 | = | 8.1667 | 110.25pt | 148 | = | 8.2222 | 111pt |
| 149 | = | 8.2778 | 111.75pt | 150 | = | 8.3333 | 112.5pt | 151 | = | 8.3889 | 113.25pt | 152 | = | 8.4444 | 114pt |
| 153 | = | 8.5000 | 114.75pt | 154 | = | 8.5556 | 115.5pt | 155 | = | 8.6111 | 116.25pt | 156 | = | 8.6667 | 117pt |
| 157 | = | 8.7222 | 117.75pt | 158 | = | 8.7778 | 118.5pt | 159 | = | 8.8333 | 119.25pt | 160 | = | 8.8889 | 120pt |
| 161 | = | 8.9444 | 120.75pt | 162 | = | 9.0000 | 121.5pt | 163 | = | 9.0556 | 122.25pt | 164 | = | 9.1111 | 123pt |
| 165 | = | 9.1667 | 123.75pt | 166 | = | 9.2222 | 124.5pt | 167 | = | 9.2778 | 125.25pt | 168 | = | 9.3333 | 126pt |
| 169 | = | 9.3889 | 126.75pt | 170 | = | 9.4444 | 127.5pt | 171 | = | 9.5000 | 128.25pt | 172 | = | 9.5556 | 129pt |
| 173 | = | 9.6111 | 129.75pt | 174 | = | 9.6667 | 130.5pt | 175 | = | 9.7222 | 131.25pt | 176 | = | 9.7778 | 132pt |
| 177 | = | 9.8333 | 132.75pt | 178 | = | 9.8889 | 133.5pt | 179 | = | 9.9444 | 134.25pt | 180 | = | 10.0000 | 135pt |
| 181 | = | 10.0556 | 135.75pt | 182 | = | 10.1111 | 136.5pt | 183 | = | 10.1667 | 137.25pt | 184 | = | 10.2222 | 138pt |
| 185 | = | 10.2778 | 138.75pt | 186 | = | 10.3333 | 139.5pt | 187 | = | 10.3889 | 140.25pt | 188 | = | 10.4444 | 141pt |
| 189 | = | 10.5000 | 141.75pt | 190 | = | 10.5556 | 142.5pt | 191 | = | 10.6111 | 143.25pt | 192 | = | 10.6667 | 144pt |
| 193 | = | 10.7222 | 144.75pt | 194 | = | 10.7778 | 145.5pt | 195 | = | 10.8333 | 146.25pt | 196 | = | 10.8889 | 147pt |
| 197 | = | 10.9444 | 147.75pt | 198 | = | 11.0000 | 148.5pt | 199 | = | 11.0556 | 149.25pt | 200 | = | 11.1111 | 150pt |
It seems that you have reduce motion enabled!