Big Lists

Big lists are for long lists, mainly lists of links, that would otherwise look plain and boring.

<ul class="m-big-list">
    <li class="m-big-list__item"><a class="m-big-list__link" href="#">Item 1</a></li>           
    <li class="m-big-list__item"><span class="m-big-list__heading">Item 2, No Link</span></li>          
    <li class="m-big-list__item"><a class="m-big-list__link" href="#">Item 3</a>
        <ul class="m-big-list__sub-list">
            <li class="m-big-list__sub-item"><a class="m-big-list__sub-link" href="#">Sub-Item 1</a></li>
            <li class="m-big-list__sub-item"><a class="m-big-list__sub-link" href="#">Sub-Item 2</a></li>
        </ul>
    </li>
</ul>

Breadcrumbs

Basic breadcrumb element.

<ol class="m-breadcrumbs">
    <li class="m-breadcrumbs__crumb"><a class="a-link">Home</a></li>
    <li class="m-breadcrumbs__crumb"><a class="a-link">Sub-Page</a></li>
</ol>

Button Groups

To group related buttons together you can use the .m-button-group wrapping element. This will bunch the buttons together and remove the spacing between them.

m-button-group--nowrap will stop the text inside from wrapping to new lines. m-button-group--flex-nowrap will stop the buttons themselves from wrapping to new lines.

<ul class="m-button-group">
    <li class="m-button-group__item"><a href="#" class="m-button-group__link">Button</a></li>
    <li class="m-button-group__item"><a href="#" class="m-button-group__link">Button</a></li>
    <li class="m-button-group__item"><a href="#" class="m-button-group__link">Button</a></li>
</ul>

Vertical

Button groups can be made vertical by adding the .m-button-group--vertical class.

<ul class="m-button-group  m-button-group--vertical">
    <li class="m-button-group__item"><a href="#" class="m-button-group__link">Button</a></li>
    <li class="m-button-group__item"><a href="#" class="m-button-group__link">Button</a></li>
    <li class="m-button-group__item"><a href="#" class="m-button-group__link">Button</a></li>
</ul>

Equal Widths

Adding the m-button-group--equal class will make buttons equal width even if text lengths are significantly different.

<ul class="m-button-group  m-button-group--equal">
    <li class="m-button-group__item"><a href="#" class="m-button-group__link">Short Text</a></li>
    <li class="m-button-group__item"><a href="#" class="m-button-group__link">A Button With Much Longer Text</a></li>
    <li class="m-button-group__item"><a href="#" class="m-button-group__link">More Short Text</a></li>
</ul>

Icons

To add icons to button groups, add a m-button-group__link--icon-horizontal or m-button-group__link--icon-vertical class to the link and add the SVG inside the link. The icon must also have two classes, m-button-group__icon and a directional modifier class: m-button-group__icon--top, m-button-group__icon--left, m-button-group__icon--bottom, m-button-group__icon--right.

<ul class="m-button-group  m-button-group--equal">
    <li 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>
            Button 1
        </a>
    </li>
    <li 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>
            Button 2
        </a>
    </li>
    <li 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>
            Button 3
        </a>
    </li>
</ul>
<ul class="m-button-group  m-button-group--vertical">
    <li class="m-button-group__item">
        <a class="m-button-group__link  m-button-group__link--icon-horizontal" href="#">
            <svg class="a-icon  m-button-group__icon  m-button-group__icon--left">
                <use xlink:href="../icons/icons.svg#doctor"></use>
            </svg>
            Button 1
        </a>
    </li>
    <li class="m-button-group__item">
        <a class="m-button-group__link  m-button-group__link--icon-horizontal" href="#">
            <svg class="a-icon  m-button-group__icon  m-button-group__icon--left">
                <use xlink:href="../icons/icons.svg#location"></use>
            </svg>
            Button 2
        </a>
    </li>
    <li class="m-button-group__item">
        <a class="m-button-group__link  m-button-group__link--icon-horizontal" href="#">
            <svg class="a-icon  m-button-group__icon  m-button-group__icon--left">
                <use xlink:href="../icons/icons.svg#stethoscope"></use>
            </svg>
            Button 3
        </a>
    </li>
</ul>

Dropdowns

Dropdowns can be added to buttons in the button group when HTML is formatted in the following manner.

