Atoms



Sub Header

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

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>

Typography

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.

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>
                
                <hr>
                
                <span class="u-h1">This is u-h1.</span>
                <span class="u-h2">This is u-h2.</span>
                <span class="u-h3">This is u-h3.</span>
                <span class="u-h4">This is u-h4.</span>
                <span class="u-h5">This is u-h5.</span>
                <span class="u-h6">This is u-h6.</span>
                
                <hr>
                
                <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>

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.)

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>

Fonts

The body font is Helvetica, which is mostly used for content (e.g. news articles). The UI font is Industry, which is used for non-content UI and interactive components (e.g. buttons, tabs, nav).

The UI font can be added by utility class: .u-secondary-font. Note: the secondary font must not be set as italic.

This is the body font.

This is the UI font.

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

<p>This is the body font.</p>
                <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>

Transforms

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

This is in all caps
This is in lower case
This is capitalized
This has no text transform/div>
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>

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.

  • Default 1
  • Default 2
  • Default 3
  • Default 4
  • Default 5

  • Unstyled 1
  • Unstyled 2
  • Unstyled 3
  • Unstyled 4
  • Unstyled 5

  • Inline 1
  • Inline 2
  • Inline 3
  • Inline 4
  • Inline 5
<ul>
                	<li>Default 1</li>
                	<li>Default 2</li>
                	<li>Default 3</li>
                	<li>Default 4</li>
                	<li>Default 5</li>
                </ul>
                <hr/>
                <ul class="UnstyledList">
                	<li>Unstyled 1</li>
                	<li>Unstyled 2</li>
                	<li>Unstyled 3</li>
                	<li>Unstyled 4</li>
                	<li>Unstyled 5</li>
                </ul>
                <hr/>
                <ul class="InlineList">
                	<li>Inline 1</li>
                	<li>Inline 2</li>
                	<li>Inline 3</li>
                	<li>Inline 4</li>
                	<li>Inline 5</li>
                </ul>

Blockquote

Regular 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.

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.
<p>Regular blockquotes:</p>
                
                <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>
                
                <p>Reversed blockquotes:</p>
                
                <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>

Definition Lists

Regular definition list:

Definition Term
Definition Description
Definition Term
Definition Description
Definition Term
Definition Description
Definition Term
Definition Description

Inline definition list:

Definition Term
Definition Description
Definition Term
Definition Description
Definition Term
Definition Description
<p>Regular definition list:</p>
                
                <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>
                
                <p>Inline definition list:</p>
                
                <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>

Flex Elements

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>

Inline Elements

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>

Paragraphs

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

Regular pull quotes:

Reversed pull quotes:

<p>Regular pull quotes:</p>
                
                <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>
                
                <p>Reversed pull quotes:</p>
                
                <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>

Structural

Textured Background

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>
                <div class="TexturedBackground TexturedBackground--dark">
                	<div style="height:400px;" class="container">This is a dark textured background</div>
                </div>

Crossed Background

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>

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.

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>

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.

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>

Aspect Ratios

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.

Default Square Aspect Ratio

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

Widescreen 16x9 Aspect Ratio

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

Portrait 9x16 Aspect Ratio

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

Full Aspect Ratio

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

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

Background

Generic atom to handle any kind of Background.

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>

Text Alignment

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>

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. The allowed colors are blue, orange, gray, black and white.

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="display--owl theme--hidden">
                	<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>
                <div class="display--owc theme--hidden">
                	<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>
                </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.

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>

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.

Standard 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>
        <button class="Button Button--iconOnly">
            <svg class="Icon" xmlns="http://www.w3.org/2000/svg">
                <use xlink:href="#icon-video"/>
            </svg>
        </button>
        <br /><br />
        
        <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>
        <br /><br />
        
        <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>
        <button class="Button Button--iconOnly is-disabled">
            <svg class="Icon" xmlns="http://www.w3.org/2000/svg">
                <use xlink:href="#icon-video"/>
            </svg>
        </button>
        
        <br /><br />
        <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>
        <br /><br />
        <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>

Dropdown

Pagination list. Extends bootstraps dropdown-menu classes. Intended to be used with the .btn-tertiary button class. File location: src/assets/toolkit/styles/bootstrap-overwatch/_dropdowns.scss.

