Atoms



Colors

Brand Colors

Overwatch only has a few internal brand colors that are used extensively throughout the site. Utility classes are provided in the form of .u-XXX-color where XXX can be text or secondaryText (for text color), background or secondaryBackground (for background color), border or secondaryBorder (for border color). In addition, background and border allow for modifiers in the form of --XXXTransparency where XXX can be light, medium or heavy.

Example
I have blue text
I have an orange background with medium transparency.
I have white text, a gray background with light transparency, and a secondary gray border
I have green text
I have an green background with medium transparency.
I have white text, a gray background with light transparency, and a secondary gray border
<div class="u-text-blue">I have blue text</div>
                <div class="u-background-orange u-background-orange--mediumTransparency">I have an orange background with medium transparency.</div>
                <div class="u-text-white u-background-gray u-background-gray--lightTransparency u-secondaryBorder-gray" style="border-width: 2px;border-style: solid;">I have white text, a gray background with light transparency, and a secondary gray border </div>
                <div class="u-text-green">I have green text</div>
                <div class="u-background-green u-background-green--mediumTransparency">I have an green background with medium transparency.</div>
                <div class="u-text-white u-background-gray u-background-gray--lightTransparency u-secondaryBorder-gray" style="border-width: 2px;border-style: solid;">I have white text, a gray background with light transparency, and a secondary gray border </div>

Hero Colors

Overwatch heroes have primary and secondary utility classes that can be applied to text (as u-text-XXX and u-secondaryText-XXX), background (as u-background-XXX and u-secondaryBackground-XXX), border (as u-border-XXX and u-secondaryBorder), and a gradient color (as u-heroGradientColor-XXX) where XXX is the all-lowercase-single-word hero name. Soldier-76 is just soldier.

Example
McCree text color with McCree border color

McCree secondary text color with secondary border color

McCree background color with white text

McCree secondary background color with white text

McCree gradient color with white text
<div class="u-text-mccree u-border-mccree" style="border-width: 2px;border-style: solid;">McCree text color with McCree border color</div>
                <br/>
                <div class="u-secondaryText-mccree u-secondaryBorder-mccree" style="border-width: 2px;border-style: solid;">McCree secondary text color with secondary border color</div>
                <br/>
                <div class="u-background-mccree u-text-white">McCree background color with white text</div>
                <br/>
                <div class="u-secondaryBackground-mccree u-text-white">McCree secondary background color with white text</div>
                <br/>
                <div class="u-heroGradientColor-mccree u-text-white" style="height: 70px;">McCree gradient color with white text</div>

Forms

Notes

These are some generic form stylings for building out elements on dark backgrounds.

Checkbox

Default checkbox to be used, with associated label. If this is being used in a browser that does not support the appearance CSS declaration, then this will default to the browser/OS built-in checkbox instead.

Example
<div class="TexturedBackground TexturedBackground--dark" style="padding: 50px">
                	<label class="FormLabel FormLabel--checkbox">
                        <input type="checkbox" class="FormInput"/>
                        <span class="FormLabel-text">Text to align correctly with the checkbox. This should play nicely regardless of amount.</span>
                    </label>
                	<label class="FormLabel FormLabel--checkbox is-error">
                        <input type="checkbox" class="FormInput"/>
                        <span class="FormLabel-text">This checkbox was not checked, and so it has an error state.</span>
                    </label>
                </div>

Form Dropdown

<div class="TexturedBackground TexturedBackground--dark" style="padding: 50px;">
                	<div class="Dropdown Dropdown--form">
                		<button type="button" class="Button Button--secondary Dropdown-toggle Button--icon" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                            <span class="Button-text js-truncate">Dropdown</span>
                            <svg xmlns="http://www.w3.org/2000/svg" class="Icon">
                                <use xlink:href="#icon-chevron-down"/>
                            </svg>
                        </button>
                		<ul class="Dropdown-menu">
                			<li><a href="javascript:void(0)"><span class="Dropdown-menu-text js-truncate">If this text is really long 3 lines max</span>
                                <svg class="Icon" xmlns="http://www.w3.org/2000/svg">
                                    <use xlink:href="#icon-external-url"/>
                                </svg>
                            </a></li>
                			<li><a href="javascript:void(0)"><span class="Dropdown-menu-text js-truncate">If this text is really long wrap with ellipsis truncation</span>
                                <svg class="Icon" xmlns="http://www.w3.org/2000/svg">
                                    <use xlink:href="#icon-external-url"/>
                                </svg>
                            </a></li>
                			<li><a href="javascript:void(0)"><span class="Dropdown-menu-text js-truncate">Short Item</span>
                                <svg class="Icon" xmlns="http://www.w3.org/2000/svg">
                                    <use xlink:href="#icon-external-url"/>
                                </svg>
                            </a></li>
                		</ul>
                	</div>
                	<div style="height: 40px;"></div>
                	<div class="Dropdown Dropdown--form Dropdown--error">
                		<button type="button" class="Button Button--secondary Dropdown-toggle Button--icon" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                            <span class="Button-text js-truncate">Error Dropdown</span>
                            <svg xmlns="http://www.w3.org/2000/svg" class="Icon">
                                <use xlink:href="#icon-chevron-down"/>
                            </svg>
                        </button>
                		<ul class="Dropdown-menu">
                			<li><a href="javascript:void(0)"><span class="Dropdown-menu-text js-truncate">If this text is really long 3 lines max</span>
                                <svg class="Icon" xmlns="http://www.w3.org/2000/svg">
                                    <use xlink:href="#icon-external-url"/>
                                </svg>
                            </a></li>
                			<li><a href="javascript:void(0)"><span class="Dropdown-menu-text js-truncate">If this text is really long wrap with ellipsis truncation</span>
                                <svg class="Icon" xmlns="http://www.w3.org/2000/svg">
                                    <use xlink:href="#icon-external-url"/>
                                </svg>
                            </a></li>
                			<li><a href="javascript:void(0)"><span class="Dropdown-menu-text js-truncate">Short Item</span>
                                <svg class="Icon" xmlns="http://www.w3.org/2000/svg">
                                    <use xlink:href="#icon-external-url"/>
                                </svg>
                            </a></li>
                		</ul>
                	</div>
                </div>

Label

Labels need to be used for screen reader purposes (and other accessibility reasons), however they are not used visually within the current styles. All labels should have the Bootstrap .sr-only class applied. (Label code is here, before the input. The input is here to demonstrate the practice.)

Example
<div class="TexturedBackground TexturedBackground--dark" style="padding: 50px;">
                	<label for="label-element" class="sr-only">You can't see me</label>
                	<input type="text" class="FormInput" id="label-element" placeholder="I have a label, but it’s hidden.">
                </div>

Submit Button

The Submit Button is a standard Button that has a type of submit. This button also has a few display states, to handle async requests, as well as a special padding for when you want to put a .Spinner inside of the button itself.

Example
<div class="TexturedBackground TexturedBackground--dark" style="padding: 50px;">
                	<button type="submit" class="Button Button--primary">
                        <span class="Button-text">Submit Button</span>
                    </button>
                	<div style="height: 40px;"></div>
                	<button type="submit" class="Button Button--primary is-loading">
                        <span class="Button-text">Loading...</span>
                    </button>
                	<div style="height: 40px;"></div>
                	<button type="submit" class="Button Button--primary is-loading has-Spinner">
                        <span class="Spinner">Loading...</span>
                    </button>
                	<div style="height: 40px;"></div>
                	<button type="submit" class="Button Button--primary is-complete">
                        <span class="Button-text">Success!</span>
                    </button>
                </div>

Switch

Toggle switch form element. File location: src/assets/toolkit/styles/materials/atoms/_switch.scss.

Example
Default
With Label
<h6>Default</h6>
                <label class="Switch">
                    <div class="Switch-toggle">
                        <input type="checkbox" />
                        <span class="Switch-slider"></span>
                    </div>
                </label>
                
                <h6>With Label</h6>
                <label class="Switch">
                    <div class="Switch-label">Label: </div>
                    <div class="Switch-toggle">
                        <input type="checkbox" />
                        <span class="Switch-slider"></span>
                    </div>
                </label>

