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>
Emphasis
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 class="o-section o-section--emphasis">
<div class="l-container l-container--medium">
<h2 class="o-section__header">Section with Emphasis</h2>
</div>
</section>
Inverse
The o-section--inverse class gives the section a dark grey background and makes the text white. Typically we use these sections to wrap content banners.
Inverted 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. The o-nav element is positioned absolutely so images can appear underneath. This is sometimes problematic. If content overlaps the nav, try adding a top margin of 5em to the content's container.
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 style="position:relative;height:5em;">
<nav class="o-nav" role="navigation" id="nav">
<div class="o-nav__container l-container l-container--large">
<span class="o-nav__logo">
<a class="o-nav__logo-link o-nav__link" href="/">
<img src="https://placehold.it/180x50" alt="Logo" width="180" height="auto" class="js-inline-svg" />
</a>
</span>
<ul class="o-nav__list">
<li class="o-nav__item">
<a class="o-nav__link" href="#">Item 1</a>
</li>
<li class="o-nav__item">
<a class="o-nav__link" href="#">Item 2</a>
</li>
<li class="o-nav__item">
<a class="o-nav__link" href="#">Item 3</a>
</li>
<li class="o-nav__item">
<a class="o-nav__link" href="#">Item 4</a>
</li>
</ul>
<button class="o-nav__toggle o-nav__link">More</button>
<ul class='o-nav__more-list is-hidden'></ul>
</div>
</nav>
</div>