Page Header
Design System Alpha
The University of Vermont Health Network website is based on a system of components. This style guide illustrates our design system, and the components that make it up.
Design System Alpha
Design System Alpha
Styles and Components
Color Palette
Type Styles
Gotham
Georgia
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut a leo justo. Suspendisse ornare nec nibh id interdum. In cursus auctor enim, in aliquet ante commodo non. Quisque quis lorem ac dui scelerisque efficitur id porta urna. Nullam eget metus venenatis, vehicula elit et, placerat turpis.
Mauris luctus, magna at rhoncus fringilla, tellus risus euismod quam, id bibendum enim dui in sapien. Proin ac elit id magna hendrerit aliquam. Praesent rutrum tellus id facilisis vestibulum. In aliquet neque urna, in pulvinar augue imperdiet sed. Morbi a massa dolor. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nulla tincidunt fringilla viverra. Curabitur rhoncus ut nibh ac vestibulum. Pellentesque vulputate fermentum tellus congue efficitur. Quisque elit neque, dignissim at consequat in, scelerisque at lacus.
Mauris luctus, magna at rhoncus fringilla, tellus risus euismod quam, id bibendum enim dui in sapien. Proin ac elit id magna hendrerit aliquam. Praesent rutrum tellus id facilisis vestibulum. In aliquet neque urna, in pulvinar augue imperdiet sed. Morbi a massa dolor. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nulla tincidunt fringilla viverra. Curabitur rhoncus ut nibh ac vestibulum. Pellentesque vulputate fermentum tellus congue efficitur. Quisque elit neque, dignissim at consequat in, scelerisque at lacus.
Buttons
Forms
Icons
Calls-To-Action
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam vitae placerat mi. Quisque bibendum lectus non ornare fermentum. Quisque nulla neque, bibendum in facilisis vitae, ornare et odio. Fusce eros nulla, vulputate vitae arcu at, venenatis sodales felis.
Cras in tincidunt nibh. Nam ac lorem at sapien efficitur dictum. Morbi blandit turpis nec leo mollis accumsan. Sed gravida pharetra tortor a mollis. Nam placerat rutrum odio vel fermentum. Nam cursus dignissim vulputate. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Cras lacinia, risus et aliquam fermentum, risus urna vestibulum ex, eu vestibulum est nunc sit amet nisi. Duis ornare lorem et ultricies euismod.
Fusce et velit velit. Pellentesque dignissim fringilla lectus ut sagittis. Sed id libero quis nunc malesuada commodo ut in velit. Suspendisse potenti. Proin felis felis, placerat non ante eu, tincidunt finibus tellus. Ut consequat metus sit amet velit pharetra fringilla. Donec congue euismod maximus. Sed eu congue justo, at sodales risus. Ut at aliquam orci, in sagittis eros. Quisque cursus ante eget neque lobortis convallis. Nullam commodo quam id quam venenatis, in mollis erat efficitur. Maecenas id purus convallis, condimentum eros eget, rutrum ligula. Duis venenatis ut velit ut varius. Nunc in maximus eros.
Link List with Two Columns
Link List with Three Columns
Link List with Two Columns and a CTA
Link List with Two Columns and Copy
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut a leo justo. Suspendisse ornare nec nibh id interdum. In cursus auctor enim, in aliquet ante commodo non. Quisque quis lorem ac dui scelerisque efficitur id porta urna. Nullam eget metus venenatis, vehicula elit et, placerat turpis.
Chunky Link List (no background)
A Chunky List of Links
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum fermentum magna quis tempor auctor.
Accordion
Accordion Layer with Copy and Button
Mauris luctus, magna at rhoncus fringilla, tellus risus euismod quam, id bibendum enim dui in sapien. Proin ac elit id magna hendrerit aliquam. Praesent rutrum tellus id facilisis vestibulum. In aliquet neque urna, in pulvinar augue imperdiet sed. Morbi a massa dolor. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nulla tincidunt fringilla viverra. Curabitur rhoncus ut nibh ac vestibulum. Pellentesque vulputate fermentum tellus congue efficitur. Quisque elit neque, dignissim at consequat in, scelerisque at lacus.
Accordion Layer with Link List and Copy
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut a leo justo. Suspendisse ornare nec nibh id interdum. In cursus auctor enim, in aliquet ante commodo non. Quisque quis lorem ac dui scelerisque efficitur id porta urna. Nullam eget metus venenatis, vehicula elit et, placerat turpis.
Nav Call-outs
Nav Call-out Title
Nav call-out description lorem ipsum dolor sit cursus auctor enim, in aliquet ante commodo non.
Nav Call-out Title
Nav call-out description lorem ipsum dolor sit amet, consectetur adipiscing elit ornare nec nibh id interdum. In cursus auctor enim, in aliquet ante commodo non.
Nav Call-out Title
Nav call-out description lorem ipsum dolor sit amet, consectetur adipiscing elit ornare nec nibh in aliquet ante commodo non.
Nav Call-out Title
Nav call-out description lorem ipsum dolor sit amet, in cursus auctor enim, in aliquet ante commodo non.
Media Card - Full Bleed - Hero
Media Card - Full Bleed
Media Card
Media Card Title Goes Here
Content Type
Media Card Title Goes Here
Content Type
Media Card Title Goes Here
Content Type
Media Card Title Goes Here
Content Type
Media Card Title Goes Here
Content Type
Media Card - Mixed Layout
Media Card Title Goes Here
Content Type
Media Card Title Goes Here
Content Type
Media Card Title Goes Here
Content Type
View all:
Media Card 50-50
Card 50-50 Title
Card description lorem ipsum dolor sit amet, consectetur adipiscing elit.
Card 50-50 Title
Card description lorem ipsum dolor sit amet, consectetur adipiscing elit.
Pull-quote (default)
Pullquote lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum fermentum magna quis tempor auctor.
First Lastname, MD
Pullquote with photo lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum fermentum magna quis tempor auctor.
First Lastname, MD
Pullquote hero lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum fermentum magna quis tempor auctor.
First Lastname
Card - Large
Firstname M. Long-Lastname, MD, PhD
Specialty Name, UVM Medical Group
Cardiology - Main Campus
111 Colchester Avenue
West Pavilion, Level 2
Burlington, Vermont 05401
Atrial Fibrillation, Heart Rhythm Disorders, Intracardiac Echocardiography, Learn more...
- Accepting new patients
802-555-1212
Firstname M. Long-Lastname, MD, PhD
Specialty Name, UVM Medical Group
Cardiology - Main Campus
111 Colchester Avenue
West Pavilion, Level 2
Burlington, Vermont 05401
Atrial Fibrillation, Heart Rhythm Disorders, Intracardiac Echocardiography, Learn more...
- Not accepting patients
802-555-1212
Firstname M. Long-Lastname, MD, PhD
Specialty Name, UVM Medical Group
Cardiology - Main Campus
111 Colchester Avenue
West Pavilion, Level 2
Burlington, Vermont 05401
Atrial Fibrillation, Heart Rhythm Disorders, Intracardiac Echocardiography, Learn more...
- Only sees hospital patients
802-555-1212
Cards - Large - Locations
Section - Section Name
Locations
Location Name
Main Campus
111 Colchester Avenue
West Pavilion, Level 2
Burlington, Vermont 05401
Monday - Friday 8:00 AM - 5:00 PM Saturday - Sunday Closed
802-555-1212
Location Name
Main Campus
111 Colchester Avenue
West Pavilion, Level 2
Burlington, Vermont 05401
802-555-1212
Cards - Small - Doctors
Cards - Small - Locations
Section - Section Name
Locations
Campus/Location Name
111 Colchester Avenue
West Pavilion, Level 2
Burlington, Vermont 05401
Campus/Location Name
111 Colchester Avenue
West Pavilion, Level 2
Burlington, Vermont 05401
Campus/Location Name
111 Colchester Avenue
West Pavilion, Level 2
Burlington, Vermont 05401
Content Block 25-75
Lorem Ipsum Dolor
Mauris luctus, magna at rhoncus fringilla, tellus risus euismod quam, id bibendum enim dui in sapien. Proin ac elit id magna hendrerit aliquam. Praesent rutrum tellus id facilisis vestibulum. In aliquet neque urna, in pulvinar augue imperdiet sed. Morbi a massa dolor. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nulla tincidunt fringilla viverra. Curabitur rhoncus ut nibh ac vestibulum. Pellentesque vulputate fermentum tellus congue efficitur. Quisque elit neque, dignissim at consequat in, scelerisque at lacus.
Lorem Ipsum Dolor
Mauris luctus, magna at rhoncus fringilla, tellus risus euismod quam, id bibendum enim dui in sapien. Proin ac elit id magna hendrerit aliquam. Praesent rutrum tellus id facilisis vestibulum. In aliquet neque urna, in pulvinar augue imperdiet sed. Morbi a massa dolor. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nulla tincidunt fringilla viverra. Curabitur rhoncus ut nibh ac vestibulum. Pellentesque vulputate fermentum tellus congue efficitur. Quisque elit neque, dignissim at consequat in, scelerisque at lacus.
Lorem Ipsum Dolor
Mauris luctus, magna at rhoncus fringilla, tellus risus euismod quam, id bibendum enim dui in sapien. Proin ac elit id magna hendrerit aliquam. Praesent rutrum tellus id facilisis vestibulum. In aliquet neque urna, in pulvinar augue imperdiet sed. Morbi a massa dolor. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nulla tincidunt fringilla viverra. Curabitur rhoncus ut nibh ac vestibulum. Pellentesque vulputate fermentum tellus congue efficitur. Quisque elit neque, dignissim at consequat in, scelerisque at lacus.
Notables
Vestibulum fermentum magna quis tempor auctor
4,000
Curabitur rhoncus ut nibh ac vestibulum
99%
Vestibulum fermentum magna quis tempor auctor
Directions & Maps
Directions & Maps
Location Name
Main Campus
111 Colchester Avenue
West Pavilion, Level 2
Burlington, Vermont 05401
tel: 802-555-1212 fax: 802-555-1212
Get Driving Directions Send Directions to My Phone Print Directions & Maps
When you arrive...
Park in the underground parking garage. Leave 15 minutes after you park to find us.
Go to level 3 and walk all the way to the McClure elevators. Take them to level L.
On Level L, follow the signs to MRI.
Table
Responsive Table - Horizontal Scroll
| Table Heading | Table Heading | Table Heading | Table Heading | Table Heading |
|---|---|---|---|---|
| Table Cell | Table Cell | Table Cell | Table Cell | Table Cell |
| Table Cell | Table Cell | Table Cell | Table Cell | Table Cell |
| Table Cell | Table Cell | Table Cell | Table Cell | Table Cell |
| Table Cell | Table Cell | Table Cell | Table Cell | Table Cell |
| Table Cell | Table Cell | Table Cell | Table Cell | Table Cell |
Responsive Table - Stacked
| Table Cell | Table Cell | Table Cell | Table Cell | Table Cell |
| Table Cell | Table Cell | Table Cell | Table Cell | Table Cell |
| Table Cell | Table Cell | Table Cell | Table Cell | Table Cell |
| Table Cell | Table Cell | Table Cell | Table Cell | Table Cell |
| Table Cell | Table Cell | Table Cell | Table Cell | Table Cell |
Sample Table for Job Stats
| Location | Williston, VT |
| Department | GIM & Geriatrics Williston |
| Schedule | Full-time/Regular |
| Standard Hours | 40 |
| Shift | Day - 8Hr |
| Primary Shift | 8:30 AM - 5:00 PM |
| Weekend Needs | Other |
| Salary Range | Min/Hour $17.16 Mid/Hour $21.32 Max/Hour $27.05 |