Text Input

Standard input[type=text] field and error state.

Example
<div class="TexturedBackground TexturedBackground--dark" style="padding: 50px;">
                	<input type="text" class="FormInput" placeholder="Default Placeholder Text" />
                	<div style="height: 40px;"></div>
                	<input type="text" class="FormInput is-error" placeholder="Default Placeholder Text" />
                </div>

Html Elements

Notes

Contains how standard HTML tags are styled

Blockquote

Example

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur feugiat magna sem, at volutpat turpis maximus ut. In eget sem ac magna viverra mollis id nec velit. Suspendisse aliquam luctus nunc ut venenatis. Nunc vel accumsan leo. Cras auctor porttitor semper. Praesent id tortor ipsum. Nam laoreet porttitor lectus, at sodales ipsum tempus ut.

Citation, Name, etc.
Reversed Blockquotes

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur feugiat magna sem, at volutpat turpis maximus ut. In eget sem ac magna viverra mollis id nec velit. Suspendisse aliquam luctus nunc ut venenatis. Nunc vel accumsan leo. Cras auctor porttitor semper. Praesent id tortor ipsum. Nam laoreet porttitor lectus, at sodales ipsum tempus ut.

Citation, Name, etc.
<blockquote>
                	<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur feugiat magna sem, at volutpat turpis maximus ut. In eget sem ac magna viverra mollis id nec velit. Suspendisse aliquam luctus nunc ut venenatis. Nunc vel accumsan leo. Cras auctor porttitor
                		semper. Praesent id tortor ipsum. Nam laoreet porttitor lectus, at sodales ipsum tempus ut.</p>
                
                	<footer>
                		<cite title="Title Name">Citation, Name, etc.</cite>
                	</footer>
                </blockquote>
                
                <h6>Reversed Blockquotes</h6>
                <blockquote class="blockquote-reverse">
                	<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur feugiat magna sem, at volutpat turpis maximus ut. In eget sem ac magna viverra mollis id nec velit. Suspendisse aliquam luctus nunc ut venenatis. Nunc vel accumsan leo. Cras auctor porttitor
                		semper. Praesent id tortor ipsum. Nam laoreet porttitor lectus, at sodales ipsum tempus ut.</p>
                
                	<footer>
                		<cite title="Title Name">Citation, Name, etc.</cite>
                	</footer>
                </blockquote>

Breadcrumbs

Breadcrumbs display clickable link paths to the current page with the last crumb displaying the inherit color.

<nav class="Breadcrumb">
                	<a class="Breadcrumb-link">
                        Gallery
                    </a>
                	<a class="Breadcrumb-link">
                        Category 1
                    </a>
                	<a class="Breadcrumb-link">
                        Selected Item
                    </a>
                </nav>

Buttons

Button component. Extends bootstrap .btn class, so either can be used (preferably the fully qualified SUITCSS style). Using SUITCSS style gives more flexibility with light modifier, and max-height truncation for buttons with lots of text. File location: src/assets/toolkit/styles/bootstrap-overwatch/_buttons.scss.

Example
Standard Buttons

Icon Buttons

Buttons With Icon use a class to catch for long labels

Buttons will truncate to 3 lines


Disabled Buttons

Can be disabled by class or attribute


Secondary Buttons With -light modifier

Use on top of dark backgrounds


Transparent Button (on gray background)


Transparent Button With -active modifier (on gray background)
<h6>Standard Buttons</h6>
                <button class="Button Button--primary"><span class="Button-text js-truncate">Primary</span></button>
                <button class="Button Button--secondary"><span class="Button-text js-truncate">Secondary Lots of Text makes it Two lines Up to 3 and then we truncate so you don't see this line</span></button>
                <button class="Button Button--stripped"><span class="Button-text js-truncate">Stripped</span></button>
                
                <hr class="u-verticalMargin--small" />
                
                <h6>Icon Buttons</h6>
                <button class="Button Button--iconOnly">
                    <svg class="Icon" xmlns="http://www.w3.org/2000/svg">
                        <use xlink:href="#icon-video"/>
                    </svg>
                </button>
                <button class="Button Button--iconOnly is-disabled" disabled>
                    <svg class="Icon" xmlns="http://www.w3.org/2000/svg">
                        <use xlink:href="#icon-video"/>
                    </svg>
                </button>
                
                <hr class="u-verticalMargin--small" />
                
                <h6>Buttons With Icon use a class to catch for long labels</h6>
                <p>Buttons will truncate to 3 lines</p>
                <button class="Button Button--primary Button--icon">
                    <span class="Button-text js-truncate">Primary with Icon Lots of Text makes it Two lines Up to 3 and then we truncate so you don't see this line</span>
                    <svg class="Icon" xmlns="http://www.w3.org/2000/svg">
                        <use xlink:href="#icon-external-url"/>
                    </svg>
                </button>
                <button class="Button Button--secondary Button--icon">
                    <span class="Button-text js-truncate">Secondary with Icon</span>
                    <svg class="Icon" xmlns="http://www.w3.org/2000/svg">
                        <use xlink:href="#icon-external-url"/>
                    </svg>
                </button>
                <button class="Button Button--stripped Button--icon">
                    <span class="Button-text js-truncate">Stripped with Icon</span>
                    <svg class="Icon" xmlns="http://www.w3.org/2000/svg">
                        <use xlink:href="#icon-external-url"/>
                    </svg>
                </button>
                
                <hr class="u-verticalMargin--small" />
                
                <h6>Disabled Buttons</h6>
                <p>Can be disabled by class or attribute</p>
                <button class="Button Button--primary" disabled><span class="Button-text js-truncate">Primary Disabled</span></button>
                <button class="Button Button--secondary" disabled><span class="Button-text js-truncate">Secondary Disabled</span></button>
                <button class="Button Button--primary Button--icon" disabled>
                    <span class="Button-text js-truncate">Primary with Icon</span>
                    <svg class="Icon" xmlns="http://www.w3.org/2000/svg">
                        <use xlink:href="#icon-external-url"/>
                    </svg>
                </button>
                <button class="Button Button--secondary Button--icon" disabled>
                    <span class="Button-text js-truncate">Secondary with Icon</span>
                    <svg class="Icon" xmlns="http://www.w3.org/2000/svg">
                        <use xlink:href="#icon-external-url"/>
                    </svg>
                </button>
                <button class="Button Button--stripped Button--icon" disabled>
                    <span class="Button-text js-truncate">Stripped with Icon</span>
                    <svg class="Icon" xmlns="http://www.w3.org/2000/svg">
                        <use xlink:href="#icon-external-url"/>
                    </svg>
                </button>
                
                <hr class="u-verticalMargin--small" />
                
                <h6>Secondary Buttons With -light modifier</h6>
                <p>Use on top of dark backgrounds</p>
                <div class="TexturedBackground--dark" style="padding: 10px;">
                	<button class="Button Button--secondary-light"><span class="Button-text js-truncate">Secondary Light</span></button>
                	<button class="Button Button--secondary-light Button--icon">
                        <span class="Button-text js-truncate">Secondary Light with Icon</span>
                        <svg class="Icon" xmlns="http://www.w3.org/2000/svg">
                            <use xlink:href="#icon-external-url"/>
                        </svg>
                    </button>
                	<button class="Button Button--secondary-light" disabled><span class="Button-text js-truncate">Secondary Light Disabled</span></button>
                	<button class="Button Button--secondary-light Button--icon" disabled>
                        <span class="Button-text js-truncate">Secondary Light with Icon Disabled</span>
                        <svg class="Icon" xmlns="http://www.w3.org/2000/svg">
                            <use xlink:href="#icon-external-url"/>
                        </svg>
                    </button>
                </div>
                
                <hr class="u-verticalMargin--small" />
                
                <h6>Transparent Button (on gray background)</h6>
                <div style="background-color:gray; padding:0 10px;">
                	<button class="Button Button--transparent"><span class="Button-text js-truncate">Transparent</span></button>
                </div>
                <br /><br />
                <h6>Transparent Button With -active modifier (on gray background)</h6>
                <div style="background-color:gray; padding:0 10px;">
                	<button class="Button Button--transparent-active"><span class="Button-text js-truncate">Transparent</span></button>
                </div>