<ul class="m-button-group">
    <li class="m-button-group__item">
        <a class="m-button-group__link" href="#">Button 1</a>
    </li>
    <li class="m-button-group__item  m-button-group__link--icon-horizontal  has-dropdown">
        <a class="m-button-group__link" href="#resources">
            Button 2
            <svg class="m-button-group__icon--right  a-icon  a-icon--xsmall  u-fill-currentColor">
                <use xlink:href="../icons/icons.svg#arrow-down"></use>
            </svg>
        </a>
        <ul class="m-button-group__dropdown-list  u-higher">
            <li class="m-button-group__dropdown-item">
                <a class="m-button-group__dropdown-link" href="#">Dropdown Button 1</a>
            </li>
            <li class="m-button-group__dropdown-item">
                <a class="m-button-group__dropdown-link" href="#">Dropdown Button 2</a>
            </li>
            <li class="m-button-group__dropdown-item">
                <a class="m-button-group__dropdown-link" href="#">Dropdown Button 3</a>
            </li>
        </ul>
    </li>
    <li class="m-button-group__item">
        <a class="m-button-group__link" href="#">Button 3</a>
    </li>
</ul>

Button Lists

The styling for button lists is minimal. The bulk comes from the grid classes and button classes.

<ul class="m-button-list  l-grid">
    <li class="m-button-list__item  l-grid__item  1/1  1/2@small  1/3@large">
        <a class="m-button-list__button  a-button  a-button--expand  a-button--small" href="#">Button</a>
    </li>
    <li class="m-button-list__item  l-grid__item  1/1  1/2@small  1/3@large">
        <a class="m-button-list__button  a-button  a-button--expand  a-button--small" href="#">Lists</a>
    </li>
    <li class="m-button-list__item  l-grid__item  1/1  1/2@small  1/3@large">
        <a class="m-button-list__button  a-button  a-button--expand  a-button--small" href="#">are</a>
    </li>
    <li class="m-button-list__item  l-grid__item  1/1  1/2@small  1/3@large">
        <a class="m-button-list__button  a-button  a-button--expand  a-button--small" href="#">Lots</a>
    </li>
    <li class="m-button-list__item  l-grid__item  1/1  1/2@small  1/3@large">
        <a class="m-button-list__button  a-button  a-button--expand  a-button--small" href="#">of</a>
    </li>
    <li class="m-button-list__item  l-grid__item  1/1  1/2@small  1/3@large">
        <a class="m-button-list__button  a-button  a-button--expand  a-button--small" href="#">Fun</a>
    </li>
    <li class="m-button-list__item  l-grid__item  1/1">
        <a class="m-button-list__button  a-button  a-button--expand" href="#">View All</a>
    </li>
</ul>

Big Button Lists

<ul class="m-button-list  m-button-list--large  l-grid">
    <li class="m-button-list__item  l-grid__item  1/1  1/2@medium">
        <a class="m-button-list__button  a-button  a-button--expand  a-button--large" href="#">How do you get cancer of the anus?</a>
    </li>
    <li class="m-button-list__item  l-grid__item  1/1  1/2@medium">
        <a class="m-button-list__button  a-button  a-button--expand  a-button--large" href="#">How can doctors tell if anal cancer has spread?</a>
    </li>
    <li class="m-button-list__item  l-grid__item  1/1  1/2@medium">
        <a class="m-button-list__button  a-button  a-button--expand  a-button--large" href="#">How does cancer spread?</a>
    </li>
    <li class="m-button-list__item  l-grid__item  1/1  1/2@medium">
        <a class="m-button-list__button  a-button  a-button--expand  a-button--large" href="#">Treatments for anal cancer at Huntsman Institute</a>
    </li>
</ul>

Callout Boxes

Callout boxes are used for the main call-to-action on a page. In this case, they're primarily used to present phone number and appointment request buttons.

These boxes will fill the available space. Wrap inside a grid element to achieve the desired width.

Note: Callout boes have a slightly transparent white background that won't be seen unless it is placed on top of some sort of background.

<div class="m-callout">
    <a class="m-callout__phone" href="tel:1-800-555-5555">(800) 555-5555</a>
    <a class="m-callout__button" href="#">Schedule an Appointment</a>
    <a class="m-callout__refer" href="#">Refer a Patient</a>
</div>

Background

Adding the m-callout--white class will give the callout a slightly transparent white background. This is mainly used for image billboards.

<div class="u-bg-black" style="padding:1em;">
    <div class="m-callout  m-callout--white">
        <a class="m-callout__phone" href="tel:1-800-555-5555">(800) 555-5555</a>
        <a class="m-callout__button" href="#">Schedule an Appointment</a>
        <a class="m-callout__refer" href="#">Refer a Patient</a>
    </div>
</div>

Cards

Cards are a common minimalistic design tool used to segregate sections of content. We're using cards to link to pages that aren't specialties, procedures, or programs.

Notice the entire card is wrapped in an anchor tag, and the call-to-action is a button. This makes the entire card clickable.

<a class="m-card" href="#">
    <img class="m-card__image" data-original="https://placehold.it/900x360">
    <header class="m-card__header">
        <h3 class="m-card__heading">Card Title</h3>
    </header>
    <div class="m-card__body">
        <p class="a-paragraph">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin imperdiet facilisis est sed faucibus. Mauris et dolor at neque tincidunt feugiat ut at turpis. Suspendisse potenti...</p>
    </div>
    <footer class="m-card__footer">
        <button class="a-button  a-button--brand  a-button--expand">Read More</button>
    </footer>
