A-Z Lists
Last Updated: December 3, 2018
Used to present long lists of links in a simple, easy-to-scan list, ordered alphabetically. Can include a filter field molecule and up to three filter buttons.
<div class="l-container l-container--medium">
<h2 class="o-section__header">Alphabetical List</h2>
<div class="m-field m-field--icon-left u-space-bottom--small l-grid__item">
<svg class="a-icon u-color-brand" style="left:1.5em;">
<use xlink:href="#search-icon"></use>
</svg>
<input id="care-we-provide-search" class="js-filter__input a-field a-field--emphasis u-low" placeholder="Search by Service Name" type="text">
<label for="care-we-provide-search" class="u-visuallyhidden">Search by Service Name</label>
</div>
<div class="l-grid u-no-space u-space-top--medium u-space-bottom--medium">
<div class="l-grid__item@medium u-no-space@medium">
<ul class="m-button-list l-grid" style="padding-top: 0.5em;">
<li class="m-button-list__item l-grid__item 1/1 1/2@small 1/3@medium u-space-bottom--xsmall@medium"><a class="a-button a-button--brand a-button--small a-button--expand" href="#" target="_self">Filter #1</a></li>
<li class="m-button-list__item l-grid__item 1/1 1/2@small 1/3@medium u-space-bottom--xsmall@medium"><a class="a-button a-button--brand a-button--small a-button--expand" href="#" target="_self">Filter #2</a></li>
<li class="m-button-list__item l-grid__item 1/1 1/2@small 1/3@medium u-space-bottom--xsmall@medium"><a class="a-button a-button--brand a-button--small a-button--expand" href="#" target="_self">Filter #3</a></li>
</ul>
</div>
</div>
<ul class="js-filter__data a-list--unstyled u-2col@medium" id="newList">
<li class="u-padding-top--medium u-padding--bottom--medium"><a class="u-color-black" href="#" target="_self">List Item #1</a></li>
<li class="u-padding-top--medium u-padding--bottom--medium"><a class="u-color-black" href="#" target="_self">List Item #2</a></li>
<li class="u-padding-top--medium u-padding--bottom--medium"><a class="u-color-black" href="#" target="_self">List Item #3</a></li>
<li class="u-padding-top--medium u-padding--bottom--medium"><a class="u-color-black" href="#" target="_self">List Item #4</a></li>
<li class="u-padding-top--medium u-padding--bottom--medium"><a class="u-color-black" href="#" target="_self">List Item #5</a></li>
<li class="u-padding-top--medium u-padding--bottom--medium"><a class="u-color-black" href="#" target="_self">List Item #6</a></li>
<li class="u-padding-top--medium u-padding--bottom--medium"><a class="u-color-black" href="#" target="_self">List Item #7</a></li>
<li class="u-padding-top--medium u-padding--bottom--medium"><a class="u-color-black" href="#" target="_self">List Item #8</a></li>
<li class="u-padding-top--medium u-padding--bottom--medium"><a class="u-color-black" href="#" target="_self">List Item #9</a></li>
<li class="u-padding-top--medium u-padding--bottom--medium"><a class="u-color-black" href="#" target="_self">List Item #10</a></li>
</ul>
</div>
Billboards
Billboards are the primary banner area used to display page titles, high-quality imagery, breadcrumbs, phone numbers, and appointment scheduling buttons. There are two billboard styles: gradient billboards and image billboards. Gradient billboards are used on most non-major pages. Image billboards are used on major pages such as the homepage and service line landing pages.
Billboard content is wrapped in the o-billboard__content element. This element should contain three children, o-billboard__header, o-billboard__body, and o-billboard__footer. These elements control where the content will be aligned vertically. Content in the o-billboard__header element will be aligned at the top. Content in the o-billboard__body element will be aligned in the middle. Content in the o-billboard__footer element will be aligned at the bottom.
Gradient Billboards
Gradient billboards have a gentle grey gradient behind them. These billboards also contain breadcrumbs, unlike image billboards.
Note: The billboard's width is constrained in the style guide. The code provided will stretch much wider on production sites. Also, the JavaScript class that causes the 'Schedule Appointment' button to stick to right side as a user scrolls has been removed in this example.
<header class="o-billboard o-billboard--bg-gradient l-container l-container--super l-container--flush" role="banner">
<div class="o-billboard__content">
<div class="o-billboard__header"></div>
<div class="o-billboard__body"></div>
<div class="o-billboard__footer u-space-top--medium u-space-top--xlarge@medium u-space-bottom--super@medium">
<div class="l-container l-container--xlarge">
<div class="l-grid l-grid--middle">
<div class="l-grid__item 1/1 7/12@medium">
<div class="o-billboard__heading-container">
<ol class="m-breadcrumbs">
<li class="m-breadcrumbs__crumb"><a class="a-link" href="#">Home</a></li>
<li class="m-breadcrumbs__crumb"><a class="a-link" href="#">Sub-Page</a></li>
</ol>
<h1 class="o-billboard__heading u-no-space">Page Title</h1>
</div>
</div>
<div class="l-grid__item 1/1 5/12@medium">
<div class="m-callout">
<a class="m-callout__phone" href="tel:1-801-555-5555">(801) 555-5555</a>
<a class="m-callout__button" href="#">Schedule an Appointment</a>
</div>
</div>
</div>
</div>
</div>
</div>
</header>
Image Billboards
Unlike the gradient billboards, image billboards have a size modifier. Typically this will be o-billboard--medium. This gives the billboard a minimum and maximum height. Size modifiers include o-billboard--xsmall, o-billboard--small, o-billboard--medium, o-billboard--large, o-billboard--xlarge, and o-billboard--super. The largest size, o-billboard--super, is currently only used on the homepage. This billboard will fill the entire viewport height.
The way images are marked up is a bit tricky. Notice the image is set as both a background image on the o-billboard__image-wrapper container and also an inline image within. The inline image is set to be transparent. This image is only there to force the container to be the right size.
When selecting images for image billboards, it's best to use images with dark colors in the bottom left to allow enough contrast for the white heading text to appear clearly.
Note: The billboard's width is constrained in the style guide. The code provided will stretch much wider on production sites. Also, the JavaScript class that causes the 'Schedule Appointment' button to stick to right side as a user scrolls has been removed in this example.
<header class="o-billboard o-billboard--bg-image o-billboard--medium l-container l-container--super l-container--flush" role="banner">
<div class="o-billboard__image-wrapper o-billboard__image-wrapper--gradient" style="background-image:url('https://placehold.it/1600x900');">
<img class="o-billboard__image" src="https://placehold.it/1600x900" alt="placeholder" style="opacity:0;" />
</div>
<div class="o-billboard__content">
<div class="o-billboard__header"></div>
<div class="o-billboard__body"></div>
<div class="o-billboard__footer u-space-bottom--xlarge@medium">
<div class="l-container l-container--xlarge">
<div class="l-grid l-grid--bottom">
<div class="l-grid__item 1/1 7/12@medium o-billboard__heading-container">
<h1 class="o-billboard__heading o-billboard__heading--white u-no-space">Page Title</h1>
</div>
<div class="l-grid__item 1/1 5/12@medium">
<div class="m-callout m-callout--white">
<a class="m-callout__phone" href="tel:1-801-213-2995">(801) 213-2995</a>
<a class="m-callout__button" href="appointment.html">Schedule an Appointment</a>
</div>
</div>
</div>
</div>
</div>
</div>
</header>
Content
The o-content class is used to handle WYSIWYG generated content, where only HTML tags are available. Content should be enclosed with a div containing the l-container--large class.
Notice the figure element is wider than the paragraphs, and floated items pull past the paragraph edges.
Content
Approximately 300 extra calories are needed daily to maintain a healthy pregnancy. These calories should come from a balanced diet of protein, fruits, vegetables, and whole grains, with sweets and fats kept to a minimum. A healthy, well-balanced diet during pregnancy can also help to reduce some pregnancy symptoms, like nausea and constipation.
The Academy of Nutrition and Dietetics recommends the following key components of a healthy lifestyle during pregnancy: appropriate weight gain, eating a balanced diet, exercising regularly, and appropriate and timely vitamin and mineral supplementation.
Fluid intake is also an important part of healthy pregnancy nutrition. Women can take in enough fluids by drinking several glasses of water each day, in addition to the fluids in juices and soups. An expectant mother should talk with her healthcare provider or midwife about restricting her intake of caffeine and artificial sweeteners. All alcohol should be avoided in pregnancy.
<div class="l-container l-container--large">
<div class="o-content">
<figure>
<img data-original="https://placehold.it/1200x400" alt="placeholder" />
</figure>
<h2>Content</h2>
<p>Approximately 300 extra calories are needed daily to maintain a healthy pregnancy. These calories should come from a balanced diet of protein, fruits, vegetables, and whole grains, with sweets and fats kept to a minimum. A healthy, well-balanced diet during pregnancy can also help to reduce some pregnancy symptoms, like nausea and constipation.</p>
<figure class="u-pull-right">
<img data-original="https://placehold.it/400x260" alt="placeholder" />
<figcaption>Caption of this image by Getty Images</figcaption>
</figure>
<p>The Academy of Nutrition and Dietetics recommends the following key components of a healthy lifestyle during pregnancy: appropriate weight gain, eating a balanced diet, exercising regularly, and appropriate and timely vitamin and mineral supplementation.</p>
<p>Fluid intake is also an important part of healthy pregnancy nutrition. Women can take in enough fluids by drinking several glasses of water each day, in addition to the fluids in juices and soups. An expectant mother should talk with her healthcare provider or midwife about restricting her intake of caffeine and artificial sweeteners. All alcohol should be avoided in pregnancy.</p>
</div>
</div>
Find Something
The find something tool is a feature-rich search tool users can use to find providers based on specific criteria. At the moment there is no styling specific to this element.
<div class="m-button-group m-button-group--equal u-high">
<div class="m-button-group__item">
<a class="m-button-group__link m-button-group__link--icon-vertical" href="#">
<svg class="a-icon m-button-group__icon m-button-group__icon--top">
<use xlink:href="../icons/icons.svg#doctor"></use>
</svg>
By Name
</a>
</div>
<div class="m-button-group__item">
<a class="m-button-group__link m-button-group__link--icon-vertical" href="#">
<svg class="a-icon m-button-group__icon m-button-group__icon--top">
<use xlink:href="../icons/icons.svg#location"></use>
</svg>
By Location
</a>
</div>
<div class="m-button-group__item">
<a class="m-button-group__link m-button-group__link--icon-vertical" href="#">
<svg class="a-icon m-button-group__icon m-button-group__icon--top">
<use xlink:href="../icons/icons.svg#stethoscope"></use>
</svg>
By Specialty
</a>
</div>
</div>
<div class="m-button-list l-grid l-grid--middle">
<div class="m-button-list__item l-grid__item 1/1">
<a class="a-button a-button--expand" href="services-treatments.html">View All Women's Health Specialties</a>
</div>
</div>
Footers
The footer organism is the site-wide footer for our site. There aren't many modifiers as this isn't intended to stay consistent.
<footer class="o-footer" role="contentinfo">
<div class="l-container l-container--super l-container--flush">
<div class="o-footer__info">
<div class="l-container l-container--large">
<div class="l-grid">
<div class="l-grid__item 1/1 1/2@small 1/3@medium">
<h4 class="a-h3">Site Links</h4>
<ul class="a-list a-list--unstyled">
<li><a href="#" class="o-footer__link">About Us</a></li>
<li><a href="#" class="o-footer__link">Jobs</a></li>
<li><a href="#" class="o-footer__link">Giving</a></li>
<li><a href="#" class="o-footer__link">Maps & Directions</a></li>
<li><a href="#" class="o-footer__link">Public Affairs</a></li>
<li><a href="#" class="o-footer__link">The Imagine Perfect Care Program</a></li>
</ul>
</div>
<div class="l-grid__item 1/1 1/2@small 1/3@medium">
<h4 class="a-h3">Helpful Links</h4>
<ul class="a-list a-list--unstyled">
<li><a href="#" class="o-footer__link">Patient Rights & Responsibilities</a></li>
<li><a href="#" class="o-footer__link">Disclaimer</a></li>
<li><a href="#" class="o-footer__link">Privacy Statement</a></li>
<li><a href="#" class="o-footer__link">DNV GL Public Information Policy Statement</a></li>
<li><a href="#" class="o-footer__link">Non-Discrimination Policy</a></li>
<li><a href="#" class="o-footer__link">Webmaster</a></li>
</ul>
</div>
<div class="l-grid__item 1/1 1/3@medium">
<h4 class="a-h3">Contact Us</h4>
<p class="a-address u-small u-space-bottom--small">
University of Utah Health Care<br />
50 N. Medical Drive SLC, UT 84132
</p>
<p class="u-xlarge u-space-bottom--medium">(801) 581-2121</p>
<ul class="a-list a-list--unstyled a-list--inline">
<li class="a-list__item o-footer__social-item">
<a href="#" class="o-footer__link">
<svg class="a-icon a-icon--large a-icon--facebook">
<use xlink:href="../icons/icons.svg#facebook"></use>
</svg>
</a>
</li>
<li class="a-list__item o-footer__social-item">
<a href="#" class="o-footer__link">
<svg class="a-icon a-icon--large a-icon--twitter">
<use xlink:href="../icons/icons.svg#twitter"></use>
</svg>
</a>
</li>
<li class="a-list__item o-footer__social-item">
<a href="#" class="o-footer__link">
<svg class="a-icon a-icon--large a-icon--google-plus">
<use xlink:href="../icons/icons.svg#google-plus"></use>
</svg>
</a>
</li>
<li class="a-list__item o-footer__social-item">
<a href="#" class="o-footer__link">
<svg class="a-icon a-icon--large a-icon--youtube">
<use xlink:href="../icons/icons.svg#youtube"></use>
</svg>
</a>
</li>
</ul>
</div>
</div>
</div>
</div>
</div>
<div class="o-footer__legal">
<div class="l-container l-container--large">
<div class="l-grid">
<div class="l-grid__item 1/1 7/12@medium">
<p><a href="http://www.utah.edu" target="_blank" class="o-footer__link"><img class="u-inline-block" src="../img/logos/uofu-logo.svg" alt="University of Utah" /></a></p>
</div>
<div class="l-grid__item 1/1 5/12@medium">
<p class="a-paragraph u-small">All clinical services and programs are part of University of Utah Hospitals & Clinics</p>
<p class="a-paragraph u-small">Copyright © 2017 University of Utah Health Care</p>
</div>
</div>
</div>
</div>
</footer>
Main
The o-main element is a simple vertical flex container with a bit of a bottom margin. By making this element a flex container, we can reorder the sections within.
<main class="o-main" role="main" id="content">
<!-- content goes here -->
</main>
Sections
Sections are generic wrappers. The only styling associated with the o-section class is a bit of padding on the top and bottom.
Section
<section class="o-section">
<div class="l-container l-container--medium">
<h2 class="o-section__header">Section</h2>
<!-- content goes here -->
</div>
</section>
Sizes
Use the modifier classes o-section--small, o-section--large, or o-section--xlarge to decrease or increase vertical padding respectively.
Small Section
<section class="o-section o-section--small">
<div class="l-container l-container--medium">
<h2 class="o-section__header">Small Section</h2>
</div>
</section>
Large Section
<section class="o-section o-section--large">
<div class="l-container l-container--medium">
<h2 class="o-section__header">Large Section</h2>
</div>
</section>
Xlarge Section
<section class="o-section o-section--xlarge">
<div class="l-container l-container--medium">
<h2 class="o-section__header">Xlarge Section</h2>
</div>
</section>
Colors
To apply different background colors, add one of the following classes.
| Class | Description |
|---|---|
.c-section-emphasis |
Adds a muted background color. |
.c-section-gradient |
Adds a gradient background color. |
.c-section-brand |
Adds a brand background color. |
.c-section-secondary |
Adds a secondary background color. |
.c-section-tertiary |
Adds a secondary background color. |
.c-section-inverse |
Inverses background color and text color. |
The o-section--emphasis class gives the section a light grey background and inset drop shadows to draw a bit of extra attention. Typically we use these sections to wrap the "Find Something" tool.
Section with Emphasis
Section with Gradient Background
Section with Brand Background
Section with Secondary Background
Section with Tertiary Background
Inverted Section
<section class="o-section o-section--emphasis">
<div class="l-container l-container--medium">
<h2 class="o-section__header">Section with Emphasis</h2>
</div>
</section>
<section class="o-section o-section--gradient">
<div class="l-container l-container--medium">
<h2 class="o-section__header">Section with Gradient Background</h2>
</div>
</section>
<section class="o-section o-section--brand">
<div class="l-container l-container--medium">
<h2 class="o-section__header">Section with Brand Background</h2>
</div>
</section>
<section class="o-section o-section--secondary">
<div class="l-container l-container--medium">
<h2 class="o-section__header">Section with Secondary Background</h2>
</div>
</section>
<section class="o-section o-section--tertiary">
<div class="l-container l-container--medium">
<h2 class="o-section__header">Section with Tertiary Background</h2>
</div>
</section>
<section class="o-section o-section--inverse">
<div class="l-container l-container--medium">
<h2 class="o-section__header">Inverted Section</h2>
</div>
</section>
Swiper
Swiper is a free, modern touch slider with hardware accelerated transitions. We use two instances of Swiper on our sites: one on the homepage, and another slider for sub-pages. This documentation focusses on the latter.
To use Swiper, create a div with the following classes: js-swiper--medium, o-swiper, and o-swiper--medium. Inside that, create another div with the class o-swiper__wrapper. The wrapper is what contains our slides.
Slides are created with the o-swiper__slide class. Additionally, the modifier o-swiper__slide--gradient will add a dark gradient to the bottom half of the slide. The gradient increases caption visibility. Slides can contain anything, but we typically only use Swiper for images.
Ideally, images used in Swiper will be consistent in size. It's also good practice to lazy load images so they aren't downloaded until the user cycles through the slideshow. To lazy load images, add the o-swiper__image--lazy class to the image, and add a blank div with the o-swiper__preloader after each image.
Captions can be added to slides with the o-swiper__caption class. Captions will appear at the bottom of the slide.
For more detailed information about Swiper, check out the official documentaion.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur sagittis eleifend mi, in lacinia dui rhoncus id. Sed posuere aliquam mauris fermentum mollis. Learn More
Fusce ac nunc in justo dictum cursus. Mauris posuere, massa sodales viverra hendrerit, sem nunc dapibus odio, a vestibulum tortor felis eget neque. Quisque posuere nunc vel elementum congue. Vestibulum.
<div class="js-swiper--medium o-swiper o-swiper--medium">
<!-- Additional required wrapper -->
<div class="o-swiper__wrapper">
<!-- Slides -->
<div class="o-swiper__slide o-swiper__slide--gradient">
<img class="o-swiper__image--lazy" data-src="https://placehold.it/1200x400/ACC7BF/fff">
<div class="o-swiper__preloader"></div>
<div class="o-swiper__caption">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur sagittis eleifend mi, in lacinia dui rhoncus id. Sed posuere aliquam mauris fermentum mollis. <a href="#" class="o-swiper__caption-link">Learn More</a></p>
</div>
</div>
<div class="o-swiper__slide o-swiper__slide--gradient">
<img class="o-swiper__image--lazy" data-src="https://placehold.it/1200x400/C37070/fff">
<div class="o-swiper__preloader"></div>
<div class="o-swiper__caption">
<p>Fusce ac nunc in justo dictum cursus. Mauris posuere, massa sodales viverra hendrerit, sem nunc dapibus odio, a vestibulum tortor felis eget neque. Quisque posuere nunc vel elementum congue. Vestibulum.</p>
</div>
</div>
</div>
<!-- Prev/Next Arrows -->
<div class="o-swiper__button o-swiper__button--prev">
<svg class="o-swiper__icon a-icon a-icon--large">
<use xlink:href="../icons/icons.svg#arrow-left" />
</svg>
</div>
<div class="o-swiper__button o-swiper__button--next">
<svg class="o-swiper__icon a-icon a-icon--large">
<use xlink:href="../icons/icons.svg#arrow-right" />
</svg>
</div>
</div>
Tabs
Tabbed content is useful for toggling between content without jumping around the page or across pages.
Tab headings are created with the "button-group" organism. Modifiers can be added, such as m-button-group--equal for equal width tab headings. Similarly, icons can be added to tab headings. See the button-group documentation for more information.
Note: Tabs are not yet functional.
Panel 1
Panel 2
Panel 3
Panel 4
<div class="js-tabs o-tabs">
<ul class="o-tabs__headings m-button-group">
<li class="o-tabs__heading o-tabs__heading--active m-button-group__item">
<a class="m-button-group__link" href="#tab1">
Building
</a>
</li>
<li class="o-tabs__heading m-button-group__item">
<a class="m-button-group__link" href="#tab2">
Urgent Care
</a>
</li>
<li class="o-tabs__heading m-button-group__item">
<a class="m-button-group__link" href="#tab3">
Pharmacy
</a>
</li>
<li class="o-tabs__heading m-button-group__item">
<a class="m-button-group__link" href="#tab4">
Clinic
</a>
</li>
</ul>
<div class="o-tabs__panel o-tabs__panel--active" id="tab1">
<p>Panel 1</p>
</div>
<div class="o-tabs__panel" id="tab2">
<p>Panel 2</p>
</div>
<div class="o-tabs__panel" id="tab3">
<p>Panel 3</p>
</div>
<div class="o-tabs__panel" id="tab4">
<p>Panel 4</p>
</div>
</div>
Topnav
This is the site-wide navigation for our site. There aren't many modifier classes for navigation elements because it's not intended to change.
Note: The JavaScript classes had to be removed because they were conflicting with the style guide's navigation.
<div class="o-nav__container l-container l-container--super l-container--flush">
<nav class="o-nav" role="navigation" id="nav">
<div class="o-nav__left">
<a class="o-nav__item o-nav__logo" href="{{ baseurl }}/index.html">
<img src="{{ baseurl }}/images/logos/uhealth-logo.svg" alt="U of U Health" width="140" height="auto" class="o-nav__logo-svg" />
</a>
<ul class="o-nav__list u-show@large">
<li><a href="{{ baseurl }}/index.html">FIND A DOCTOR</a></li>
<li><a href="{{ baseurl }}/pages/locations.html">FIND A LOCATION</a></li>
<li><a href="{{ baseurl }}/pages/services.html">MEDICAL SERVICES</a></li>
<li>
<a class="o-nav__link o-nav__link--dropbar" href="#">
<span class="u-space-right--xsmall">PATIENTS & VISITORS</span>
<svg class="a-icon a-icon--xsmall u-margin-right--small">
<use xlink:href="#arrow-down"></use>
</svg>
</a>
<div class="o-nav__dropdown">
<div class="l-grid">
<div class="l-grid__item">
<ul class="o-nav__dropdown-nav">
<li class="o-nav__header">Patient Services</li>
<li class="o-nav__divider"></li>
<li><a href="#">Questions About Your Bill?</a></li>
<li><a href="#">Urgent Care</a></li>
<li><a href="#">Where to Stay</a></li>
<li><a href="#">Patient & Family Services</a></li>
<li><a href="#">Clinical Services</a></li>
</ul>
</div>
<div class="l-grid__item">
<ul class="o-nav__dropdown-nav">
<li class="o-nav__header">University of Utah Hospital</li>
<li class="o-nav__divider"></li>
<li><a href="#">University of Utah Hospital</a></li>
<li><a href="#">Staying at the Hospital</a></li>
<li><a href="#">Parking & Valet</a></li>
<li><a href="#">Looking for Another Location?</a></li>
</ul>
</div>
<div class="l-grid__item">
<ul class="o-nav__dropdown-nav">
<li class="o-nav__header">General Questions</li>
<li class="o-nav__divider"></li>
<li class="o-active"><a href="#">801-581-2668</a></li>
<li><a href="#">
<svg class="a-icon a-icon--small">
<use xlink:href="#translation"></use>
</svg>
Find an Interpreter
</a></li>
<li><a href="#">About U of U Health</a></li>
</ul>
</div>
</div>
</div>
</li>
</ul>
</div>
<div class="o-nav__right">
<ul class="o-nav__list u-show@large">
<li><a href="#">Billing & Insurance</a></li>
<li>
<a href="#">
<svg class="a-icon a-icon--small u-margin-right--small">
<use xlink:href="#user"></use>
</svg>
<span class="u-space-left--xsmall">MyChart</span>
</a>
</li>
</ul>
<div class="o-nav__item u-show@large">
<button class="js-search-button a-button a-button--brand a-button--small u-padding-left--medium u-padding-right--medium u-flex u-items-center">
<svg class="a-icon a-icon--small u-margin-right--small">
<use xlink:href="#search-icon"></use>
</svg>
<span class="u-space-left--small">Search</span>
</button>
</div>
<!-- Hamburger button -->
<div class="o-nav__item u-hide@large">
<button class="js-nav__toggle a-button a-button--brand a-button--small u-padding-left--medium u-padding-right--medium u-flex u-items-center">
<svg class="a-icon a-icon--small u-margin-right--small">
<use xlink:href="#hamburger"></use>
</svg>
<span class="js-nav__toggle-text o-nav__icon-text u-space-left--small">Menu</span>
</button>
</div>
</div>
<!-- Dropdown Menu -->
<div class="1/1 u-relative u-hide@large">
<div class="o-nav__menu-wrapper l-container">
<ul class="js-nav__menu o-nav__menu">
<li><a href="{{ baseurl }}/index.html">FIND A DOCTOR</a></li>
<li><a href="{{ baseurl }}/pages/locations.html">FIND A LOCATION</a></li>
<li><a href="{{ baseurl }}/pages/services.html">MEDICAL SERVICES</a></li>
<li>
<a class="o-nav__link o-nav__link--submenu" href="#">
<span class="u-space-right--xsmall">PATIENTS & VISITORS</span>
<svg class="a-icon a-icon--xsmall">
<use xlink:href="#arrow-right"></use>
</svg>
</a>
<ul class="js-nav__submenu o-nav__submenu">
<li>
<a class="o-nav__link o-nav__link--submenu" href="#">
<span class="o-nav__icon-text">Patient Services</span>
<svg class="a-icon a-icon--xsmall">
<use xlink:href="#arrow-right"></use>
</svg>
</a>
<ul class="js-nav__submenu o-nav__submenu">
<li><a href="/bill/">Questions About Your Bill?</a></li>
<li><a href="/primarycare/urgent.php">Urgent Care</a></li>
<li><a href="/locations/patient-family-housing/">Where to Stay</a></li>
<li><a href="/patient-family-services.php">Patients & Family Services</a></li>
<li><a href="/clinicaltrials/">Clinical Trials</a></li>
</ul>
</li>
<li>
<a class="o-nav__link o-nav__link--submenu" href="#">
<span class="o-nav__icon-text">University of Utah Hospital</span>
<svg class="a-icon a-icon--xsmall">
<use xlink:href="#arrow-right"></use>
</svg>
</a>
<ul class="js-nav__submenu o-nav__submenu">
<li><a href="/hospital/">University of Utah Hospital</a></li>
<li><a href="/hospital/stay.php">Staying at the Hospital</a></li>
<li><a href="/hospital/customer-service/parking.php">Parking & Valet</a></li>
<li><a href="/locations/">Looking for Another Location?</a></li>
</ul>
</li>
<li>
<a class="o-nav__link o-nav__link--submenu" href="#">
<span class="o-nav__icon-text">General Questions</span>
<svg class="a-icon a-icon--xsmall">
<use xlink:href="#arrow-right"></use>
</svg>
</a>
<ul class="js-nav__submenu o-nav__submenu">
<li><a href="tel:801-581-2668">801-581-2668</a></li>
<li><a href="/hospital/customer-service/interpreter.php">Find an Interpreter</a></li>
<li><a href="/brand/">About U of U Health</a></li>
</ul>
</li>
</ul>
</li>
<li><a href="#">Billing & Insurance</a></li>
<li>
<a href="#">
<svg class="a-icon a-icon--small">
<use xlink:href="#user"></use>
</svg>
<span class="u-space-left--xsmall">MyChart</span>
</a>
</li>
<li>
<a class="js-nav__toggle o-nav__link" href="#">
<svg class="a-icon a-icon--small">
<use xlink:href="#search"></use>
</svg>
<span class="u-space-left--xsmall">Search</span>
</a>
</li>
</ul>
</div>
</div>
</nav>
<div class="o-nav__dropbar u-show@large"></div>
</div>
/* ======================================================================== Component: Navbar ==========================================================================