Header

Example
<header class="Header"></header>

Lists

There are three different list styles that are supported. A default ul will provide a bulleted list, while ul.UnstyledList will provide a left-aligned list with no bullets. Finally, ul.InlineList will provide a list where the items are arranged horizontally.

Example
Unordered List
  • Default 1
  • Default 2
  • Default 3
  • Default 4
  • Default 5
Unordered Unstyled List
  • Unstyled 1
  • Unstyled 2
  • Unstyled 3
  • Unstyled 4
  • Unstyled 5
Inline List
  • Inline 1
  • Inline 2
  • Inline 3
  • Inline 4
  • Inline 5
Definition List
Definition Term
Definition Description
Definition Term
Definition Description
Definition Term
Definition Description
Definition Term
Definition Description
Inline Definition
Definition Term
Definition Description
Definition Term
Definition Description
Definition Term
Definition Description
<h6 class="f-item-subheading">Unordered List</h6>
                <ul>
                	<li>Default 1</li>
                	<li>Default 2</li>
                	<li>Default 3</li>
                	<li>Default 4</li>
                	<li>Default 5</li>
                </ul>
                
                <h6 class="f-item-subheading">Unordered Unstyled List</h6>
                <ul class="UnstyledList">
                	<li>Unstyled 1</li>
                	<li>Unstyled 2</li>
                	<li>Unstyled 3</li>
                	<li>Unstyled 4</li>
                	<li>Unstyled 5</li>
                </ul>
                
                <h6 class="f-item-subheading">Inline List</h6>
                <ul class="InlineList">
                	<li>Inline 1</li>
                	<li>Inline 2</li>
                	<li>Inline 3</li>
                	<li>Inline 4</li>
                	<li>Inline 5</li>
                </ul>
                
                <h6 class="f-item-subheading">Definition List</h6>
                <dl>
                	<dt>Definition Term</dt>
                	<dd>Definition Description</dd>
                	<dt>Definition Term</dt>
                	<dd>Definition Description</dd>
                	<dt>Definition Term</dt>
                	<dd>Definition Description</dd><dt>Definition Term</dt>
                	<dd>Definition Description</dd>
                </dl>
                
                <h6 class="f-item-subheading">Inline Definition</h6>
                <dl class="dl-horizontal">
                	<dt>Definition Term</dt>
                	<dd>Definition Description</dd>
                	<dt>Definition Term</dt>
                	<dd>Definition Description</dd>
                	<dt>Definition Term</dt>
                	<dd>Definition Description</dd>
                </dl>

Nav

<nav class="Nav">
                	<a href="javascript:void(0)">Link 1</a>
                	<a href="javascript:void(0)">Link 2</a>
                	<a href="javascript:void(0)">Link 3</a>
                	<a href="javascript:void(0)">Link 4</a>
                	<a href="javascript:void(0)">Link 5</a>
                </nav>

Paragraphs

Example

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus vitae hendrerit urna. Nulla et purus vel quam bibendum hendrerit.

Suspendisse non molestie ante. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Nulla viverra mauris tincidunt risus consectetur, sit amet blandit libero vehicula. Aenean est diam, consectetur eget arcu eu, commodo elementum metus. Vestibulum sed libero nisi. Donec leo quam, pulvinar id auctor ut, finibus vitae sem.

<p class="lead">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus vitae hendrerit urna. Nulla et purus vel quam bibendum hendrerit.</p>
                
                <p>Suspendisse non molestie ante. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Nulla viverra mauris tincidunt risus consectetur, sit amet blandit libero
                	vehicula. Aenean est diam, consectetur eget arcu eu, commodo elementum metus. Vestibulum sed libero nisi. Donec leo quam, pulvinar id auctor ut, finibus vitae sem.</p>

Pullquote

Example
Reversed Pull Quotes
<aside class="pullquote">
                	<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur feugiat magna sem, at volutpat turpis maximus ut. In eget sem ac magna viverra mollis id nec velit. Suspendisse aliquam luctus nunc ut venenatis.</p>
                	<footer class="pullquote-source">
                		<cite title="...">Sam Someone, <em>Book Name</em></cite>
                	</footer>
                </aside>
                
                <h6>Reversed Pull Quotes</h6>
                <aside class="pullquote-reverse">
                	<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur feugiat magna sem, at volutpat turpis maximus ut. In eget sem ac magna viverra mollis id nec velit. Suspendisse aliquam luctus nunc ut venenatis.</p>
                	<footer class="pullquote-source">
                		<cite title="...">Sam Someone, <em>Book Name</em></cite>
                	</footer>
                </aside>

Rules

Inherits bootstraps hr element. File location: src/assets/toolkit/styles/partials/atoms/_rule.scss.

Example
Default

Thin Modifier

Short Modifier

Medium Modifier

Light Modifier

Orange Modifier

Grey Modifier

Divider Modifier

<h6>Default</h6>
                <hr class="Rule" />
                <h6>Thin Modifier</h6>
                <hr class="Rule Rule--thin" />
                <h6>Short Modifier</h6>
                <hr class="Rule Rule--short" />
                <h6>Medium Modifier</h6>
                <hr class="Rule Rule--medium" />
                <h6>Light Modifier</h6>
                <hr class="Rule Rule--light" />
                <h6>Orange Modifier</h6>
                <hr class="Rule Rule--orange" />
                <h6>Grey Modifier</h6>
                <hr class="Rule Rule--grey" />
                <h6>Divider Modifier</h6>
                <hr class="Rule Rule--divider" />

Section

We provide a section class that creates standard amounts of padding around it's contained elements. --alternate, --thin, --thin-top and --thin-bottom are modifiers that can be applied.

Example

Content goes in here.

Section with alternate background color.

Section with thin padding.

Section with thin padding and background.

Section with thin padding on bottom for stacking.

Section with thin padding on top for stacking.

Section with no padding on the sides

Section with top and bottom borders

Section with a solid white background

<section class="Section">
                	<p>Content goes in here.</p>
                </section>
                <section class="Section Section--alternate">
                	<p>Section with alternate background color.</p>
                </section>
                <section class="Section Section--thin">
                	<p>Section with thin padding.</p>
                </section>
                <section class="Section Section--alternate Section--thin">
                	<p>Section with thin padding and background.</p>
                </section>
                <section class="Section Section--thin-bottom">
                	<p>Section with thin padding on bottom for stacking.</p>
                </section>
                <section class="Section Section--thin-top">
                	<p>Section with thin padding on top for stacking.</p>
                </section>
                <section class="Section Section--no-sides">
                	<p>Section with no padding on the sides</p>
                </section>
                <section class="Section Section--border">
                	<p>Section with top and bottom borders</p>
                </section>
                <section class="Section Section--background">
                	<p>Section with a solid white background</p>
                </section>

Time

HTML time element to allow for machine-readability

Example

Overwatch launched on

<time class="Time">1:54</time>
                <br/>
                <p>Overwatch launched on <time datetime="2016-05-24">May 24th, 2016</time></p>

Icons

Notes

Contains the various uses of icons

Hero Icons

List of most played heroes. Hero SVGs can be achieved with the following classes: HeroIcon u-heroGradientColor-XXX, where XXX is the all-lower-cased, single-word hero name (Soldier 76 is soldier-76). is-disabled, HeroIcon--small, and HeroIcon--large are available modifiers. File location: src/assets/toolkit/styles/materials/atoms/_hero_icon.scss.

Example
All Available Heroes
Modifiers

Disabled

Small

