Pattern Library
A comprehensive demonstration of Bootstrap 5.3.8 components styled with the UNM 2026 Style Guide system.
Typography & Content
Heading 1 (3.0rem)
Heading 2 (2.25rem)
Heading 3 (1.5rem)
Heading 4 (1.25rem)
Heading 5 (1.0rem)
Heading 6 (0.875rem)
This is a lead paragraph. It stands out from regular text.
This is a standard paragraph. It uses the base font size and line height. This is small text.
A well-known quote, contained in a blockquote element.
- This is a list.
- It appears completely unstyled.
- Structurally, it's still a list.
- Inline item
- Inline item
- Inline item
Color System
Complete custom color palette with color names, SCSS variables, and Hex values.
Lobo Gray Scale
Silver Scale
White Shaded Scale (Base #FFFFFF)
Lobo Gray Tint Scale (Base #63666A)
Buttons
Solid
Outline
Sizes
Forms
Components
Card title
Some quick example text to build on the card title and make up the bulk of the card's content.
Go somewherePrimary card title
Some quick example text to build on the card title and make up the bulk of the card's content.
Example Heading New
More Components
Navs & Tabs
Home tab content.
Profile tab content.
Contact tab content.
Pills
Pagination
Button Groups
Collapse
Carousel
First slide label
Some representative placeholder content for the first slide.
Second slide label
Some representative placeholder content for the second slide.
Third slide label
Some representative placeholder content for the third slide.
Layout & Helpers
Tables
| # | First | Last | Handle |
|---|---|---|---|
| 1 | Mark | Otto | @mdo |
| 2 | Jacob | Thornton | @fat |
| 3 | Larry the Bird | ||
Figures
Stacks & Vertical Rule
Ratios
Placeholders (v5 Feature)
Helpers
Color & Background (text-bg)
Colored Links
Icon Link
Focus Ring
Utilities
Text Utilities
Start aligned text.
Center aligned text.
End aligned text.
Truncated text example is here.
Lowercased Text.
Uppercased Text.
capitalized text.
.fs-1 text
.fs-6 text
Backgrounds & Opacity
Borders
Shadows
Stretched Link
Clearfix & Float
Object Fit
Flexbox & Auto Margins
Position & Z-index
Sizing & Interactions
User select all (click to select)
User select none
Additional Utilities & Helpers
Close Button
Visibility
Vertical Alignment
Overflow
.overflow-auto on an element with set width and height dimensions. By design, this content will vertically scroll..overflow-hidden on an element with set width and height dimensions.Accessibility
Tab through the interactive elements below to verify visible focus outlines.
This text is only for screen readers. .visually-hidden present.