</a>

Bordered

<a class="m-card  m-card--bordered" href="#">
    <img class="m-card__image" data-original="https://placehold.it/900x360">
    <header class="m-card__header">
        <h3 class="m-card__heading">Card Title</h3>
    </header>
    <div class="m-card__body">
        <p class="a-paragraph">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin imperdiet facilisis est sed faucibus. Mauris et dolor at neque tincidunt feugiat ut at turpis. Suspendisse potenti...</p>
    </div>
    <footer class="m-card__footer">
        <button class="a-button  a-button--brand  a-button--expand">Read More</button>
    </footer>
</a>

Simple Linked Cards

Simple cards are an icon with a heading. These are often used inside a grid layout.

<div class="l-grid  u-space-top--medium  u-space-top--large@medium">
    <div class="l-grid__item  1/1  1/2@small  1/3@large  u-flex">
        <a class="m-card  m-card--bordered  u-flex-grow" href="#">
            <svg class="m-card__image  a-icon  a-icon--super">
                <use xlink:href="../icons/icons.svg#family"></use>
            </svg>
            <header class="m-card__header">
                <h5 class="m-card__heading">Example 1</h5>
            </header>
        </a>
    </div>
    <div class="l-grid__item  1/1  1/2@small  1/3@large  u-flex">
        <a class="m-card  m-card--bordered  u-flex-grow" href="#">
            <svg class="m-card__image  a-icon  a-icon--super">
                <use xlink:href="../icons/icons.svg#baby"></use>
            </svg>
            <header class="m-card__header">
                <h5 class="m-card__heading">Example 2</h5>
            </header>
        </a>
    </div>
    <div class="l-grid__item  1/1  1/2@small  1/3@large  u-flex">
        <a class="m-card  m-card--bordered  u-flex-grow" href="#">
            <svg class="m-card__image  a-icon  a-icon--super">
                <use xlink:href="../icons/icons.svg#stethoscope"></use>
            </svg>
            <header class="m-card__header">
                <h5 class="m-card__heading">Example 3</h5>
            </header>
        </a>
    </div>
</div>

Simple Unlinked Cards

Procedure Cost

Liposuction (one area)

$3,300*

* Price listed is an estimate.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque tincidunt suscipit faucibus. Ut eleifend risus vitae eros rutrum, interdum dapibus nibh aliquam. Sed et felis mauris. Aliquam elit dui, accumsan nec erat id, blandit pulvinar orci.

Vestibulum elit tellus, convallis efficitur justo id, consectetur pretium diam. Aenean pretium a massa quis posuere. Etiam vel malesuada velit. Duis est diam, rutrum condimentum ullamcorper eget, egestas ac massa. Praesent ligula leo, iaculis ut sem in, interdum porttitor augue. Maecenas consectetur eros in porttitor blandit.

<div class="o-content">
    <div class="u-pull-right  u-text-align--center">
        <h3 class="u-space-top--xsmall">Procedure Cost</h3>
        <div class="m-card  m-card--bordered  u-flex-grow  u-space-bottom--xsmall">
            <header class="m-card__header">
                <p class="u-large  u-no-space">Liposuction (one area)</p>
                <p class="u-xlarge  u-bold  u-color-brand  u-no-space">$3,300*</p>
            </header>
        </div>
        <small class="u-color-grey">* Price listed is an estimate.</small>
    </div>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque tincidunt suscipit faucibus. Ut eleifend risus vitae eros rutrum, interdum dapibus nibh aliquam. Sed et felis mauris. Aliquam elit dui, accumsan nec erat id, blandit pulvinar orci.</p>
    <p>Vestibulum elit tellus, convallis efficitur justo id, consectetur pretium diam. Aenean pretium a massa quis posuere. Etiam vel malesuada velit. Duis est diam, rutrum condimentum ullamcorper eget, egestas ac massa. Praesent ligula leo, iaculis ut sem in, interdum porttitor augue. Maecenas consectetur eros in porttitor blandit.</p>
</div>

Content Banner

Content banners are a great way to showcase patient stories and other content. Typically content banners are used in conjunction with o-section organisms.

If the background image is dark, use the o-section--inverse class to make the text white.

In Vitro Fertilization Helps Couple Become a Family

Melissa and Sam Olson always wanted children. However, their attempts to conceive had been unsuccessful due to a condition called endometriosis which affected Melissa's reproductive organs...