Large
<h6>All Available Heroes</h6>
                
                <div style="margin-bottom:30px;">
                	<svg class="HeroIcon u-heroGradientColor-ana " xmlns="http://www.w3.org/2000/svg">
                        <use xlink:href="#hero-ana"/>
                    </svg>
                	<svg class="HeroIcon u-heroGradientColor-bastion" xmlns="http://www.w3.org/2000/svg">
                        <use xlink:href="#hero-bastion"/>
                    </svg>
                	<svg class="HeroIcon u-heroGradientColor-brigitte" xmlns="http://www.w3.org/2000/svg">
                        <use xlink:href="#hero-brigitte"/>
                    </svg>
                	<svg class="HeroIcon u-heroGradientColor-doomfist" xmlns="http://www.w3.org/2000/svg">
                        <use xlink:href="#hero-doomfist"/>
                    </svg>
                	<svg class="HeroIcon u-heroGradientColor-dva" xmlns="http://www.w3.org/2000/svg">
                        <use xlink:href="#hero-dva"/>
                    </svg>
                	<svg class="HeroIcon u-heroGradientColor-genji" xmlns="http://www.w3.org/2000/svg">
                        <use xlink:href="#hero-genji"/>
                    </svg>
                	<svg class="HeroIcon u-heroGradientColor-hanzo" xmlns="http://www.w3.org/2000/svg">
                        <use xlink:href="#hero-hanzo"/>
                    </svg>
                	<svg class="HeroIcon u-heroGradientColor-junkrat" xmlns="http://www.w3.org/2000/svg">
                        <use xlink:href="#hero-junkrat"/>
                    </svg>
                	<svg class="HeroIcon u-heroGradientColor-lucio" xmlns="http://www.w3.org/2000/svg">
                        <use xlink:href="#hero-lucio"/>
                    </svg>
                	<svg class="HeroIcon u-heroGradientColor-mccree" xmlns="http://www.w3.org/2000/svg">
                        <use xlink:href="#hero-mccree"/>
                    </svg>
                	<svg class="HeroIcon u-heroGradientColor-mei" xmlns="http://www.w3.org/2000/svg">
                        <use xlink:href="#hero-mei"/>
                    </svg>
                	<svg class="HeroIcon u-heroGradientColor-mercy" xmlns="http://www.w3.org/2000/svg">
                        <use xlink:href="#hero-mercy"/>
                    </svg>
                	<svg class="HeroIcon u-heroGradientColor-moira" xmlns="http://www.w3.org/2000/svg">
                        <use xlink:href="#hero-moira"/>
                    </svg>
                	<svg class="HeroIcon u-heroGradientColor-orisa" xmlns="http://www.w3.org/2000/svg">
                        <use xlink:href="#hero-orisa"/>
                    </svg>
                	<svg class="HeroIcon u-heroGradientColor-pharah" xmlns="http://www.w3.org/2000/svg">
                        <use xlink:href="#hero-pharah"/>
                    </svg>
                	<svg class="HeroIcon u-heroGradientColor-reaper" xmlns="http://www.w3.org/2000/svg">
                        <use xlink:href="#hero-reaper"/>
                    </svg>
                	<svg class="HeroIcon u-heroGradientColor-reinhardt" xmlns="http://www.w3.org/2000/svg">
                        <use xlink:href="#hero-reinhardt"/>
                    </svg>
                	<svg class="HeroIcon u-heroGradientColor-roadhog" xmlns="http://www.w3.org/2000/svg">
                        <use xlink:href="#hero-roadhog"/>
                    </svg>
                	<svg class="HeroIcon u-heroGradientColor-soldier-76" xmlns="http://www.w3.org/2000/svg">
                        <use xlink:href="#hero-soldier-76"/>
                    </svg>
                	<svg class="HeroIcon u-heroGradientColor-sombra" xmlns="http://www.w3.org/2000/svg">
                        <use xlink:href="#hero-sombra"/>
                    </svg>
                	<svg class="HeroIcon u-heroGradientColor-symmetra" xmlns="http://www.w3.org/2000/svg">
                        <use xlink:href="#hero-symmetra"/>
                    </svg>
                	<svg class="HeroIcon u-heroGradientColor-torbjorn" xmlns="http://www.w3.org/2000/svg">
                        <use xlink:href="#hero-torbjorn"/>
                    </svg>
                	<svg class="HeroIcon u-heroGradientColor-tracer" xmlns="http://www.w3.org/2000/svg">
                        <use xlink:href="#hero-tracer"/>
                    </svg>
                	<svg class="HeroIcon u-heroGradientColor-widowmaker" xmlns="http://www.w3.org/2000/svg">
                        <use xlink:href="#hero-widowmaker"/>
                    </svg>
                	<svg class="HeroIcon u-heroGradientColor-winston" xmlns="http://www.w3.org/2000/svg">
                        <use xlink:href="#hero-winston"/>
                    </svg>
                	<svg class="HeroIcon u-heroGradientColor-wrecking-ball" xmlns="http://www.w3.org/2000/svg">
                        <use xlink:href="#hero-wrecking-ball"/>
                    </svg>
                	<svg class="HeroIcon u-heroGradientColor-zarya" xmlns="http://www.w3.org/2000/svg">
                        <use xlink:href="#hero-zarya"/>
                    </svg>
                	<svg class="HeroIcon u-heroGradientColor-zenyatta" xmlns="http://www.w3.org/2000/svg">
                        <use xlink:href="#hero-zenyatta"/>
                    </svg>
                </div>
                
                <h6>Modifiers</h6>
                <br/>
                
                <h7>Disabled</h7>
                
                <div style="height:60px;">
                	<svg class="HeroIcon u-heroGradientColor-ana is-disabled" xmlns="http://www.w3.org/2000/svg">
                        <use xlink:href="#hero-ana"/>
                    </svg>
                	<svg class="HeroIcon u-heroGradientColor-bastion is-disabled" xmlns="http://www.w3.org/2000/svg">
                        <use xlink:href="#hero-bastion"/>
                    </svg>
                	<svg class="HeroIcon u-heroGradientColor-dva is-disabled" xmlns="http://www.w3.org/2000/svg">
                        <use xlink:href="#hero-dva"/>
                    </svg>
                	<svg class="HeroIcon u-heroGradientColor-genji is-disabled" xmlns="http://www.w3.org/2000/svg">
                        <use xlink:href="#hero-genji"/>
                    </svg>
                	<svg class="HeroIcon u-heroGradientColor-hanzo is-disabled" xmlns="http://www.w3.org/2000/svg">
                        <use xlink:href="#hero-hanzo"/>
                    </svg>
                </div>
                <br/>
                
                <h7>Small</h7>
                
                <div style="height:60px;">
                	<svg class="HeroIcon u-heroGradientColor-ana HeroIcon--small" xmlns="http://www.w3.org/2000/svg">
                        <use xlink:href="#hero-ana"/>
                    </svg>
                	<svg class="HeroIcon u-heroGradientColor-bastion HeroIcon--small" xmlns="http://www.w3.org/2000/svg">
                        <use xlink:href="#hero-bastion"/>
                    </svg>
                	<svg class="HeroIcon u-heroGradientColor-dva HeroIcon--small" xmlns="http://www.w3.org/2000/svg">
                        <use xlink:href="#hero-dva"/>
                    </svg>
                	<svg class="HeroIcon u-heroGradientColor-genji HeroIcon--small" xmlns="http://www.w3.org/2000/svg">
                        <use xlink:href="#hero-genji"/>
                    </svg>
                	<svg class="HeroIcon u-heroGradientColor-hanzo HeroIcon--small" xmlns="http://www.w3.org/2000/svg">
                        <use xlink:href="#hero-hanzo"/>
                    </svg>
                </div>
                <br/>
                
                <h7>Large</h7>
                <div style="height:80px;">
                	<svg class="HeroIcon u-heroGradientColor-ana HeroIcon--large" xmlns="http://www.w3.org/2000/svg">
                        <use xlink:href="#hero-ana"/>
                    </svg>
                	<svg class="HeroIcon u-heroGradientColor-bastion HeroIcon--large" xmlns="http://www.w3.org/2000/svg">
                        <use xlink:href="#hero-bastion"/>
                    </svg>
                	<svg class="HeroIcon u-heroGradientColor-dva HeroIcon--large" xmlns="http://www.w3.org/2000/svg">
                        <use xlink:href="#hero-dva"/>
                    </svg>
                	<svg class="HeroIcon u-heroGradientColor-genji HeroIcon--large" xmlns="http://www.w3.org/2000/svg">
                        <use xlink:href="#hero-genji"/>
                    </svg>
                	<svg class="HeroIcon u-heroGradientColor-hanzo HeroIcon--large" xmlns="http://www.w3.org/2000/svg">
                        <use xlink:href="#hero-hanzo"/>
                    </svg>
                </div>