<h6>Default</h6>
        <div class="Dropdown">
        	<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 class="Dropdown">
        	<button type="button" class="Button Button--secondary Dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                Dropdown with Right modifier
                <svg xmlns="http://www.w3.org/2000/svg" class="Icon">
                    <use xlink:href="#icon-chevron-down"/>
                </svg>
            </button>
        	<ul class="Dropdown-menu Dropdown-menu--right">
        		<li><a href="javascript:void(0)"><span class="Dropdown-menu-text js-truncate">Item 1 This should stay the width of the parent and not go out</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">Item 2</span>
                <svg class="Icon" xmlns="http://www.w3.org/2000/svg">
                    <use xlink:href="#icon-clock"/>
                </svg>
                </a></li>
        		<li><a href="javascript:void(0)"><span class="Dropdown-menu-text js-truncate">Item 3</span>
                <svg class="Icon" xmlns="http://www.w3.org/2000/svg">
                    <use xlink:href="#icon-external-url"/>
                </svg>
                </a></li>
        	</ul>
        </div>
        <br /><br />
        <div class="Dropdown">
        	<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">Fixed Width</span>
                <svg xmlns="http://www.w3.org/2000/svg" class="Icon">
                    <use xlink:href="#icon-chevron-down"/>
                </svg>
            </button>
        	<ul class="Dropdown-menu Dropdown-menu--fixedWidth">
        		<li><a href="javascript:void(0)"><span class="Dropdown-menu-text js-truncate">Item 1 This should stay the width of the parent and not go out</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">Item 2</span>
                <svg class="Icon" xmlns="http://www.w3.org/2000/svg">
                    <use xlink:href="#icon-clock"/>
                </svg>
                </a></li>
        		<li><a href="javascript:void(0)"><span class="Dropdown-menu-text js-truncate">Item 3</span>
                <svg class="Icon" xmlns="http://www.w3.org/2000/svg">
                    <use xlink:href="#icon-external-url"/>
                </svg>
                </a></li>
        	</ul>
        </div>
        <br /><br />
        <h6>Disabled</h6>
        <div class="Dropdown">
        	<button type="button" class="Button Button--secondary Dropdown-toggle Button--icon" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false" disabled>
                <span class="Button-text js-truncate">Dropdown disabled</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)">Item 1</a></li>
        		<li><a href="javascript:void(0)">Item 2</a></li>
        		<li><a href="javascript:void(0)">Item 3</a></li>
        	</ul>
        </div>
        <br /><br />
        <h6>Variant for Dark Backgrounds</h6>
        <p>Use `Button--secondary-light` on your toggle button and add `Dropdown-menu--light` to your Dropdown menu</p>
        <div class="TexturedBackground--dark" style="padding: 20px; min-height: 200px;">
        	<div class="Dropdown">
        		<button type="button" class="Button Button--secondary-light Button--icon Dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                    <span class="Button-text js-truncate">Dropdown on Light</span>
                    <svg xmlns="http://www.w3.org/2000/svg" class="Icon">
                        <use xlink:href="#icon-chevron-down"/>
                    </svg>
                </button>
        		<ul class="Dropdown-menu Dropdown-menu--light">
        			<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 class="Dropdown">
        		<button type="button" class="Button Button--secondary-light Button--icon Dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                    <span class="Button-text">Dropdown with Fixed Width modifier</span>
                    <svg xmlns="http://www.w3.org/2000/svg" class="Icon">
                        <use xlink:href="#icon-chevron-down"/>
                    </svg>
                </button>
        		<ul class="Dropdown-menu Dropdown-menu--light">
        			<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>
        	<br /><br />
        	<div class="Dropdown">
        		<button type="button" class="Button Button--secondary-light Button--icon Dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false" disabled>
                    <span class="Button-text">Dropdown Disabled on Light</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)">Item 1</a></li>
        			<li><a href="javascript:void(0)">Item 2</a></li>
        			<li><a href="javascript:void(0)">Item 3</a></li>
        		</ul>
        	</div>
        	<br /><br />
        </div>

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.

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

Rules

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

Default

Short Modifier

Light Modifier

Orange Modifier

Divider Modifier

<h6>Default</h6>
        <hr class="Rule" />
        <h6>Short Modifier</h6>
        <hr class="Rule Rule--short" />
        <h6>Light Modifier</h6>
        <hr class="Rule Rule--light" />
        <h6>Orange Modifier</h6>
        <hr class="Rule Rule--orange" />
        <h6>Divider Modifier</h6>
        <hr class="Rule Rule--divider" />

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.

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>
        <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-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/>

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.

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>

Logos

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

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>

Countdown

Countdown

A .Countdown is a good way to show the amount of time left until an event.

Default Countdown

01
23
45
<div class="Countdown">
                	<div class="Countdown-segment" data-unit="days">01</div>
                	<div class="Countdown-segment" data-unit="hrs">23</div>
                	<div class="Countdown-segment" data-unit="min">45</div>
                </div>

Dates

Default

Some locales have different ordering of days of the week and month day. While date libraries may have default formatting to reflect this, this atom will allow for explicit ordering of date information, allowing seperation for unique visual treatment (ie. If you want to bold the day of the week but not the rest of the date).

