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>
Captions
These classes create caption overlays for images. They are primarily used in conjunction with the billboard organism.
<header class="o-billboard o-billboard--bg-image o-billboard--small 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('../img/farmington.jpg');">
<img alt="" class="o-billboard__image o-billboard__image-wrapper--gradient" style="opacity:0;" src="../img/farmington.jpg">
</div>
<div class="o-billboard__content">
<div class="o-billboard__header"></div>
<div class="o-billboard__body"></div>
<div class="o-billboard__footer">
<div class="m-caption m-caption--dark">
<div class="l-container l-container--large">
<h1 class="m-caption__heading">Heading</h1>
<p class="m-caption__subheading">Subheading</p>
</div>
</div>
</div>
</div>
</header>
Light
Light captions have a lightened background and dark text.
Heading
Subheading
<header class="o-billboard o-billboard--bg-image o-billboard--small 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('../img/farmington.jpg');">
<img alt="" class="o-billboard__image o-billboard__image-wrapper--gradient" style="opacity:0;" src="../img/farmington.jpg">
</div>
<div class="o-billboard__content">
<div class="o-billboard__header">
<div class="m-caption m-caption--light">
<div class="l-container l-container--large">
<h1 class="m-caption__heading">Heading</h1>
<p class="m-caption__subheading">Subheading</p>
</div>
</div>
</div>
<div class="o-billboard__body"></div>
<div class="o-billboard__footer"></div>
</div>
</header>
Boxed Captions
To enclose the caption with a border and center align text. Currently only used on the homepage slider.
<header class="o-billboard o-billboard--bg-image o-billboard--small 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('../img/farmington.jpg');">
<img alt="" class="o-billboard__image o-billboard__image-wrapper--gradient" style="opacity:0;" src="../img/farmington.jpg">
</div>
<div class="o-billboard__content">
<div class="o-billboard__header"></div>
<div class="o-billboard__body"></div>
<div class="o-billboard__footer">
<div class="l-container l-container--large">
<div class="m-caption m-caption--box m-caption--dark u-space-bottom--medium">
<h1 class="m-caption__heading">Heading</h1>
<p class="m-caption__subheading">Subheading</p>
</div>
</div>
</div>
</div>
</header>
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*
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.
<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.
<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 what we call images with text overlaid. Tiles can be combined with ratio utilities to maintain proper aspect ratios, such as a square, at all screen sizes.
Tiles are made up of a wrapper element: m-tiles, individual tiles: m-tile, and each tile contains three children to position text: m-tile__header, m-tile__body, m-tile__footer. The wrapper element uses the new CSS display:grid property to maintain proper heights and widths for each tile.
Each individual tile has a minimum height of roughly 200px. Featured tiles -- described below -- have a minimum height of about 400px.
Centered Text
Centered Text
<div class="m-tiles m-tiles--2@medium">
<div class="u-ratio u-ratio--1x1">
<div class="u-ratio__content">
<div class="m-tile m-tile--dark" style="background-image:url('https://placehold.it/400x400/000000')">
<div class="m-tile__header"></div>
<div class="m-tile__body">
<p class="u-xlarge u-line-height--title u-text-align--center">Centered Text</p>
</div>
<div class="m-tile__footer"></div>
</div>
</div>
</div>
<div class="u-ratio u-ratio--1x1">
<div class="u-ratio__content">
<div class="m-tile m-tile--dark" style="background-image:url('https://placehold.it/400x400/000000')">
<div class="m-tile__header"></div>
<div class="m-tile__body">
<p class="u-xlarge u-line-height--title u-text-align--center">Centered Text</p>
</div>
<div class="m-tile__footer"></div>
</div>
</div>
</div>
</div>
Columns
The m-tiles wrapper can be used to set how many tiles appear in each row, with a maximum of 4. Small screens force tiles into a single column, however, on larger screens the number of tiles can be set with classes in this format: m-tiles--2@small, m-tiles--3@medium, m-tiles--4@large, etc.
1 column
<div class="m-tiles">
<div class="m-tile m-tile--light" style="background-image:url('https://placehold.it/400x400/eeeeee')">
<div class="m-tile__header">1 column</div>
<div class="m-tile__body"></div>
<div class="m-tile__footer"></div>
</div>
</div>
2 columns
2 columns
<div class="m-tiles m-tiles--2@medium">
<div class="m-tile m-tile--light" style="background-image:url('https://placehold.it/400x400/eeeeee')">
<div class="m-tile__header">2 columns</div>
<div class="m-tile__body"></div>
<div class="m-tile__footer"></div>
</div>
<div class="m-tile m-tile--light" style="background-image:url('https://placehold.it/400x400/eeeeee')">
<div class="m-tile__header">2 columns</div>
<div class="m-tile__body"></div>
<div class="m-tile__footer"></div>
</div>
</div>
3 columns
3 columns
3 columns
<div class="m-tiles m-tiles--3@medium">
<div class="m-tile m-tile--light" style="background-image:url('https://placehold.it/400x400/eeeeee')">
<div class="m-tile__header">3 columns</div>
<div class="m-tile__body"></div>
<div class="m-tile__footer"></div>
</div>
<div class="m-tile m-tile--light" style="background-image:url('https://placehold.it/400x400/eeeeee')">
<div class="m-tile__header">3 columns</div>
<div class="m-tile__body"></div>
<div class="m-tile__footer"></div>
</div>
<div class="m-tile m-tile--light" style="background-image:url('https://placehold.it/400x400/eeeeee')">
<div class="m-tile__header">3 columns</div>
<div class="m-tile__body"></div>
<div class="m-tile__footer"></div>
</div>
</div>
4 columns
4 columns
4 columns
4 columns
<div class="m-tiles m-tiles--4@medium">
<div class="m-tile m-tile--light" style="background-image:url('https://placehold.it/400x400/eeeeee')">
<div class="m-tile__header">4 columns</div>
<div class="m-tile__body"></div>
<div class="m-tile__footer"></div>
</div>
<div class="m-tile m-tile--light" style="background-image:url('https://placehold.it/400x400/eeeeee')">
<div class="m-tile__header">4 columns</div>
<div class="m-tile__body"></div>
<div class="m-tile__footer"></div>
</div>
<div class="m-tile m-tile--light" style="background-image:url('https://placehold.it/400x400/eeeeee')">
<div class="m-tile__header">4 columns</div>
<div class="m-tile__body"></div>
<div class="m-tile__footer"></div>
</div>
<div class="m-tile m-tile--light" style="background-image:url('https://placehold.it/400x400/eeeeee')">
<div class="m-tile__header">4 columns</div>
<div class="m-tile__body"></div>
<div class="m-tile__footer"></div>
</div>
</div>
Gutter Modifiers
To give tiles a different gutter, add one of the following modifier classes to the m-tiles element:
m-tiles--gutter-xsmall, m-tiles--gutter-small, m-tiles--gutter-medium, m-tiles--gutter-large, m-tiles--gutter-xlarge, m-tiles--gutter-super.
xsmall
xsmall
<div class="m-tiles m-tiles--gutter-xsmall m-tiles--2@medium">
<div class="m-tile m-tile--light" style="background-image:url('https://placehold.it/400x400/eeeeee')">
<div class="m-tile__header">xsmall</div>
<div class="m-tile__body"></div>
<div class="m-tile__footer"></div>
</div>
<div class="m-tile m-tile--light" style="background-image:url('https://placehold.it/400x400/eeeeee')">
<div class="m-tile__header">xsmall</div>
<div class="m-tile__body"></div>
<div class="m-tile__footer"></div>
</div>
</div>
small
small
<div class="m-tiles m-tiles--gutter-small m-tiles--2@medium">
<div class="m-tile m-tile--light" style="background-image:url('https://placehold.it/400x400/eeeeee')">
<div class="m-tile__header">small</div>
<div class="m-tile__body"></div>
<div class="m-tile__footer"></div>
</div>
<div class="m-tile m-tile--light" style="background-image:url('https://placehold.it/400x400/eeeeee')">
<div class="m-tile__header">small</div>
<div class="m-tile__body"></div>
<div class="m-tile__footer"></div>
</div>
</div>
medium
medium
<div class="m-tiles m-tiles--gutter-medium m-tiles--2@medium">
<div class="m-tile m-tile--light" style="background-image:url('https://placehold.it/400x400/eeeeee')">
<div class="m-tile__header">medium</div>
<div class="m-tile__body"></div>
<div class="m-tile__footer"></div>
</div>
<div class="m-tile m-tile--light" style="background-image:url('https://placehold.it/400x400/eeeeee')">
<div class="m-tile__header">medium</div>
<div class="m-tile__body"></div>
<div class="m-tile__footer"></div>
</div>
</div>
large
large
<div class="m-tiles m-tiles--gutter-large m-tiles--2@medium">
<div class="m-tile m-tile--light" style="background-image:url('https://placehold.it/400x400/eeeeee')">
<div class="m-tile__header">large</div>
<div class="m-tile__body"></div>
<div class="m-tile__footer"></div>
</div>
<div class="m-tile m-tile--light" style="background-image:url('https://placehold.it/400x400/eeeeee')">
<div class="m-tile__header">large</div>
<div class="m-tile__body"></div>
<div class="m-tile__footer"></div>
</div>
</div>
xlarge
xlarge
<div class="m-tiles m-tiles--gutter-xlarge m-tiles--2@medium">
<div class="m-tile m-tile--light" style="background-image:url('https://placehold.it/400x400/eeeeee')">
<div class="m-tile__header">xlarge</div>
<div class="m-tile__body"></div>
<div class="m-tile__footer"></div>
</div>
<div class="m-tile m-tile--light" style="background-image:url('https://placehold.it/400x400/eeeeee')">
<div class="m-tile__header">xlarge</div>
<div class="m-tile__body"></div>
<div class="m-tile__footer"></div>
</div>
</div>
Placing Text
Each tile contains three child elements, m-tile__header, m-tile__body, m-tile__footer, which can be used to vertically position text at the top, in the middle, or at the bottom of a tile.
Top
<div class="m-tile m-tile--light" style="background-image:url('https://placehold.it/400x400/eeeeee')">
<div class="m-tile__header"><p>Top</p></div>
<div class="m-tile__body"></div>
<div class="m-tile__footer"></div>
</div>
Middle
<div class="m-tile m-tile--dark" style="background-image:url('https://placehold.it/400x400/111111')">
<div class="m-tile__header"></div>
<div class="m-tile__body"><p>Middle</p></div>
<div class="m-tile__footer"></div>
</div>
<div class="m-tile m-tile--light" style="background-image:url('https://placehold.it/400x400/eeeeee')">
<div class="m-tile__header"></div>
<div class="m-tile__body"></div>
<div class="m-tile__footer"><p>Bottom</p></div>
</div>
To position items horizontally, use the text alignment utilities: u-text-align--center, u-text-align--right.
Center
<div class="m-tile m-tile--dark" style="background-image:url('https://placehold.it/400x400/111111')">
<div class="m-tile__header"></div>
<div class="m-tile__body u-text-align--center"><p>Center</p></div>
<div class="m-tile__footer"></div>
</div>
Right
<div class="m-tile m-tile--light" style="background-image:url('https://placehold.it/400x400/eeeeee')">
<div class="m-tile__header"></div>
<div class="m-tile__body u-text-align--right"><p>Right</p></div>
<div class="m-tile__footer"></div>
</div>
Theme Modifiers
As images vary in color, we offer two themes, light and dark. Use the modifier m-tile--light when the image is light and you want dark text. Use the modifier m-tile--dark when the image is dark and you want light text.
Light
Dark
<div class="m-tiles m-tiles--2@medium">
<div class="m-tile m-tile--light" style="background-image:url('https://placehold.it/400x400/eeeeee')">
<div class="m-tile__header">
<p>Light</p>
</div>
<div class="m-tile__body"></div>
<div class="m-tile__footer"></div>
</div>
<div class="m-tile m-tile--dark" style="background-image:url('https://placehold.it/400x400/111111')">
<div class="m-tile__header">
<p>Dark</p>
</div>
<div class="m-tile__body"></div>
<div class="m-tile__footer"></div>
</div>
</div>
Featured Tiles
Featured tiles span two columns and have a large minimum height to show their importance. This is primarily used for news tiles.
<div class="m-tiles m-tiles--2@medium">
<a class="m-tile m-tile--dark m-tile--featured" href="#" style="background-image:url('https://placehold.it/400x400/111111')">
<div class="m-tile__header"></div>
<div class="m-tile__body"></div>
<div class="m-tile__footer">
<p>Featured Tile</p>
</div>
</a>
<a class="m-tile m-tile--light" href="#" style="background-image:url('https://placehold.it/400x400/eeeeee')">Regular Tile</a>
<a class="m-tile m-tile--dark" href="#" style="background-image:url('https://placehold.it/400x400/111111')">Regular Tile</a>
</div>