Icons

SVG Icon sets. File location: src/assets/toolkit/styles/partials/atoms/_icon.scss. Bootstrap also includes a set of Glyphs that you can use, but these icons are the primary Icons used in the design.

Example
UI Icons
Social Icons
Hero Icons
Role Icons
Schedule Icons

Map Icons
Modifiers
--xl

--lg

--lightFill

--sm

--xs

<h6>UI Icons</h6>
                <svg class="Icon" xmlns="http://www.w3.org/2000/svg">
                    <use xlink:href="#icon-arrow-down"/>
                </svg>
                <svg class="Icon" xmlns="http://www.w3.org/2000/svg">
                    <use xlink:href="#icon-arrow-up"/>
                </svg>
                <svg class="Icon" xmlns="http://www.w3.org/2000/svg">
                    <use xlink:href="#icon-arrow-left"/>
                </svg>
                <svg class="Icon" xmlns="http://www.w3.org/2000/svg">
                    <use xlink:href="#icon-arrow-right"/>
                </svg>
                <svg class="Icon" xmlns="http://www.w3.org/2000/svg">
                    <use xlink:href="#icon-checkmark"/>
                </svg>
                <svg class="Icon" xmlns="http://www.w3.org/2000/svg">
                    <use xlink:href="#icon-chevron-down"/>
                </svg>
                <svg class="Icon" xmlns="http://www.w3.org/2000/svg">
                    <use xlink:href="#icon-chevron-up"/>
                </svg>
                <svg class="Icon" xmlns="http://www.w3.org/2000/svg">
                    <use xlink:href="#icon-chevron-left"/>
                </svg>
                <svg class="Icon" xmlns="http://www.w3.org/2000/svg">
                    <use xlink:href="#icon-chevron-right"/>
                </svg>
                <svg class="Icon" xmlns="http://www.w3.org/2000/svg">
                    <use xlink:href="#icon-clock"/>
                </svg>
                <svg class="Icon" xmlns="http://www.w3.org/2000/svg">
                    <use xlink:href="#icon-close"/>
                </svg>
                <svg class="Icon" xmlns="http://www.w3.org/2000/svg">
                    <use xlink:href="#icon-connect"/>
                </svg>
                <svg class="Icon" xmlns="http://www.w3.org/2000/svg">
                    <use xlink:href="#icon-external-url"/>
                </svg>
                <svg class="Icon" xmlns="http://www.w3.org/2000/svg">
                    <use xlink:href="#icon-live"/>
                </svg>
                <svg class="Icon" xmlns="http://www.w3.org/2000/svg">
                    <use xlink:href="#icon-paginate-dot-empty"/>
                </svg>
                <svg class="Icon" xmlns="http://www.w3.org/2000/svg">
                    <use xlink:href="#icon-paginate-dot"/>
                </svg>
                <svg class="Icon" xmlns="http://www.w3.org/2000/svg">
                    <use xlink:href="#icon-play"/>
                </svg>
                <svg class="Icon" xmlns="http://www.w3.org/2000/svg">
                    <use xlink:href="#icon-mobile"/>
                </svg>
                <svg class="Icon" xmlns="http://www.w3.org/2000/svg">
                    <use xlink:href="#icon-search"/>
                </svg>
                <svg class="Icon" xmlns="http://www.w3.org/2000/svg">
                    <use xlink:href="#icon-video"/>
                </svg>
                <svg class="Icon" xmlns="http://www.w3.org/2000/svg">
                    <use xlink:href="#icon-x"/>
                </svg>
                <svg class="Icon" xmlns="http://www.w3.org/2000/svg">
                    <use xlink:href="#icon-user-input"/>
                </svg>
                <svg class="Icon" xmlns="http://www.w3.org/2000/svg">
                    <use xlink:href="#icon-world"/>
                </svg>
                <svg class="Icon" xmlns="http://www.w3.org/2000/svg">
                    <use xlink:href="#icon-help"/>
                </svg>
                <svg class="Icon" xmlns="http://www.w3.org/2000/svg">
                    <use xlink:href="#icon-plus"/>
                </svg>
                <svg class="Icon" xmlns="http://www.w3.org/2000/svg">
                    <use xlink:href="#icon-fave-on"/>
                </svg>
                <svg class="Icon" xmlns="http://www.w3.org/2000/svg">
                    <use xlink:href="#icon-fave-off"/>
                </svg>
                <svg class="Icon" xmlns="http://www.w3.org/2000/svg">
                    <use xlink:href="#icon-crown"/>
                </svg>
                <svg class="Icon" xmlns="http://www.w3.org/2000/svg">
                    <use xlink:href="#icon-ticket"/>
                </svg>
                <svg class="Icon" xmlns="http://www.w3.org/2000/svg">
                    <use xlink:href="#icon-info"/>
                </svg>
                <svg class="Icon" xmlns="http://www.w3.org/2000/svg">
                    <use xlink:href="#icon-brackets"/>
                </svg>
                <svg class="Icon" xmlns="http://www.w3.org/2000/svg">
                    <use xlink:href="#icon-calendar"/>
                </svg>
                <svg class="Icon" xmlns="http://www.w3.org/2000/svg">
                    <use xlink:href="#icon-pin"/>
                </svg>
                <svg class="Icon" xmlns="http://www.w3.org/2000/svg">
                    <use xlink:href="#icon-team"/>
                </svg>
                <svg class="Icon" xmlns="http://www.w3.org/2000/svg">
                    <use xlink:href="#icon-trophy"/>
                </svg>
                <svg class="Icon" xmlns="http://www.w3.org/2000/svg">
                    <use xlink:href="#icon-video-play"/>
                </svg>
                
                <h6>Social Icons</h6>
                <svg class="Icon" xmlns="http://www.w3.org/2000/svg">
                    <use xlink:href="#social-twitter"/>
                </svg>
                <svg class="Icon" xmlns="http://www.w3.org/2000/svg">
                    <use xlink:href="#social-instagram"/>
                </svg>
                <svg class="Icon" xmlns="http://www.w3.org/2000/svg">
                    <use xlink:href="#social-twitch"/>
                </svg>
                <svg class="Icon" xmlns="http://www.w3.org/2000/svg">
                    <use xlink:href="#social-facebook"/>
                </svg>
                <svg class="Icon" xmlns="http://www.w3.org/2000/svg">
                    <use xlink:href="#social-youtube"/>
                </svg>
                <svg class="Icon" xmlns="http://www.w3.org/2000/svg">
                    <use xlink:href="#social-reddit"/>
                </svg>
                <svg class="Icon" xmlns="http://www.w3.org/2000/svg">
                    <use xlink:href="#social-discord"/>
                </svg>
                <svg class="Icon" xmlns="http://www.w3.org/2000/svg">
                    <use xlink:href="#social-weibo"/>
                </svg>
                <svg class="Icon" xmlns="http://www.w3.org/2000/svg">
                    <use xlink:href="#social-wechat"/>
                </svg>
                <h6>Hero Icons</h6>
                <svg class="Icon" xmlns="http://www.w3.org/2000/svg">
                    <use xlink:href="#hero-ana"/>
                </svg>
                <svg class="Icon" xmlns="http://www.w3.org/2000/svg">
                    <use xlink:href="#hero-bastion"/>
                </svg>
                <svg class="Icon" xmlns="http://www.w3.org/2000/svg">
                    <use xlink:href="#hero-brigitte"/>
                </svg>
                <svg class="Icon" xmlns="http://www.w3.org/2000/svg">
                    <use xlink:href="#hero-doomfist"/>
                </svg>
                <svg class="Icon" xmlns="http://www.w3.org/2000/svg">
                    <use xlink:href="#hero-dva"/>
                </svg>
                <svg class="Icon" xmlns="http://www.w3.org/2000/svg">
                    <use xlink:href="#hero-genji"/>
                </svg>
                <svg class="Icon" xmlns="http://www.w3.org/2000/svg">
                    <use xlink:href="#hero-hanzo"/>
                </svg>
                <svg class="Icon" xmlns="http://www.w3.org/2000/svg">
                    <use xlink:href="#hero-junkrat"/>
                </svg>
                <svg class="Icon" xmlns="http://www.w3.org/2000/svg">
                    <use xlink:href="#hero-lucio"/>
                </svg>
                <svg class="Icon" xmlns="http://www.w3.org/2000/svg">
                    <use xlink:href="#hero-mccree"/>
                </svg>
                <svg class="Icon" xmlns="http://www.w3.org/2000/svg">
                    <use xlink:href="#hero-mei"/>
                </svg>
                <svg class="Icon" xmlns="http://www.w3.org/2000/svg">
                    <use xlink:href="#hero-mercy"/>
                </svg>
                <svg class="Icon" xmlns="http://www.w3.org/2000/svg">
                    <use xlink:href="#hero-moira"/>
                </svg>
                <svg class="Icon" xmlns="http://www.w3.org/2000/svg">
                    <use xlink:href="#hero-orisa"/>
                </svg>
                <svg class="Icon" xmlns="http://www.w3.org/2000/svg">
                    <use xlink:href="#hero-pharah"/>
                </svg>
                <svg class="Icon" xmlns="http://www.w3.org/2000/svg">
                    <use xlink:href="#hero-reaper"/>
                </svg>
                <svg class="Icon" xmlns="http://www.w3.org/2000/svg">
                    <use xlink:href="#hero-reinhardt"/>
                </svg>
                <svg class="Icon" xmlns="http://www.w3.org/2000/svg">
                    <use xlink:href="#hero-roadhog"/>
                </svg>
                <svg class="Icon" xmlns="http://www.w3.org/2000/svg">
                    <use xlink:href="#hero-soldier-76"/>
                </svg>
                <svg class="Icon" xmlns="http://www.w3.org/2000/svg">
                    <use xlink:href="#hero-sombra"/>
                </svg>
                <svg class="Icon" xmlns="http://www.w3.org/2000/svg">
                    <use xlink:href="#hero-symmetra"/>
                </svg>
                <svg class="Icon" xmlns="http://www.w3.org/2000/svg">
                    <use xlink:href="#hero-torbjorn"/>
                </svg>
                <svg class="Icon" xmlns="http://www.w3.org/2000/svg">
                    <use xlink:href="#hero-tracer"/>
                </svg>
                <svg class="Icon" xmlns="http://www.w3.org/2000/svg">
                    <use xlink:href="#hero-widowmaker"/>
                </svg>
                <svg class="Icon" xmlns="http://www.w3.org/2000/svg">
                    <use xlink:href="#hero-winston"/>
                </svg>
                <svg class="Icon" xmlns="http://www.w3.org/2000/svg">
                    <use xlink:href="#hero-wrecking-ball"/>
                </svg>
                <svg class="Icon" xmlns="http://www.w3.org/2000/svg">
                    <use xlink:href="#hero-zarya"/>
                </svg>
                <svg class="Icon" xmlns="http://www.w3.org/2000/svg">
                    <use xlink:href="#hero-zenyatta"/>
                </svg>
                <h6>Role Icons</h6>
                <svg class="Icon" xmlns="http://www.w3.org/2000/svg">
                    <use xlink:href="#role_defense"/>
                </svg>
                <svg class="Icon" xmlns="http://www.w3.org/2000/svg">
                    <use xlink:href="#role_offense"/>
                </svg>
                <svg class="Icon" xmlns="http://www.w3.org/2000/svg">
                    <use xlink:href="#role_support"/>
                </svg>
                <svg class="Icon" xmlns="http://www.w3.org/2000/svg">
                    <use xlink:href="#role_tank"/>
                </svg>
                <h6>Schedule Icons</h6>
                <svg class="Icon" xmlns="http://www.w3.org/2000/svg">
                    <use xlink:href="#schedule-team-logo-placeholder"/>
                </svg>
                <svg class="Icon" xmlns="http://www.w3.org/2000/svg">
                    <use xlink:href="#schedule-team-logo-placeholder-color"/>
                </svg>
                <br/>
                <h6>Map Icons</h6>
                <svg class="Icon" xmlns="http://www.w3.org/2000/svg">
                    <use xlink:href="#map-assault"/>
                </svg>
                <svg class="Icon" xmlns="http://www.w3.org/2000/svg">
                    <use xlink:href="#map-control"/>
                </svg>
                <svg class="Icon" xmlns="http://www.w3.org/2000/svg">
                    <use xlink:href="#map-escort"/>
                </svg>
                <svg class="Icon" xmlns="http://www.w3.org/2000/svg">
                    <use xlink:href="#map-hybrid"/>
                </svg>
                <h6>Modifiers</h6><code>--xl</code><br/>
                <svg class="Icon Icon--xl" xmlns="http://www.w3.org/2000/svg">
                    <use xlink:href="#hero-tracer"/>
                </svg>
                <svg class="Icon Icon--xl" xmlns="http://www.w3.org/2000/svg">
                    <use xlink:href="#hero-winston"/>
                </svg>
                <svg class="Icon Icon--xl" xmlns="http://www.w3.org/2000/svg">
                    <use xlink:href="#hero-reaper"/>
                </svg><br/><code>--lg</code><br/>
                <svg class="Icon Icon--lg" xmlns="http://www.w3.org/2000/svg">
                    <use xlink:href="#hero-tracer"/>
                </svg>
                <svg class="Icon Icon--lg" xmlns="http://www.w3.org/2000/svg">
                    <use xlink:href="#hero-winston"/>
                </svg>
                <svg class="Icon Icon--lg" xmlns="http://www.w3.org/2000/svg">
                    <use xlink:href="#hero-reaper"/>
                </svg>
                <br/>
                <code>--lightFill</code>
                <br/>
                <svg class="Icon Icon--lightFill" xmlns="http://www.w3.org/2000/svg">
                    <use xlink:href="#hero-tracer"/>
                </svg>
                <svg class="Icon Icon--lightFill" xmlns="http://www.w3.org/2000/svg">
                    <use xlink:href="#hero-winston"/>
                </svg>
                <svg class="Icon Icon--lightFill" xmlns="http://www.w3.org/2000/svg">
                    <use xlink:href="#hero-reaper"/>
                </svg>
                <br/>
                <code>--sm</code>
                <br/>
                <svg class="Icon Icon--sm" xmlns="http://www.w3.org/2000/svg">
                    <use xlink:href="#hero-tracer"/>
                </svg>
                <svg class="Icon Icon--sm" xmlns="http://www.w3.org/2000/svg">
                    <use xlink:href="#hero-winston"/>
                </svg>
                <svg class="Icon Icon--sm" xmlns="http://www.w3.org/2000/svg">
                    <use xlink:href="#hero-reaper"/>
                </svg>
                <br/>
                <code>--xs</code>
                <br/>
                <svg class="Icon Icon--xs" xmlns="http://www.w3.org/2000/svg">
                    <use xlink:href="#hero-tracer"/>
                </svg>
                <svg class="Icon Icon--xs" xmlns="http://www.w3.org/2000/svg">
                    <use xlink:href="#hero-winston"/>
                </svg>
                <svg class="Icon Icon--xs" xmlns="http://www.w3.org/2000/svg">
                    <use xlink:href="#hero-reaper"/>
                </svg>
                <br/>