File location: src/assets/toolkit/styles/material/_dates.scss.

Wednesday December 6th
<div class="Date">
                	<span class="Date-dayOfWeek u-bold">Wednesday</span>
                	<span class="Date-monthAndDay">December 6th</span>
                </div>

Reverse

수요일 12월 6일
<div class="Date Date--reverse">
                	<span class="Date-dayOfWeek u-bold">수요일</span>
                	<span class="Date-monthAndDay">12월 6일</span>
                </div>

Forms

Form Elements

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

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.)

<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>

Text Input

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

<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>

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>

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.

<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>

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.

<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>

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.

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-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>

Images

Match Info

Match Info

.MatchInfo shows meta information about a match, such as when the match will be (or was) played.

Default Match Info

Stage 1 - Week 1
Wednesday, January 1, 2017
4 games per match
<div class="MatchInfo">
                	<div class="MatchInfo-item">Stage 1 - Week 1</div>
                	<div class="MatchInfo-item">Wednesday, January 1, 2017</div>
                	<div class="MatchInfo-item">4 games per match</div>
                </div>

Match Info Dark

Stage 1 - Week 1
Wednesday, January 1, 2017
4 games per match
<div class="MatchInfo MatchInfo--dark">
                	<div class="MatchInfo-item">Stage 1 - Week 1</div>
                	<div class="MatchInfo-item">Wednesday, January 1, 2017</div>
                	<div class="MatchInfo-item">4 games per match</div>
                </div>

Match Status

Match Status

Match statuses are indicators of upcoming, title matches, past, live, and final states. The default status shows the time of an upcoming match. --small, --titleMatch, --score, --live, --win, --loss, and --final modifiers are available for use.

File location: src/assets/toolkit/styles/materials/atoms/_match-status.scss.

Upcoming

5:00 pm
<span class="MatchStatus">
                    <span class="MatchStatus-time">5:00 pm</span>
                </span>

Title Match

7:00 pm
<span class="MatchStatus MatchStatus--titleMatch">
                    <span class="MatchStatus-time">7:00 pm</span>
                </span>

Score

MatchStatus-score text can modified to be larger by adding MatchStatus--large to it's wrapping container.

4 - 0
with large modifier
2 - 1
<span class="MatchStatus MatchStatus--transparent">
                    <span class="MatchStatus-score is-winner">4</span>
                <span class="MatchStatus-score">-</span>
                <span class="MatchStatus-score">0</span>
                </span>
                <br />
                
                <h6>with large modifier</h6>
                <span class="MatchStatus MatchStatus--transparent MatchStatus--large">
                    <span class="MatchStatus-score is-winner">2</span>
                <span class="MatchStatus-score">-</span>
                <span class="MatchStatus-score">1</span>
                </span>

Live

live
<span class="MatchStatus MatchStatus--live">
                    <span class="MatchStatus-status">live</span>
                </span>

Final

Final
<span class="MatchStatus MatchStatus--final">
                    <span class="MatchStatus-status">Final</span>
                </span>

Win

win
<span class="MatchStatus MatchStatus--win">
                    <span class="MatchStatus-status">win</span>
                </span>

Small

Small
<span class="MatchStatus MatchStatus--small">
                    <span class="MatchStatus-status">Small</span>
                </span>

Shapes

A Standalone element inside a circular (or other shape) container. Stacks inline unless otherwise specified.

File location: src/assets/toolkit/styles/materials/atoms/_shapes.scss.

  • B
  • D
  • N
  • Q
  • R
  • 2
  • 3
  • 4
  • 5
<ul class="UnstyledList">
        	<li class="Circle u-background-metro-orange u-text-white u-bold">B</li>
        	<li class="Circle u-background-metro-orange u-text-white u-bold">D</li>
        	<li class="Circle u-background-metro-yellow u-text-black u-bold">N</li>
        	<li class="Circle u-background-metro-yellow u-text-black u-bold">Q</li>
        	<li class="Circle u-background-metro-yellow u-text-black u-bold">R</li>
        	<li class="Circle u-background-metro-red u-text-white u-bold">2</li>
        	<li class="Circle u-background-metro-red u-text-white u-bold">3</li>
        	<li class="Circle u-background-metro-green u-text-white u-bold">4</li>
        	<li class="Circle u-background-metro-green u-text-white u-bold">5</li>
        </ul>

Spinner

Spinner to indicate content that is loading asynchronously.

File location: src/assets/toolkit/styles/materials/atoms/_spinner.scss.

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

Switch

Toggle switch form element.

File location: src/assets/toolkit/styles/materials/atoms/_switch.scss.

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>