<section class="o-section  o-section--inverse  m-content-banner" style="background-image:url('../img/homepageimage.jpg');">
    <div class="l-container  l-container--large">
        <h2 class="o-section__header  m-content-banner__heading">In Vitro Fertilization Helps Couple Become a Family</h2>
        <p class="m-content-banner__message  a-paragraph">Melissa and Sam Olson always wanted children. However, their attempts to conceive had been unsuccessful due to a condition called endometriosis which affected Melissa's reproductive organs...</p>
        <div class="m-content-banner__cta">
            <a class="a-button  a-button--brand" href="#">Read Full Story</a>
        </div>
    </div>
</section>

Forms

Some form elements are collections of atoms. Therefore, these are molecules.

Inputs with Icons

<div class="m-field  m-field--icon-left">
    <svg class="a-icon">
        <use xlink:href="../icons/icons.svg#search-icon"></use>
    </svg>
    <input class="a-field" type="text">
</div>

Fieldsets and Legends

Use .m-fieldset and .m-fieldset__legend classes to apply consistent fieldset behaviours.

A group of controls
<fieldset class="m-fieldset">
    <legend class="m-fieldset__legend">A group of controls</legend>
    <label class="a-field  a-field--choice">
        <input type="radio" name="optionsRadios">
        Option one
    </label>
    <label class="a-field  a-field--choice">
        <input type="radio" name="optionsRadios">
        Option two
    </label>
    <label class="a-field  a-field--choice">
        <input type="radio" name="optionsRadios">
        Option three
    </label>
    <label class="a-field  a-field--choice">
        <input type="radio" name="optionsRadios">
        Option four
    </label>
</fieldset>

Labels and Form Elements

<!-- Approach one -->
<div class="m-form-element">
    <label class="a-label" for="nickname">Nickname:</label>
    <input id="nickname" placeholder="Nickname" class="a-field">
</div>
<!-- Approach two -->
<label class="a-label  m-form-element">
    Real name:
    <input class="a-field  a-field--label" placeholder="Real name">
</label>

Filtering Data

Filtering data is a combination of an input element and a simple dataset--usually an unordered list. Add the js-filter__input class to an input, add the js-filter__data class to a list, and create a message to display if all results are filtered with the js-filter__empty class. Utility classes can be added to any element to adjust styling. For example: the u-2col class can be added to the list to split it into two columns.

Note: Currently only one filter can be used per page.

<div class="m-field  u-space-bottom--small">
  <input class="js-filter__input  a-field  a-field--emphasis  u-low" type="text" placeholder="Filtering Example" />
</div>
<p class="js-filter__empty  u-xlarge" style="display: none;">Sorry, no results were found.</p>
<ul class="js-filter__data  a-list--unstyled">
  <li class="u-padding-top--large  u-padding--bottom--large"><a class="u-color-black" href="#">Allergy</a></li>
  <li class="u-padding-top--large  u-padding--bottom--large"><a class="u-color-black" href="#">Bariatric Surgery</a></li>
  <li class="u-padding-top--large  u-padding--bottom--large"><a class="u-color-black" href="#">Behavioral Health</a></li>
  <li class="u-padding-top--large  u-padding--bottom--large"><a class="u-color-black" href="#">Cardiology</a></li>
</ul>

Pagination

<div class="m-pagination">
    <div class="m-pagination__controls  m-pagination__controls--backward">
        <!--<button class="m-pagination__control">« First</button>-->
        <button class="m-pagination__control">‹ Prev</button>
    </div>
    <div class="m-pagination__controls">
        <button class="m-pagination__page">1</button>
        <button class="m-pagination__page  m-pagination__page--current">2</button>
        <button class="m-pagination__page">3</button>
    </div>
    <div class="m-pagination__controls  m-pagination__controls--forward">
        <button class="m-pagination__control">Next ›</button>
        <!--<button class="m-pagination__control">Last »</button>-->
    </div>
</div>

Signpost

Signposts are button-like elements that can be used when there is a bit too much text for a standard button.

<a class="m-signpost" href="#">
    <div class="m-signpost__header">
        <h4 class="m-signpost__heading">Signpost Heading</h4>
    </div>
    <div class="m-signpost__footer">
        Call to Action
    </div>
</a>
<a class="m-signpost  m-signpost--brand" href="#">
    <div class="m-signpost__header">
        <h4 class="m-signpost__heading">Brand Signpost</h4>
        <p class="m-signpost__copy">This signpost has some copy.</p>
    </div>
    <div class="m-signpost__footer">
        Call to Action
    </div>
</a>

Tiles

Tiles are images, usually square, with text centered above. Tiles are combined with ratio utilties to maintain proper aspect ratios at all screen sizes.

Centered Text
<div class="u-ratio  u-ratio--1x1">
    <div class="u-ratio__content">
        <div class="m-tile" style="background-image:url('https://placehold.it/400x400')">
            <span class="m-tile__caption  u-xlarge  u-line-height--title  u-color-white  u-regular  u-text-align--center">Centered Text</span>
        </div>
    </div>
</div>