Logos

Logos. File location: src/assets/toolkit/styles/materials/molecules/_logos.scss.

Example
OWL


Overwatch
Blizzard


<h6>OWL</h6>
                <svg class="Icon Logo Logo--owl-tm" xmlns="http://www.w3.org/2000/svg">
                    <use xlink:href="#logo-owl-tm"/>
                </svg><br/>
                <svg class="Icon Logo Logo--owl" xmlns="http://www.w3.org/2000/svg">
                    <use xlink:href="#logo-owl"/>
                </svg><br/>
                <svg class="Icon Logo Logo--owl-text-enus" xmlns="http://www.w3.org/2000/svg">
                    <use xlink:href="#logo-owl-text-enus"/>
                </svg>
                <h6>Overwatch</h6>
                <svg class="Icon Logo Logo--overwatch" xmlns="http://www.w3.org/2000/svg">
                    <use xlink:href="#logo-overwatch"/>
                </svg>
                <h6>Blizzard</h6>
                <svg class="Icon Logo Logo--blizz" xmlns="http://www.w3.org/2000/svg">
                    <use xlink:href="#logo-blizz"/>
                </svg><br/>
                <svg class="Icon Logo Logo--blizzard" xmlns="http://www.w3.org/2000/svg">
                    <use xlink:href="#logo-blizzard"/>
                </svg><br/>
                <svg class="Icon Logo Logo--blizzard-ent" xmlns="http://www.w3.org/2000/svg">
                    <use xlink:href="#logo-blizzard-ent"/>
                </svg>

Social Icons

A more specialized icon set, with state transitions, for social links and icons. File location: src/assets/toolkit/styles/materials/atoms/_social-icon.scss.

Example
Default Icons
Icons without a connected social media account
Share Modifier

Add a share class to open a dialogue to share this particular page (including hash)

<h6>Default Icons</h6>
                <div class="TexturedBackground--dark">
                	<a class="SocialIcon SocialIcon--facebook" href="javascript:void(0)" target="_blank">
                        <svg class="Icon SocialIcon-icon" xmlns="http://www.w3.org/2000/svg">
                            <use xlink:href="#social-facebook"/>
                        </svg>
                    </a><a class="SocialIcon SocialIcon--twitter" href="javascript:void(0)" target="_blank">
                        <svg class="Icon SocialIcon-icon" xmlns="http://www.w3.org/2000/svg">
                            <use xlink:href="#social-twitter"/>
                        </svg>
                    </a><a class="SocialIcon SocialIcon--youtube" href="javascript:void(0)" target="_blank">
                        <svg class="Icon SocialIcon-icon" xmlns="http://www.w3.org/2000/svg">
                            <use xlink:href="#social-youtube"/>
                        </svg>
                    </a>
                </div>
                <h6>Icons without a connected social media account</h6>
                <div class="TexturedBackground--dark">
                	<a class="SocialIcon SocialIcon--instagram" href="javascript:void(0)" target="_blank">
                        <svg class="Icon SocialIcon-icon" xmlns="http://www.w3.org/2000/svg">
                            <use xlink:href="#social-instagram"/>
                        </svg>
                    </a><a class="SocialIcon SocialIcon--reddit" href="javascript:void(0)" target="_blank">
                        <svg class="Icon SocialIcon-icon" xmlns="http://www.w3.org/2000/svg">
                            <use xlink:href="#social-reddit"/>
                        </svg>
                    </a><a class="SocialIcon SocialIcon--twitch" href="javascript:void(0)" target="_blank">
                        <svg class="Icon SocialIcon-icon" xmlns="http://www.w3.org/2000/svg">
                            <use xlink:href="#social-twitch"/>
                        </svg>
                    </a>
                </div>
                <h6>Share Modifier</h6>
                <p>Add a share class to open a dialogue to share this particular page (including hash)</p>
                <div class="TexturedBackground--dark">
                	<a class="SocialIcon SocialIcon--facebook SocialShare--facebook" href="javascript:void(0)" target="_blank">
                        <svg class="Icon SocialIcon-icon" xmlns="http://www.w3.org/2000/svg">
                            <use xlink:href="#social-facebook"/>
                        </svg>
                    </a><a class="SocialIcon SocialIcon--twitter SocialShare--twitter" href="javascript:void(0)" target="_blank">
                        <svg class="Icon SocialIcon-icon" xmlns="http://www.w3.org/2000/svg">
                            <use xlink:href="#social-twitter"/>
                        </svg>
                    </a>
                </div>

Images

Notes

Used to give fixed ratios to elements, typically media (image, video, etc). NOTE: Certain elements may require extra styling to display correctly. As an example, div tags require an additional height: 100% to correctly display.

Aspect Ratios Full

The .AspectRatio--full modifier adds height: 100% to .AspectRatio-subject.

Example
<div style="width: 30%;">
                	<div class="AspectRatio AspectRatio--full">
                		<div class="AspectRatio-subject" style="background-color: #333333; color: #ffffff;"></div>
                	</div>
                </div>

Aspect Ratios Landscape

The .AspectRatio--16x9

Example
<div style="width: 30%;">
                	<div class="AspectRatio AspectRatio--16x9">
                		<div class="AspectRatio-subject" style="background-color: #333333; color: #ffffff; height: 100%;"></div>
                	</div>
                </div>

Aspect Ratios Portrait

The .AspectRatio--9x16

Example
<div style="width: 30%;">
                	<div class="AspectRatio AspectRatio--9x16">
                		<div class="AspectRatio-subject" style="background-color: #333333; color: #ffffff; height: 100%;"></div>
                	</div>
                </div>

Aspect Ratios Square

A square 1:1 aspect ratio

Example
<div style="width: 30%;">
                	<div class="AspectRatio">
                		<div class="AspectRatio-subject" style="background-color: #333333; color: #ffffff; height: 100%;"></div>
                	</div>
                </div>

Structural

Notes

Contains any structural HTML

Background Crossed

Textured backgrounds can be used to provide a bit of depth to the page by helping to break up vertical space. They should, however be used sparingly, as they can get busy quickly.

This is a crossed background
This is a light crossed background
<div style="padding: 100px 0;">
                	<div class="CrossedBackground">
                		<div style="height:200px;" class="container">This is a crossed background</div>
                	</div>
                </div>
                <div style="padding: 100px 0;">
                	<div class="CrossedBackground CrossedBackground--light">
                		<div style="height:200px;" class="container">This is a light crossed background</div>
                	</div>
                </div>

Background Textured

Textured backgrounds can be used to provide a bit of depth to the page by helping to break up vertical space. They should, however be used sparingly, as they can get busy quickly.

This is a light textured background


This is a dark textured background
<div class="TexturedBackground">
                	<div style="height:400px;" class="container">This is a light textured background</div>
                </div>
                <br/>
                <br/>
                <div class="TexturedBackground TexturedBackground--dark">
                	<div style="height:400px;" class="container">This is a dark textured background</div>
                </div>

Background

Generic atom to handle any kind of Background.

Example

Default

Filler to be displayed!

Specified Background Color

Filler to be displayed!

Specified Background Image

Filler to be displayed!

Centered Background Image

Filler to be displayed!
<h3>Default</h3>
                
                <div class="Background Background--dark">
                	<div class="container">
                		<div style="width: 600px; height: 300px;">Filler to be displayed!</div>
                	</div>
                </div>
                
                <h3>Specified Background Color</h3>
                
                <div class="Background Background--dark" style="background-color: rgb(103, 103, 56);">
                	<div class="container">
                		<div style="width: 600px; height: 300px;">Filler to be displayed!</div>
                	</div>
                </div>
                
                <h3>Specified Background Image</h3>
                
                <div class="Background Background--dark" style="background-image: url(http://placehold.it/600x300/474728);">
                	<div class="container">
                		<div style="width: 600px; height: 300px;">Filler to be displayed!</div>
                	</div>
                </div>
                
                <h3>Centered Background Image</h3>
                
                <div class="Background Background--centered Background--dark" style="background-color: rgb(0, 51, 0); background-image: url(http://placehold.it/600x300/474728);">
                	<div class="container">
                		<div style="width: 600px; height: 300px;">Filler to be displayed!</div>
                	</div>
                </div>

Flex Elements

Example
I'm a flexbox item
I'm also a flexbox item
We're aligned in a row

I'm a flexbox item
We're aligned as a column

I'm a flexbox item
We're aligned in a row on desktop resolutions
And as a column on smaller sizes
<div class="FlexElement u-border" style="border-width: 2px;border-style: solid;">
                	<div class="u-padding">I'm a flexbox item</div>
                	<div class="u-padding u-background-gray--heavyTransparency">I'm also a flexbox item</div>
                	<div class="u-padding">We're aligned in a row</div>
                </div>
                <br/>
                <div class="FlexElement FlexElement--column u-border" style="border-width: 2px;border-style: solid;">
                	<div class="u-padding">I'm a flexbox item</div>
                	<div class="u-padding u-background-gray--heavyTransparency">We're aligned as a column</div>
                </div>
                <br/>
                <div class="FlexElement FlexElement--responsive u-border" style="border-width: 2px;border-style: solid;">
                	<div class="u-padding">I'm a flexbox item</div>
                	<div class="u-padding u-background-gray--heavyTransparency">We're aligned in a row on desktop resolutions</div>
                	<div class="u-padding">And as a column on smaller sizes</div>
                </div>

Margin And Padding

The styleguide provides several utility classes to position and space out elements. These are all in the form of u-padding, u-margin, u-verticalPadding, u-horizontalPadding, u-verticalMargin and u-horizontalMargin. These also have modifiers in the form of --XXX where XXX can be x-large, large, medium, small, x-small or xx-small. There is a modifier that adds the correct amount of padding to the top of an element to offset for the global page header, u-verticalNavPadding. There is also a modifier to have no horizontal padding at all, u-noHorizontalPadding.

Example
This has default padding

This has default margins

This has large horizontal padding.

This has no horizontal padding.
This has extra large vertical margins.

This has nav top padding on it.
<div class="u-verticalPadding--large">
                	<div class="u-padding u-border" style="border-width: 2px;border-style: solid;">This has default padding</div>
                	<br/>
                	<div class="u-margin u-border" style="border-width: 2px;border-style: solid;">This has default margins</div>
                	<br/>
                	<div class="u-horizontalPadding--large u-border" style="border-width: 2px;border-style: solid;">This has large horizontal padding.</div>
                	<br/>
                	<div class="u-noHorizontalPadding u-border" style="border-width: 2px; border-style: solid;">This has no horizontal padding.</div>
                	<div class="u-verticalMargin--x-large u-border" style="border-width: 2px;border-style: solid;">This has extra large vertical margins.</div>
                	<br/>
                	<div class="u-verticalNavPadding u-border" style="border-width: 2px; border-style: solid;">This has nav top padding on it.</div>
                </div>

Text Alignment

Example

Left aligned text.

Center aligned text.

Right aligned text.

Justified text.

No wrap text.

Vertical aligned text top.

Vertical aligned text bottom.

Vertical aligned text middle.

<p class="text-left">Left aligned text.</p>
                <p class="text-center">Center aligned text.</p>
                <p class="text-right">Right aligned text.</p>
                <p class="text-justify">Justified text.</p>
                <p class="text-nowrap">No wrap text.</p>
                <p class="vertical-top">Vertical aligned text top.</p>
                <p class="vertical-bottom">Vertical aligned text bottom.</p>
                <p class="vertical-middle">Vertical aligned text middle.</p>

Typography

Notes

Font styling

Font Sizes

There are utility classes from .u-ui1 to .u-ui6 to provide different font sizes for standard purposes. The site uses a modular scale system to provide natural progressions of font sizes. There is also a .small option that can be used for legal text. (This also works with the <small/> tag for editorial purposes.)

Example

This is default text. This is small default text.

This is .u-ui1. This is a small .u-ui1.
This is .u-ui2. This is a small .u-ui2.
This is .u-ui3. This is a small .u-ui3.
This is .u-ui4. This is a small .u-ui4.
This is .u-ui5. This is a small .u-ui5.
This is .u-ui6. This is a small .u-ui6.
<p>This is default text. <small>This is small default text.</small></p>
                <div class="u-ui1">This is .u-ui1. <small>This is a small .u-ui1.</small></div>
                <div class="u-ui2">This is .u-ui2. <small>This is a small .u-ui2.</small></div>
                <div class="u-ui3">This is .u-ui3. <small>This is a small .u-ui3.</small></div>
                <div class="u-ui4">This is .u-ui4. <small>This is a small .u-ui4.</small></div>
                <div class="u-ui5">This is .u-ui5. <small>This is a small .u-ui5.</small></div>
                <div class="u-ui6">This is .u-ui6. <small>This is a small .u-ui6.</small></div>

Font Transforms

There are several structural transforms that can be applied to text.

Example
This is in all caps
This is in lower case
This is capitalized
This has no text transform
This is in bold
<div class="u-uppercase">This is in all caps</div>
                <div class="u-lowercase">This is in lower case</div>
                <div class="u-capitalize">This is capitalized</div>
                <div class="u-no-text-transform u-uppercase">This has no text transform</div>
                <div class="u-bold">This is in bold</div>

Fonts

This is the body font

Example

This is the UI font.

This is the UI font. This is back to the body font.

<p class="u-secondary-font">This is the UI font.</p>
                <p class="u-secondary-font">This is the UI font. <span class="u-default-font">This is back to the body font.</span></p>

Headings

Standard h1 through h6 headings are supported. In addition, .h1-.h6 bootstrap classes are supported and SUIT compatible .u-h1 through .u-h6 as well. .small can be used inside of a header to provide de-emphasized text in cases where needed.

Example

This is an h1.

This is an h2.

This is an h3.

This is an h4.

This is an h5.
This is an h6.
  • This is u-h1.
  • This is u-h2.
  • This is u-h3.
  • This is u-h4.
  • This is u-h5.
  • This is u-h6.
This is a header. This is small text.
This is a header. This is small text.
This is a header. This is small text.
This is a header. This is small text.
This is a header. This is small text.
This is a header. This is small text.
<h1>This is an h1.</h1>
                <h2>This is an h2.</h2>
                <h3>This is an h3.</h3>
                <h4>This is an h4.</h4>
                <h5>This is an h5.</h5>
                <h6>This is an h6.</h6>
                
                <ul>
                	<li><span class="u-h1">This is u-h1.</span></li>
                	<li><span class="u-h2">This is u-h2.</span></li>
                	<li><span class="u-h3">This is u-h3.</span></li>
                	<li><span class="u-h4">This is u-h4.</span></li>
                	<li><span class="u-h5">This is u-h5.</span></li>
                	<li><span class="u-h6">This is u-h6.</span></li>
                </ul>
                
                <div class="h1">This is a header. <span class="small">This is small text.</span></div>
                <div class="h2">This is a header. <span class="small">This is small text.</span></div>
                <div class="h3">This is a header. <span class="small">This is small text.</span></div>
                <div class="h4">This is a header. <span class="small">This is small text.</span></div>
                <div class="h5">This is a header. <span class="small">This is small text.</span></div>
                <div class="h6">This is a header. <span class="small">This is small text.</span></div>

Inline Elements

Example
highlight strikethrough small text strong text italicised text underline text Abbr
<mark>highlight</mark>
                <del>strikethrough</del>
                <small>small text</small>
                <strong>strong text</strong>
                <em>italicised text</em>
                <ins>underline text</ins>
                <abbr title="Abbreviations Title">Abbr</abbr>

Labels

Label component that extends bootstrap .label class, so either can be used (preferrably the fully qualified SUITCSS style). File location: src/assets/toolkit/styles/bootstrap-overwatch/_labels.scss.

Example
Default
Label
<h6>Default</h6>
                <div class="Label">Label</div>

Sub Headings

An uppercased piece of text used to label sections on a page module

Example
default
organism subheader
left aligned
left-aligned organism subheader
right aligned
right-aligned organism subheader
responsive
Module
responsive organism subheader
<h6>default</h6>
                <div class="SubHeader">
                	organism subheader
                </div>
                
                <h6>left aligned</h6>
                <div class="SubHeader SubHeader--left">
                	left-aligned organism subheader
                </div>
                
                <h6>right aligned</h6>
                <div class="SubHeader SubHeader--right">
                	right-aligned organism subheader
                </div>
                
                <h6>responsive</h6>
                <div class="SubHeader SubHeader--responsive">
                	<div class="SubHeader-title u-bold">Module</div>
                	<div class="SubHeader-description">responsive organism subheader</div>
                </div>

Ui

Badge

A badge is an atom used to denote the status of an item

Example
New
<div class="u-background-gray u-padding">
                	<span class="Badge">
                        New
                    </span>
                </div>

Spinner

Spinner to indicate content that is loading asynchronously. File location: src/assets/toolkit/styles/materials/atoms/_spinner.scss.

Example
Loading...
<div class="Spinner">Loading...</div>