Molecules



Cards

Notes

A card is a flexible and extensible content container.

Card

A card will expand to take up the container's width. This is a fully featured Card with a Playtime and Badge

Example
New

Overwatch Release Trailer

Overwatch launched on
<figure class="Card">
                	<div class="Card-imageHolder Card-imageHolder--16x9" style="background-image: url(https://d1u1mce87gyfbn.cloudfront.net/media/screenshot/tracer-screenshot-002.jpg)">
                		<div class="Card-playtime">
                			<svg class="Icon u-fill-primary" xmlns="http://www.w3.org/2000/svg">
                                <use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#icon-video-play"/>
                            </svg>
                			<time class="Time">
                                3:45
                            </time>
                		</div>
                		<span class="Card-badge Badge">
                            New
                        </span>
                	</div>
                	<figcaption class="Card-caption">
                		<h3 class="Card-title u-text-plumb-v3">Overwatch Release Trailer</h3>
                		<div class="Card-text">
                			Overwatch launched on <time datetime="2016-05-24">May 24th, 2016</time>
                		</div>
                	</figcaption>
                </figure>

Cards

.Cards on a container allows provides a layout flow for multiple cards

Example

Overwatch Release Trailer

Overwatch Release Trailer

Overwatch Release Trailer

Overwatch Release Trailer

Overwatch Release Trailer

Overwatch Release Trailer

Overwatch Release Trailer

Overwatch Release Trailer

Overwatch Release Trailer

Overwatch Release Trailer

Overwatch Release Trailer

Overwatch Release Trailer

<div class="Cards">
                	<figure class="Card">
                		<div class="Card-imageHolder Card-imageHolder--16x9" style="background-image: url(https://d1u1mce87gyfbn.cloudfront.net/media/screenshot/tracer-screenshot-002.jpg)">
                		</div>
                		<figcaption class="Card-caption">
                			<h3 class="Card-title u-text-plumb-v3">Overwatch Release Trailer</h3>
                			<div class="Card-text">
                			</div>
                		</figcaption>
                	</figure>
                	<figure class="Card">
                		<div class="Card-imageHolder Card-imageHolder--16x9" style="background-image: url(https://d1u1mce87gyfbn.cloudfront.net/media/screenshot/tracer-screenshot-002.jpg)">
                		</div>
                		<figcaption class="Card-caption">
                			<h3 class="Card-title u-text-plumb-v3">Overwatch Release Trailer</h3>
                			<div class="Card-text">
                			</div>
                		</figcaption>
                	</figure>
                	<figure class="Card">
                		<div class="Card-imageHolder Card-imageHolder--16x9" style="background-image: url(https://d1u1mce87gyfbn.cloudfront.net/media/screenshot/tracer-screenshot-002.jpg)">
                		</div>
                		<figcaption class="Card-caption">
                			<h3 class="Card-title u-text-plumb-v3">Overwatch Release Trailer</h3>
                			<div class="Card-text">
                			</div>
                		</figcaption>
                	</figure>
                	<figure class="Card">
                		<div class="Card-imageHolder Card-imageHolder--16x9" style="background-image: url(https://d1u1mce87gyfbn.cloudfront.net/media/screenshot/tracer-screenshot-002.jpg)">
                		</div>
                		<figcaption class="Card-caption">
                			<h3 class="Card-title u-text-plumb-v3">Overwatch Release Trailer</h3>
                			<div class="Card-text">
                			</div>
                		</figcaption>
                	</figure>
                	<figure class="Card">
                		<div class="Card-imageHolder Card-imageHolder--16x9" style="background-image: url(https://d1u1mce87gyfbn.cloudfront.net/media/screenshot/tracer-screenshot-002.jpg)">
                		</div>
                		<figcaption class="Card-caption">
                			<h3 class="Card-title u-text-plumb-v3">Overwatch Release Trailer</h3>
                			<div class="Card-text">
                			</div>
                		</figcaption>
                	</figure>
                	<figure class="Card">
                		<div class="Card-imageHolder Card-imageHolder--16x9" style="background-image: url(https://d1u1mce87gyfbn.cloudfront.net/media/screenshot/tracer-screenshot-002.jpg)">
                		</div>
                		<figcaption class="Card-caption">
                			<h3 class="Card-title u-text-plumb-v3">Overwatch Release Trailer</h3>
                			<div class="Card-text">
                			</div>
                		</figcaption>
                	</figure>
                	<figure class="Card">
                		<div class="Card-imageHolder Card-imageHolder--16x9" style="background-image: url(https://d1u1mce87gyfbn.cloudfront.net/media/screenshot/tracer-screenshot-002.jpg)">
                		</div>
                		<figcaption class="Card-caption">
                			<h3 class="Card-title u-text-plumb-v3">Overwatch Release Trailer</h3>
                			<div class="Card-text">
                			</div>
                		</figcaption>
                	</figure>
                	<figure class="Card">
                		<div class="Card-imageHolder Card-imageHolder--16x9" style="background-image: url(https://d1u1mce87gyfbn.cloudfront.net/media/screenshot/tracer-screenshot-002.jpg)">
                		</div>
                		<figcaption class="Card-caption">
                			<h3 class="Card-title u-text-plumb-v3">Overwatch Release Trailer</h3>
                			<div class="Card-text">
                			</div>
                		</figcaption>
                	</figure>
                	<figure class="Card">
                		<div class="Card-imageHolder Card-imageHolder--16x9" style="background-image: url(https://d1u1mce87gyfbn.cloudfront.net/media/screenshot/tracer-screenshot-002.jpg)">
                		</div>
                		<figcaption class="Card-caption">
                			<h3 class="Card-title u-text-plumb-v3">Overwatch Release Trailer</h3>
                			<div class="Card-text">
                			</div>
                		</figcaption>
                	</figure>
                	<figure class="Card">
                		<div class="Card-imageHolder Card-imageHolder--16x9" style="background-image: url(https://d1u1mce87gyfbn.cloudfront.net/media/screenshot/tracer-screenshot-002.jpg)">
                		</div>
                		<figcaption class="Card-caption">
                			<h3 class="Card-title u-text-plumb-v3">Overwatch Release Trailer</h3>
                			<div class="Card-text">
                			</div>
                		</figcaption>
                	</figure>
                	<figure class="Card">
                		<div class="Card-imageHolder Card-imageHolder--16x9" style="background-image: url(https://d1u1mce87gyfbn.cloudfront.net/media/screenshot/tracer-screenshot-002.jpg)">
                		</div>
                		<figcaption class="Card-caption">
                			<h3 class="Card-title u-text-plumb-v3">Overwatch Release Trailer</h3>
                			<div class="Card-text">
                			</div>
                		</figcaption>
                	</figure>
                	<figure class="Card">
                		<div class="Card-imageHolder Card-imageHolder--16x9" style="background-image: url(https://d1u1mce87gyfbn.cloudfront.net/media/screenshot/tracer-screenshot-002.jpg)">
                		</div>
                		<figcaption class="Card-caption">
                			<h3 class="Card-title u-text-plumb-v3">Overwatch Release Trailer</h3>
                			<div class="Card-text">
                			</div>
                		</figcaption>
                	</figure>
                </div>

Nav

Notes

Nav

Nav

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

About

About is a callout section used to prominently display important information. File location: src/assets/toolkit/styles/partials/molecules/_about.scss.

Welcome to Overwatch

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris ligula nisl, vehicula eget purus a, laoreet feugiat leo. Praesent nibh arcu, ultrices eu fringilla pulvinar, feugiat in lectus. Aenean vel posuere nunc, non tristique lacus. Proin eu vestibulum elit, nec convallis ante. Donec malesuada leo dolor, id egestas lectus scelerisque euismod.

Praesent nibh

Mauris ligula*
*Proin eu vestibulum elit, nec convallis ante
<section class="AboutSection CrossedBackground CrossedBackground--light CrossedBackground--mapTexture">
        	<div class="container FlexElement FlexElement--responsive">
        		<div class="AboutSection--left">
        			<h2 class="AboutSection-title">Welcome to Overwatch</h2>
        			<div class="AboutSection-content">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris ligula nisl, vehicula eget purus a, laoreet feugiat leo. Praesent nibh arcu, ultrices eu fringilla pulvinar, feugiat in lectus. Aenean vel posuere nunc, non tristique lacus. Proin eu vestibulum
        				elit, nec convallis ante. Donec malesuada leo dolor, id egestas lectus scelerisque euismod.</div>
        		</div>
        		<div class="AboutSection--right">
        			<h3 class="AboutSection-title--secondary">Praesent nibh</h3>
        			<div class="AboutSection-content--callout">Mauris ligula*</div>
        			<small>*Proin eu vestibulum elit, nec convallis ante</small>
        		</div>
        	</div>
        </section>

Autocomplete

Autocomplete component. File location: src/assets/toolkit/styles/partials/molecules/_autocomplete.scss.

<div class="Autocomplete is-active">
        	<ul class="Autocomplete-list">
        		<li class="Autocomplete-item Autocomplete-item--category">Category</li>
        		<li class="Autocomplete-item">
        			<a href="javascript:void(0)" class="Autocomplete-link"> <span class="Autocomplete-title">Result Title</span>
                        <span class="Autocomplete-desc">Lorem ipsum dolor sit amet, consectetur adipiscing elit...</span> </a>
        		</li>
        		<li class="Autocomplete-item">
        			<a href="javascript:void(0)" class="Autocomplete-link"> <span class="Autocomplete-title">Result Title</span>
                        <span class="Autocomplete-desc">Lorem ipsum dolor sit amet, consectetur adipiscing elit...</span> </a>
        		</li>
        		<li class="Autocomplete-item">
        			<a href="javascript:void(0)" class="Autocomplete-link"> <span class="Autocomplete-title">Result Title</span>
                        <span class="Autocomplete-desc">Lorem ipsum dolor sit amet, consectetur adipiscing elit...</span> </a>
        		</li>
        		<li class="Autocomplete-item">
        			<a href="javascript:void(0)" class="Autocomplete-link"> <span class="Autocomplete-title">Result Title</span>
                        <span class="Autocomplete-desc">Lorem ipsum dolor sit amet, consectetur adipiscing elit...</span> </a>
        		</li>
        		<li class="Autocomplete-item">
        			<a href="javascript:void(0)" class="Autocomplete-link"> <span class="Autocomplete-title">Result Title</span>
                        <span class="Autocomplete-desc">Lorem ipsum dolor sit amet, consectetur adipiscing elit...</span> </a>
        		</li>
        	</ul>
        </div>

Byline

A byline is used whenever you want to provide some attribution metadata to some other piece of content.

If there is a need to keep Byline elements within the same row, wrap the elements with a Byline-metadata class.

Example
<section>
        	<div class="Byline">
        		<span class="Byline-label Label">Label goes here</span>
        	</div>
        </section>
        <section>
        	<div class="Byline">
        		<span class="Byline-label Label">Label goes here</span>
        		<time datetime="1970-01-01T00:01" class="Byline-published">
                    <svg class="Icon Icon--lightFill Icon--xs" xmlns="http://www.w3.org/2000/svg">
                        <use xlink:href="#icon-clock"/>
                    </svg>
                    4 hours ago
                </time>
        	</div>
        </section>
        <section>
        	<div class="Byline">
        		<span class="Byline-metadata">
                    <time datetime="1970-01-01T00:01" class="Byline-published">
                        <svg class="Icon Icon--lightFill Icon--xs" xmlns="http://www.w3.org/2000/svg">
                            <use xlink:href="#icon-clock"/>
                        </svg>
                        4 hours ago
                    </time>
                    <address class="Byline-author">By Blizzard Entertainment</address>
                </span>
        	</div>
        </section>
        <section>
        	<div class="Byline">
        		<span class="Byline-label Label">Label goes here</span>
        		<span class="Byline-metadata">
                    <time datetime="1970-01-01T00:01" class="Byline-published">
                        <svg class="Icon Icon--lightFill Icon--xs" xmlns="http://www.w3.org/2000/svg">
                            <use xlink:href="#icon-clock"/>
                        </svg>
                        4 hours ago
                    </time>
                    <address class="Byline-author">By Blizzard Entertainment</address>
                </span>
        	</div>
        </section>

Content Area

An area that is populated by wysiwyg content. Just a container with element styles, similar to Article.

File location: src/assets/toolkit/styles/partials/molecules/_content-area.scss.

Example

Cheesecake cheese on toast chalk and cheese. Smelly cheese jarlsberg fondue pepper jack bocconcini lancashire paneer stilton. Swiss cheese and wine paneer jarlsberg fondue fromage frais dolcelatte feta. Squirty cheese cheesy grin chalk and cheese hard cheese cheese and wine monterey jack bavarian bergkase mascarpone. Bavarian bergkase the big cheese the big cheese who moved my cheese lancashire cheese strings paneer cream cheese. The big cheese cheese and wine fromage frais rubber cheese cheesy grin paneer mozzarella.


  • Rubber cheese caerphilly blue castello.
  • Mascarpone cheese strings taleggio jarlsberg port-salut jarlsberg jarlsberg stinking bishop.
  • Monterey jack rubber cheese jarlsberg croque monsieur cow.
  • Swiss port-salut bavarian bergkase st. agur blue cheese fromage frais chalk and cheese taleggio rubber cheese.
Rubber cheese caerphilly blue castello.

Cheesecake cheese on toast chalk and cheese. Smelly cheese jarlsberg fondue pepper jack bocconcini lancashire paneer stilton. Swiss cheese and wine paneer jarlsberg fondue fromage frais dolcelatte feta. Squirty cheese cheesy grin chalk and cheese hard cheese cheese and wine monterey jack bavarian bergkase mascarpone. Bavarian bergkase the big cheese the big cheese who moved my cheese lancashire cheese strings paneer cream cheese. The big cheese cheese and wine fromage frais rubber cheese cheesy grin paneer mozzarella.

<div class="ContentArea">
        	<p>Cheesecake cheese on toast chalk and cheese. <a href="javascript:void(0)">Smelly cheese</a> jarlsberg fondue pepper jack bocconcini lancashire paneer stilton. <em>Swiss cheese and wine paneer jarlsberg</em> fondue fromage frais dolcelatte feta. Squirty
        		cheese cheesy grin chalk and cheese hard cheese cheese and wine monterey jack
        		<a href="javascript:void(0)">bavarian bergkase mascarpone</a>. Bavarian bergkase the big cheese the <strong>big cheese</strong> who moved my cheese lancashire cheese strings paneer cream cheese. The big cheese cheese and wine fromage frais rubber cheese
        		cheesy grin paneer mozzarella.
        	</p>
        	<hr>
        	<ul>
        		<li>Rubber cheese caerphilly blue castello.</li>
        		<li>Mascarpone cheese strings taleggio jarlsberg port-salut jarlsberg jarlsberg stinking bishop.</li>
        		<li>Monterey jack rubber cheese jarlsberg croque monsieur cow.</li>
        		<li>Swiss port-salut bavarian bergkase st. agur blue cheese fromage frais chalk and cheese taleggio rubber cheese.
        		</li>
        	</ul>
        	<figure>
        		<img src="//placehold.it/400x300" alt="">
        		<figcaption>Rubber cheese caerphilly blue castello.</figcaption>
        	</figure>
        	<p>Cheesecake cheese on toast chalk and cheese. <a href="javascript:void(0)">Smelly cheese</a> jarlsberg fondue pepper jack bocconcini lancashire paneer stilton. <em>Swiss cheese and wine paneer jarlsberg</em> fondue fromage frais dolcelatte feta. Squirty
        		cheese cheesy grin chalk and cheese hard cheese cheese and wine monterey jack
        		<a href="javascript:void(0)">bavarian bergkase mascarpone</a>. Bavarian bergkase the big cheese the <strong>big cheese</strong> who moved my cheese lancashire cheese strings paneer cream cheese. The big cheese cheese and wine fromage frais rubber cheese
        		cheesy grin paneer mozzarella.
        	</p>
        </div>

Content Box

Content Box

Generic content box that give pads content and makes it stand out.

File location: src/assets/toolkit/styles/partials/molecules/_content-box.scss.

Example

Default

Example
Sample Text Content
12-6
<div class="ContentBox">Sample Text Content</div>
                <div class="ContentBox">
                	<div class="TeamLabel TeamLabel--small">
                		<div class="TeamLabel-block">
                			<svg xmlns="http://www.w3.org/2000/svg" class="TeamLabel-logo">
                                <use xlink:href="#icon-team-fallback"/>
                            </svg>
                		</div>
                		<div class="TeamLabel-info">
                			<div class="TeamLabel-name hidden-sm hidden-xs">TEAM1</div>
                			<div class="TeamLabel-name hidden-md hidden-lg">TEAM2</div>
                			<div class="TeamLabel-stat">12-6</div>
                		</div>
                	</div>
                </div>

Alternate Shadow Modifier

Example
Sample Text Content
<div class="ContentBox ContentBox--alt-shadow">Sample Text Content</div>

Slim Modifier

Example
<div class="ContentBox ContentBox--slim">
                	<div class="TeamLabel TeamLabel--small">
                		<div class="TeamLabel-block">
                			<svg xmlns="http://www.w3.org/2000/svg" class="TeamLabel-logo">
                                <use xlink:href="#icon-team-fallback"/>
                            </svg>
                		</div>
                		<div class="TeamLabel-info TeamLabel-info--noScore">
                			<div class="TeamLabel-name hidden-sm hidden-xs">Team Name</div>
                			<div class="TeamLabel-name hidden-md hidden-lg">TEAM1</div>
                		</div>
                	</div>
                </div>

No Shadow Modifier

Example
<div class="ContentBox ContentBox--no-shadow">
                	<div class="TeamLabel TeamLabel--small">
                		<div class="TeamLabel-block">
                			<svg xmlns="http://www.w3.org/2000/svg" class="TeamLabel-logo">
                                <use xlink:href="#icon-team-fallback"/>
                            </svg>
                		</div>
                		<div class="TeamLabel-info TeamLabel-info--noScore">
                			<div class="TeamLabel-name hidden-sm hidden-xs">Team Name</div>
                			<div class="TeamLabel-name hidden-md hidden-lg">TEAM1</div>
                		</div>
                	</div>
                </div>

Expandable Content Box

Example

Stage Playoffs

Stage Playoffs are two-match playoffs between the three teams with the most wins during each Stage. During the Stage Playoffs, the 3rd place finisher from the relevant Stage faces the 2nd place finisher. the winner of this match goes on to play the 1st place finisher in the Stage Finals. The winner of the Stage Finals earns a $100,000 performance bonus. The runner-up eanrs $25,000.

<div class="ContentBox ContentBox--expandable">
                	<div class="ContentBox-header ContentBox-header--withUnderlineAnimation">
                		<a href="javascript:void(0)" class="ContentBox-headerLink">
                            <svg xmlns="http://www.w3.org/2000/svg" class="Icon">
                                <use xlink:href="#icon-chevron-right"/>
                            </svg>
                            <span class="ContentBox-headerText">Playoff Format</span>
                        </a>
                	</div>
                	<div class="ContentBox-body">
                		<p class="u-bold">Stage Playoffs</p>
                		<p>
                			Stage Playoffs are two-match playoffs between the three teams with the most wins during each Stage. During the Stage Playoffs, the 3rd place finisher from the relevant Stage faces the 2nd place finisher. the winner of this match goes on to play the 1st
                			place finisher in the Stage Finals. The winner of the Stage Finals earns a $100,000 performance bonus. The runner-up eanrs $25,000.
                		</p>
                	</div>
                </div>

Active Expandable Content Box

Example

Stage Playoffs

Stage Playoffs are two-match playoffs between the three teams with the most wins during each Stage. During the Stage Playoffs, the 3rd place finisher from the relevant Stage faces the 2nd place finisher. the winner of this match goes on to play the 1st place finisher in the Stage Finals. The winner of the Stage Finals earns a $100,000 performance bonus. The runner-up eanrs $25,000.

<div class="ContentBox ContentBox--expandable is-active">
                	<div class="ContentBox-header ContentBox-header--withUnderlineAnimation">
                		<a href="javascript:void(0)" class="ContentBox-headerLink">
                            <svg xmlns="http://www.w3.org/2000/svg" class="Icon">
                                <use xlink:href="#icon-chevron-right"/>
                            </svg>
                            <span class="ContentBox-headerText">Playoff Format</span>
                        </a>
                	</div>
                	<div class="ContentBox-body">
                		<p class="u-bold">Stage Playoffs</p>
                		<p>
                			Stage Playoffs are two-match playoffs between the three teams with the most wins during each Stage. During the Stage Playoffs, the 3rd place finisher from the relevant Stage faces the 2nd place finisher. the winner of this match goes on to play the 1st
                			place finisher in the Stage Finals. The winner of the Stage Finals earns a $100,000 performance bonus. The runner-up eanrs $25,000.
                		</p>
                	</div>
                </div>

Countdown

Countdown

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

Example

Default Countdown

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

Email Sign Up

//

Example

Sign up to receive news, updates and promotions from the Overwatch League and your favorite teams selected below.

<div class="TexturedBackground TexturedBackground--dark" style="padding: 50px;">
        	<div class="EmailSignUp">
        		<form class="EmailSignUp-form" onsubmit="return false;">
        			<p>Sign up to receive news, updates and promotions from the Overwatch League and your favorite teams selected below.</p>
        			<div class="FormGroup">
        				<label for="email-signup-email" class="FormLabel sr-only">Email Address</label>
        				<input type="email" class="FormInput" id="email-signup-email" placeholder="Email Address">
        			</div>
        			<div class="FormGroup">
        				<label class="FormLabel sr-only">Select team(s)</label>
        				<div class="Dropdown Dropdown--form">
        					<button type="button" class="Button Button--secondary Button--secondary-light Dropdown-toggle Button--icon" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                                <span class="Button-text js-truncate">Select team(s)</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">Team #1</span>
                                </a></li>
        						<li><a href="javascript:void(0);" class="is-selected">
                                    <span class="Dropdown-menu-text js-truncate">Team #2</span>
                                </a></li>
        						<li><a href="javascript:void(0);">
                                    <span class="Dropdown-menu-text js-truncate">Team #3</span>
                                </a></li>
        					</ul>
        				</div>
        			</div>
        			<div class="FormGroup">
        				<label class="FormLabel FormLabel--checkbox">
                            <input type="checkbox" class="FormInput">
                            <span class="FormLabel-text">By checking the box I accept the Overwatch League <a href="javascript:void(0)" target="_blank">Terms of Use</a> and <a href="javascript:void(0)" target="_blank">Privacy Policy</a>.</span>
                        </label>
        			</div>
        			<button class="Button Button--primary" type="submit" onclick="return false;">Sign Up</button>
        		</form>
        	</div>
        </div>

Error Content

Error content is a generic catch-all for default error content layouts.

File locations: src/assets/toolkit/styles/partials/organisms/_error-page.scss

Example

Uh-oh!

Someone got into the servers. Winston’s on it!

<h3 class="ErrorContent-title">Uh-oh!</h3>
        <p class="ErrorContent-desc">Someone got into the servers. Winston’s on it!</p>

Game Info

Displays a game map with a game info overlay

Example
GAME 1
HANAMURA
Away Team
Home Team
<div class="GameInfo">
        	<div class="GameInfo-thumbnail" style="background-image: url(/assets/toolkit/images/map-hanamura.jpg)">
        	</div>
        	<div class="GameInfo-details">
        		<div class="GameInfo-details-game">GAME 1</div>
        		<div class="GameInfo-details-map">
        			<div class="GameInfo-map-name">HANAMURA</div>
        		</div>
        	</div>
        	<div class="GameInfo-awayTeam">Away Team</div>
        	<div class="GameInfo-homeTeam">Home Team</div>
        </div>

Game Maps

Game Maps component primarily created for the Live Slieam organism

File location: src/assets/toolkit/styles/partials/molecules/_game-maps.scss.

Example
  • Game 1
    Hanamura
  • Game 2
    Horizon Lunar Colony
  • Game 3
    Ilios
  • Game 4
    Junkertown
<div style="width: 400px">
        	<ul class="GameMaps">
        		<li class="GameMaps-item is-complete">
        			<div class="GameMaps-game">Game 1</div>
        			<div class="GameMaps-map">Hanamura</div>
        		</li>
        		<li class="GameMaps-item is-complete">
        			<div class="GameMaps-game">Game 2</div>
        			<div class="GameMaps-map">Horizon Lunar Colony</div>
        		</li>
        		<li class="GameMaps-item is-current">
        			<div class="GameMaps-game">Game 3</div>
        			<div class="GameMaps-map">Ilios</div>
        		</li>
        		<li class="GameMaps-item">
        			<div class="GameMaps-game">Game 4</div>
        			<div class="GameMaps-map">Junkertown</div>
        		</li>
        	</ul>
        </div>

Game Scores

Game Scores component primarily created for the Live Stream organism

File location: src/assets/toolkit/styles/partials/molecules/_game-scores.scss.

Example
3 1 2 1
2 2 2 1
<div style="width: 400px">
        	<table class="GameScores">
        		<thead>
        			<tr>
        				<th></th>
        				<th>
        					<svg xmlns="http://www.w3.org/2000/svg" class="Icon Icon--whiteFill">
                                <use xlink:href="#icon-team-fallback"/>
                            </svg>
        				</th>
        				<th>
        					<svg xmlns="http://www.w3.org/2000/svg" class="Icon Icon--whiteFill">
                                <use xlink:href="#icon-team-fallback"/>
                            </svg>
        				</th>
        				<th>
        					<svg xmlns="http://www.w3.org/2000/svg" class="Icon Icon--whiteFill">
                                <use xlink:href="#icon-team-fallback"/>
                            </svg>
        				</th>
        				<th>
        					<svg xmlns="http://www.w3.org/2000/svg" class="Icon Icon--whiteFill">
                                <use xlink:href="#icon-team-fallback"/>
                            </svg>
        				</th>
        				<th class="GameScores-spacer"></th>
        				<th></th>
        			</tr>
        		</thead>
        		<tbody>
        			<tr>
        				<td>
        					<svg xmlns="http://www.w3.org/2000/svg" class="Icon Icon--whiteFill">
                                <use xlink:href="#icon-team-fallback"/>
                            </svg>
        				</td>
        				<td class="GameScores-winner">3</td>
        				<td>1</td>
        				<td>2</td>
        				<td>&ndash;</td>
        				<td class="GameScores-spacer"></td>
        				<td class="GameScores-match-score">1</td>
        			</tr>
        			<tr>
        				<td>
        					<svg xmlns="http://www.w3.org/2000/svg" class="Icon Icon--whiteFill">
                                <use xlink:href="#icon-team-fallback"/>
                            </svg>
        				</td>
        				<td>2</td>
        				<td class="GameScores-winner">2</td>
        				<td>2</td>
        				<td>&ndash;</td>
        				<td class="GameScores-spacer"></td>
        				<td class="GameScores-match-score">1</td>
        			</tr>
        		</tbody>
        	</table>
        </div>

Icon Label

An icon label is an icon that is laid out with some text or another atom.

Example
Default
Team Name
Light Modifier
Support
Space Between Modifier
<div class="col col-sm-4">
        	<h6>Default</h6>
        	<div class="IconLabel">
        		<svg xmlns="http://www.w3.org/2000/svg" class="Icon u-rightMargin--xx-small m-sm u-transparent--medium">
                    <use xlink:href="#icon-team-fallback"/>
                </svg>
        		<b>Team Name</b>
        	</div>
        </div>
        
        <div class="col col-sm-4">
        	<h6>Light Modifier</h6>
        	<div class="IconLabel IconLabel--light">
        		<svg class="Icon Icon--lightFill m-sm u-rightMargin--xx-small">
                    <use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#role_support"></use>
                </svg> Support
        	</div>
        </div>
        
        <div class="col col-sm-4">
        	<h6>Space Between Modifier</h6>
        	<div class="IconLabel IconLabel--spaceBetween">
        		<span title="Sombra">
                    <span class="hidden">Sombra</span>
        		<svg class="HeroIcon u-heroGradientColor-sombra HeroIcon--small">
                        <use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#hero-sombra"></use>
                    </svg>
        		</span>
        		<span title="McCree">
                    <span class="hidden">McCree</span>
        		<svg class="HeroIcon u-heroGradientColor-mccree HeroIcon--small">
                        <use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#hero-mccree"></use>
                    </svg>
        		</span>
        		<span title="Hanzo">
                    <span class="hidden">Hanzo</span>
        		<svg class="HeroIcon u-heroGradientColor-hanzo HeroIcon--small">
                        <use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#hero-hanzo"></use>
                    </svg>
        		</span>
        	</div>
        </div>

Legend

Displays a legendary legend

Example
Stats are average per 10 minutes
ELIM Eliminations DEATHS Hero deaths DAMAGE Hero damage done HEALING Healing done
<div class="Legend">
        	<div class="row">
        		<div class="col-sm-8 u-verticalMargin--xx-small">
        			<span>Stats are average per 10 minutes</span>
        		</div>
        		<div class="col-sm-4 u-verticalMargin--xx-small">
        			<a href="javascript:void(0)" class="Legend-cta">
                        View Legend
                    </a>
        		</div>
        	</div>
        	<div class="row u-verticalMargin--x-small Legend-content is-active">
        		<div class="col-sm-2 Legend-col">
        			<span class="u-text-orange u-uppercase u-bold u-bottomPadding--xxx-small">ELIM</span>
        			<span>Eliminations</span>
        			<span class="u-text-orange u-uppercase u-bold u-bottomPadding--xxx-small">DEATHS</span>
        			<span>Hero deaths</span>
        			<span class="u-text-orange u-uppercase u-bold u-bottomPadding--xxx-small">DAMAGE</span>
        			<span>Hero damage done</span>
        			<span class="u-text-orange u-uppercase u-bold u-bottomPadding--xxx-small">HEALING</span>
        			<span>Healing done</span>
        		</div>
        	</div>
        </div>

Match Result

Example
vs

03/22/2018

Seoul Dynasty

win
<div style="max-width: 340px">
        	<div class="MatchResult">
        		<span class="MatchResult-item">
                <span class="MatchResult-vs">vs</span>
        		</span>
        
        		<span class="MatchResult-item">
                <span class="MatchResult-teamIcon" style="background-color: black">
                    <img class="Icon Icon--lg" src="https://bnetcmsus-a.akamaihd.net/cms/page_media/E9MU0AK0JIXT1507858876249.svg">
                </span>
        		</span>
        
        		<span class="MatchResult-item MatchResult-item--expanded">
                <h3 class="MatchResult-infoDate">03/22/2018</h3>
                <h2 class="MatchResult-infoTeam">Seoul Dynasty</h2>
            </span>
        
        		<span class="MatchResult-item">
                <span class="MatchStatus MatchStatus--small MatchStatus--win">
                    <span class="MatchStatus-status">win</span>
        		</span>
        		</span>
        	</div>
        </div>

Media Object

Default

The media object is a generic catch-all for an item that has some kind of media (image, video, etc) and some text associated with it.

Example
Placeholder Image

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

<div class="MediaObject">
                	<div class="MediaObject-item">
                		<img src="http://placehold.it/300x168" alt="Placeholder Image">
                	</div>
                	<div class="MediaObject-content">
                		<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor
                			in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
                		</p>
                	</div>
                </div>

Mobile Stacked Media Object

The media object can stack if needed on smaller screens.

Example
Placeholder Image

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

<div class="MediaObject MediaObject--stack-sm">
                	<div class="MediaObject-item">
                		<img src="http://placehold.it/300x168" alt="Placeholder Image">
                	</div>
                	<div class="MediaObject-content">
                		<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor
                			in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
                		</p>
                	</div>
                </div>

Flipped Media Object

Example
Placeholder Image

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

<div class="MediaObject MediaObject--flipped">
                	<div class="MediaObject-item">
                		<img src="http://placehold.it/100x150" alt="Placeholder Image">
                	</div>
                	<div class="MediaObject-content">
                		<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor
                			in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
                	</div>
                </div>

Mobile Stacked Flipped Media Object

The media object can stack if needed on smaller screens.

Example
Placeholder Image

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

<div class="MediaObject MediaObject--flipped MediaObject--stack-sm">
                	<div class="MediaObject-item">
                		<img src="http://placehold.it/300x168" alt="Placeholder Image">
                	</div>
                	<div class="MediaObject-content">
                		<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor
                			in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
                		</p>
                	</div>
                </div>

Mobile Stacked Flipped Vertical Media Object

When stacked, the top and bottom order can be flipped, the same as the left and right order.

Example
Placeholder Image

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

<div class="MediaObject MediaObject--flipped-vertical MediaObject--stack-sm">
                	<div class="MediaObject-item">
                		<img src="http://placehold.it/300x168" alt="Placeholder Image">
                	</div>
                	<div class="MediaObject-content">
                		<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor
                			in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
                		</p>
                	</div>
                </div>

Start Aligned Media Object

Example
Placeholder Image

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

<div class="MediaObject MediaObject--start-aligned">
                	<div class="MediaObject-item">
                		<img src="http://placehold.it/450x400" alt="Placeholder Image">
                	</div>
                	<div class="MediaObject-content">
                		<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor
                			in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
                	</div>
                </div>

Start Aligned Flipped Media Object

Example
Placeholder Image

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

<div class="MediaObject MediaObject--flipped MediaObject--start-aligned">
                	<div class="MediaObject-item">
                		<img src="http://placehold.it/300x500" alt="Placeholder Image">
                	</div>
                	<div class="MediaObject-content">
                		<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor
                			in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
                	</div>
                </div>

End Aligned Media Object

Example
Placeholder Image

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

<div class="MediaObject MediaObject--end-aligned">
                	<div class="MediaObject-item">
                		<img src="http://placehold.it/160x90" alt="Placeholder Image">
                	</div>
                	<div class="MediaObject-content">
                		<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor
                			in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
                	</div>
                </div>

End Aligned Flipped Media Object

Example
Placeholder Image

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

<div class="MediaObject MediaObject--flipped MediaObject--end-aligned">
                	<div class="MediaObject-item">
                		<img src="http://placehold.it/300x168" alt="Placeholder Image">
                	</div>
                	<div class="MediaObject-content">
                		<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor
                			in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
                	</div>
                </div>

X X Small Horizontal Spacing Media Object

Example
Placeholder Image

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

<div class="MediaObject MediaObject--xx-small">
                	<div class="MediaObject-item">
                		<img src="http://placehold.it/150x150" alt="Placeholder Image">
                	</div>
                	<div class="MediaObject-content">
                		<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor
                			in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
                	</div>
                </div>

X Small Horizontal Spacing Media Object

Example
Placeholder Image

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

<div class="MediaObject MediaObject--x-small">
                	<div class="MediaObject-item">
                		<img src="http://placehold.it/150x150" alt="Placeholder Image">
                	</div>
                	<div class="MediaObject-content">
                		<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor
                			in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
                	</div>
                </div>

Small Horizontal Spacing Media Object

Example
Placeholder Image

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

<div class="MediaObject MediaObject--small">
                	<div class="MediaObject-item">
                		<img src="http://placehold.it/150x150" alt="Placeholder Image">
                	</div>
                	<div class="MediaObject-content">
                		<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor
                			in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
                	</div>
                </div>

Medium Horizontal Spacing Media Object

Example
Placeholder Image

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

<div class="MediaObject MediaObject--medium">
                	<div class="MediaObject-item">
                		<img src="http://placehold.it/150x150" alt="Placeholder Image">
                	</div>
                	<div class="MediaObject-content">
                		<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor
                			in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
                	</div>
                </div>

Media Object List

Media Object List

Media Object List is a good way to list out media objects in a responsive way.

Example

Default

Example
  • Placeholder Image

    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

  • Placeholder Image

    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

  • Placeholder Image

    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

<ul class="MediaObjectList">
                	<li class="MediaObjectList-item">
                		<div class="MediaObject">
                			<div class="MediaObject-item">
                				<img src="http://placehold.it/300x168" alt="Placeholder Image">
                			</div>
                			<div class="MediaObject-content">
                				<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure
                					dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
                				</p>
                			</div>
                		</div>
                	</li>
                	<li class="MediaObjectList-item">
                		<div class="MediaObject">
                			<div class="MediaObject-item">
                				<img src="http://placehold.it/300x168" alt="Placeholder Image">
                			</div>
                			<div class="MediaObject-content">
                				<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure
                					dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
                				</p>
                			</div>
                		</div>
                	</li>
                	<li class="MediaObjectList-item">
                		<div class="MediaObject">
                			<div class="MediaObject-item">
                				<img src="http://placehold.it/300x168" alt="Placeholder Image">
                			</div>
                			<div class="MediaObject-content">
                				<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure
                					dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
                				</p>
                			</div>
                		</div>
                	</li>
                </ul>

Add Last Border

If you want a border on the last item, .MediaObjectList--add-last-border will add it.

Example
  1. Placeholder Image

    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

  2. Placeholder Image

    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

  3. Placeholder Image

    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

<ol class="MediaObjectList MediaObjectList--add-last-border">
                	<li class="MediaObjectList-item">
                		<div class="MediaObject">
                			<div class="MediaObject-item">
                				<img src="http://placehold.it/300x168" alt="Placeholder Image">
                			</div>
                			<div class="MediaObject-content">
                				<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure
                					dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
                				</p>
                			</div>
                		</div>
                	</li>
                	<li class="MediaObjectList-item">
                		<div class="MediaObject">
                			<div class="MediaObject-item">
                				<img src="http://placehold.it/300x168" alt="Placeholder Image">
                			</div>
                			<div class="MediaObject-content">
                				<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure
                					dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
                				</p>
                			</div>
                		</div>
                	</li>
                	<li class="MediaObjectList-item">
                		<div class="MediaObject">
                			<div class="MediaObject-item">
                				<img src="http://placehold.it/300x168" alt="Placeholder Image">
                			</div>
                			<div class="MediaObject-content">
                				<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure
                					dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
                				</p>
                			</div>
                		</div>
                	</li>
                </ol>

Nametag

An equal height two column component for showcasing an icon and text. Fills to fit container.

Example
Text Node
Reversed
Text Nodes
<div>
        	<div class="u-noHorizontalPadding u-margin--auto">
        		<div class="NameTag u-flex u-background-dark-gray">
        			<div class="NameTag-icon u-flex u-noHorizontalPadding u-flex-column">
        				<svg xmlns="http://www.w3.org/2000/svg" class="Icon Icon--xxxl u-background-orange u-padding--xx-small">
                            <use xlink:href="#logo-overwatch"></use>
                        </svg>
        			</div>
        			<div class="col-xs-12 u-bold u-flex u-flex-column u-font-industry u-horizontalPadding--small u-flex-justify-center u-text-left">
        				<div class="NameTag-name u-ui3 u-uppercase u-text-white">Text Node</div>
        			</div>
        		</div>
        	</div>
        
        	<div class="u-topMargin--small u-bottomMargin--x-small u-margin--auto">
        		Reversed
        	</div>
        	<div class="u-noHorizontalPadding u-margin--auto">
        		<div class="NameTag u-flex u-background-dark-gray">
        			<div class="col-xs-12 u-bold u-flex u-flex-column u-font-industry u-horizontalPadding--small u-flex-justify-center u-text-right">
        				<div class="NameTag-name u-ui3 u-uppercase u-text-white">Text Nodes</div>
        			</div>
        			<div class="NameTag-icon u-flex u-noHorizontalPadding u-flex-column">
        				<svg xmlns="http://www.w3.org/2000/svg" class="Icon Icon--xxxl u-background-orange u-padding--xx-small">
                            <use xlink:href="#logo-overwatch"></use>
                        </svg>
        			</div>
        		</div>
        	</div>
        </div>

Player Handle

Player Handle

Player handle, position and name. File location: src/assets/toolkit/styles/partials/molecules/_player-handle.scss.

Example
Default
Handle Role
John Doe
Large Modifier
Handle Role
John Doe
Centered Modifier
Handle Role
John Doe
Centered (Vertical) Modifier
Handle Role
John Doe
light Modifier
Handle Role
John Doe
With Badge (instead of Role)
Handle
66
John Doe
<h6>Default</h6>
                <div class="PlayerHandle">
                	<div class="PlayerHandle-handleWrapper">
                		<span class="PlayerHandle-handle">Handle</span> <span class="PlayerHandle-role">Role</span>
                	</div>
                	<span class="PlayerHandle-name">John Doe</span>
                </div>
                
                <h6>Large Modifier</h6>
                <div class="PlayerHandle PlayerHandle--large">
                	<img src="//placehold.it/60x60" class="PlayerHandle-teamBadge" alt="">
                	<div class="PlayerHandle-handleWrapper">
                		<img src="//placehold.it/60x60" class="PlayerHandle-teamIcon" alt="">
                		<span class="PlayerHandle-handle">Handle</span> <span class="PlayerHandle-role">Role</span>
                	</div>
                	<span class="PlayerHandle-name">John Doe</span>
                </div>
                
                <h6>Centered Modifier</h6>
                <div class="PlayerHandle PlayerHandle--large PlayerHandle--centered">
                	<img src="//placehold.it/60x60" class="PlayerHandle-teamBadge" alt="">
                	<div class="PlayerHandle-handleWrapper">
                		<img src="//placehold.it/60x60" class="PlayerHandle-teamIcon" alt="">
                		<span class="PlayerHandle-handle">Handle</span> <span class="PlayerHandle-role">Role</span>
                	</div>
                	<span class="PlayerHandle-name">John Doe</span>
                </div>
                
                <h6>Centered (Vertical) Modifier</h6>
                <div class="PlayerHandle PlayerHandle--large PlayerHandle--verticalCentered">
                	<img src="//placehold.it/60x60" class="PlayerHandle-teamBadge" alt="">
                	<div class="PlayerHandle-handleWrapper">
                		<img src="//placehold.it/60x60" class="PlayerHandle-teamIcon" alt="">
                		<span class="PlayerHandle-handle">Handle</span> <span class="PlayerHandle-role">Role</span>
                	</div>
                	<span class="PlayerHandle-name">John Doe</span>
                </div>
                
                <h6>light Modifier</h6>
                <div class="PlayerHandle PlayerHandle--large PlayerHandle--light">
                	<img src="//placehold.it/60x60" class="PlayerHandle-teamBadge" alt="">
                	<div class="PlayerHandle-handleWrapper">
                		<img src="//placehold.it/60x60" class="PlayerHandle-teamIcon" alt="">
                		<span class="PlayerHandle-handle">Handle</span> <span class="PlayerHandle-role">Role</span>
                	</div>
                	<span class="PlayerHandle-name">John Doe</span>
                </div>
                
                <h6>With Badge (instead of Role)</h6>
                <div class="PlayerHandle PlayerHandle--verticalCentered">
                	<img src="//placehold.it/60x60" class="PlayerHandle-teamBadge" alt="">
                	<div class="PlayerHandle-handleWrapper">
                		<span class="PlayerHandle-handle">Handle</span>
                		<div class="PlayerHandle-badgeGroup">
                			<span class="PlayerHandle-badge PlayerHandle-badge--light">66</span><span class="PlayerHandle-badge">
                                <svg class="Icon Icon--xs" xmlns="http://www.w3.org/2000/svg">
                                    <use xlink:href="#role_tank"/>
                                </svg>
                            </span>
                		</div>
                	</div>
                	<span class="PlayerHandle-name">John Doe</span>
                </div>

Team Roster

Player handle modifier used in team rosters. File location: src/assets/toolkit/styles/partials/molecules/_player-handle.scss. Some modifiers will have no change on mobile resolutions

Example
Team Roster Modifier

John Doe

Role
Team Roster Modifier -- Right

John Doe

Role
Team Roster Modifier -- Fallback headshot

John Doe

Role
Team Roster Modifier -- Link
<h6>Team Roster Modifier</h6>
                <div class="PlayerHandle PlayerHandle--teamRoster">
                	<div class="PlayerHandle-pictureBg" style="background-image: url('http://placehold.it/120x120')"></div>
                	<div class="PlayerHandle-handleWrapper" style="border-color: red;">
                		<h4 class="PlayerHandle-name">John Doe</h4>
                		<span class="PlayerHandle-role">
                        <svg class="Icon Icon--lightFill PlayerHandle-teamIcon">
                            <use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#role_support"></use>
                        </svg>Role
                    </span>
                	</div>
                </div>
                
                <h6>Team Roster Modifier -- Right</h6>
                <div class="PlayerHandle PlayerHandle--teamRoster PlayerHandle--reverse">
                	<div class="PlayerHandle-pictureBg" style="background-image: url('http://placehold.it/120x120')"></div>
                	<div class="PlayerHandle-handleWrapper" style="border-color: red;">
                		<h4 class="PlayerHandle-name">John Doe</h4>
                		<span class="PlayerHandle-role">
                            <svg class="Icon Icon--lightFill PlayerHandle-teamIcon">
                                <use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#role_support"></use>
                            </svg>Role
                        </span>
                	</div>
                </div>
                
                <h6>Team Roster Modifier -- Fallback headshot</h6>
                <div class="PlayerHandle PlayerHandle--teamRoster">
                	<div class="PlayerHandle-pictureBg PlayerHandle-pictureBg--placeholder"></div>
                	<div class="PlayerHandle-handleWrapper" style="border-color: red;">
                		<h4 class="PlayerHandle-name">John Doe</h4>
                		<span class="PlayerHandle-role">
                        <svg class="Icon Icon--lightFill PlayerHandle-teamIcon">
                            <use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#role_support"></use>
                        </svg>Role
                    </span>
                	</div>
                </div>
                
                <h6>Team Roster Modifier -- Link</h6>
                <div class="PlayerHandle PlayerHandle--teamRoster PlayerHandle--link">
                	<div class="PlayerHandle-pictureBg PlayerHandle-pictureBg--placeholder"></div>
                	<div class="PlayerHandle-handleWrapper" style="border-color: red;">
                		<h4 class="PlayerHandle-name">John Doe</h4>
                		<span class="PlayerHandle-role">
                        <svg class="Icon Icon--lightFill PlayerHandle-teamIcon">
                            <use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#role_support"></use>
                        </svg>Role
                    </span>
                	</div>
                </div>

Prize Pool

Prize Pool display module

File location: src/assets/toolkit/styles/materials/molecules/_prize-pool.scss.

Example

prize pool

WORLD CHAMPION
$1,000,000
RUNNER UP
$400,000
3rd PLACE
$100,000
4th PLACE
$100,000
5th PLACE
$50,000
6th PLACE
$50,000

With team logo

WORLD CHAMPION
$1,000,000
RUNNER UP
$400,000
3rd PLACE
$100,000
4th PLACE
$100,000
5th PLACE
$50,000
6th PLACE
$50,000
<h4>prize pool</h4>
        <div class="PrizePool u-background-gray--heavyTransparency">
        	<div class="PrizePool-prize">
        		<div class="PrizePool-label">
        			WORLD CHAMPION
        		</div>
        		<div class="PrizePool-winnings">
        			$1,000,000
        		</div>
        	</div>
        	<div class="PrizePool-prize">
        		<div class="PrizePool-label">
        			RUNNER UP
        		</div>
        		<div class="PrizePool-winnings">
        			$400,000
        		</div>
        	</div>
        	<div class="PrizePool-prize">
        		<div class="PrizePool-label">
        			3rd PLACE
        		</div>
        		<div class="PrizePool-winnings">
        			$100,000
        		</div>
        	</div>
        	<div class="PrizePool-prize">
        		<div class="PrizePool-label">
        			4th PLACE
        		</div>
        		<div class="PrizePool-winnings">
        			$100,000
        		</div>
        	</div>
        	<div class="PrizePool-prize">
        		<div class="PrizePool-label">
        			5th PLACE
        		</div>
        		<div class="PrizePool-winnings">
        			$50,000
        		</div>
        	</div>
        	<div class="PrizePool-prize">
        		<div class="PrizePool-label">
        			6th PLACE
        		</div>
        		<div class="PrizePool-winnings">
        			$50,000
        		</div>
        	</div>
        </div>
        
        <br />
        
        <p>With team logo</p>
        
        <div class="PrizePool u-background-gray--heavyTransparency">
        	<div class="PrizePool-prize">
        		<div class="PrizePool-iconLabel">
        			<img class="Icon Icon--lg" src="https://placehold.it/40x40" />
        		</div>
        		<div class="PrizePool-label">
        			WORLD CHAMPION
        		</div>
        		<div class="PrizePool-winnings">
        			$1,000,000
        		</div>
        	</div>
        	<div class="PrizePool-prize">
        		<div class="PrizePool-iconLabel">
        			<img class="Icon Icon--lg" src="https://placehold.it/40x40" />
        		</div>
        		<div class="PrizePool-label">
        			RUNNER UP
        		</div>
        		<div class="PrizePool-winnings">
        			$400,000
        		</div>
        	</div>
        	<div class="PrizePool-prize">
        		<div class="PrizePool-iconLabel">
        			<img class="Icon Icon--lg" src="https://placehold.it/40x40" />
        		</div>
        		<div class="PrizePool-label">
        			3rd PLACE
        		</div>
        		<div class="PrizePool-winnings">
        			$100,000
        		</div>
        	</div>
        	<div class="PrizePool-prize">
        		<div class="PrizePool-iconLabel">
        			<img class="Icon Icon--lg" src="https://placehold.it/40x40" />
        		</div>
        		<div class="PrizePool-label">
        			4th PLACE
        		</div>
        		<div class="PrizePool-winnings">
        			$100,000
        		</div>
        	</div>
        	<div class="PrizePool-prize">
        		<div class="PrizePool-iconLabel">
        			<img class="Icon Icon--lg" src="https://placehold.it/40x40" />
        		</div>
        		<div class="PrizePool-label">
        			5th PLACE
        		</div>
        		<div class="PrizePool-winnings">
        			$50,000
        		</div>
        	</div>
        	<div class="PrizePool-prize">
        		<div class="PrizePool-iconLabel">
        			<img class="Icon Icon--lg" src="https://placehold.it/40x40" />
        		</div>
        		<div class="PrizePool-label">
        			6th PLACE
        		</div>
        		<div class="PrizePool-winnings">
        			$50,000
        		</div>
        	</div>
        </div>

Scroll Area

Scroll Areas

A scroll area adds a gradient to both ends of the container to show that there is more content to be seen if the user scrolls.

Example

Default Scroll Area

Example
Heading Heading Heading Heading Heading Heading
Data Data Data Data Data Data
Data Data Data Data Data Data
Data Data Data Data Data Data
Data Data Data Data Data Data
Data Data Data Data Data Data
Data Data Data Data Data Data
<div class="ScrollArea">
                	<div class="ScrollArea-container">
                		<table class="table table-striped ScrollArea-content">
                			<thead>
                				<tr>
                					<td>Heading</td>
                					<td>Heading</td>
                					<td>Heading</td>
                					<td>Heading</td>
                					<td>Heading</td>
                					<td>Heading</td>
                				</tr>
                			</thead>
                			<tbody>
                				<tr>
                					<td>Data</td>
                					<td>Data</td>
                					<td>Data</td>
                					<td>Data</td>
                					<td>Data</td>
                					<td>Data</td>
                				</tr>
                				<tr>
                					<td>Data</td>
                					<td>Data</td>
                					<td>Data</td>
                					<td>Data</td>
                					<td>Data</td>
                					<td>Data</td>
                				</tr>
                				<tr>
                					<td>Data</td>
                					<td>Data</td>
                					<td>Data</td>
                					<td>Data</td>
                					<td>Data</td>
                					<td>Data</td>
                				</tr>
                				<tr>
                					<td>Data</td>
                					<td>Data</td>
                					<td>Data</td>
                					<td>Data</td>
                					<td>Data</td>
                					<td>Data</td>
                				</tr>
                				<tr>
                					<td>Data</td>
                					<td>Data</td>
                					<td>Data</td>
                					<td>Data</td>
                					<td>Data</td>
                					<td>Data</td>
                				</tr>
                				<tr>
                					<td>Data</td>
                					<td>Data</td>
                					<td>Data</td>
                					<td>Data</td>
                					<td>Data</td>
                					<td>Data</td>
                				</tr>
                			</tbody>
                		</table>
                	</div>
                </div>

Vertical Scroll Area

Example

Lorem ipsum

Lorem ipsum

Lorem ipsum

Lorem ipsum

Lorem ipsum

Lorem ipsum

Lorem ipsum

Lorem ipsum

Lorem ipsum

<div class="ScrollArea ScrollArea--vertical">
                	<div class="ScrollArea-container" style="height: 256px;">
                		<div class="ScrollArea-content">
                			<p>Lorem ipsum</p>
                			<p>Lorem ipsum</p>
                			<p>Lorem ipsum</p>
                			<p>Lorem ipsum</p>
                			<p>Lorem ipsum</p>
                			<p>Lorem ipsum</p>
                			<p>Lorem ipsum</p>
                			<p>Lorem ipsum</p>
                			<p>Lorem ipsum</p>
                		</div>
                	</div>
                	<div class="ScrollArea-gradient--horizontal"></div>
                	<div class="ScrollArea-gradient--vertical"></div>
                </div>

Search Result

Displays an entry from a returned user search.

Need to have two items per search result in order to display at all resolutions: .SearchResult and .SearchResult.SearchResult--mobile

File location: src/assets/toolkit/styles/partials/molecules/_search-result.scss.

Example
Default
Result Title can be super long if needed GERMAN REINHARDT I WILL BE YOUR SHIELD Up to 2 lines before truncation test test etsetestest

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer facilisis lectus et nisi volutpat porttitor. Morbi nec auctor nunc, vel facilisis mi. Nunc finibus massa eu nisi condimentum sollicitudin eu ut ipsum. Fusce justo lectus, aliquam vitae quam in, scelerisque facilisis nisl. Nam facilisis mi sit amet neque scelerisque finibus. Cras aliquam sed risus id accumsan.

Result Title can be short

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer facilisis lectus et nisi volutpat porttitor. Morbi nec auctor nunc, vel facilisis mi. Nunc finibus massa eu nisi condimentum sollicitudin eu ut ipsum. Fusce justo lectus, aliquam vitae quam in, scelerisque facilisis nisl. Nam facilisis mi sit amet neque scelerisque finibus. Cras aliquam sed risus id accumsan.

Result Title can be medium Overwatch words No Ellipsis if two lines or less

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer facilisis lectus et nisi volutpat porttitor. Morbi nec auctor nunc, vel facilisis mi. Nunc finibus massa eu nisi condimentum sollicitudin eu ut ipsum. Fusce justo lectus, aliquam vitae quam in, scelerisque facilisis nisl. Nam facilisis mi sit amet neque scelerisque finibus. Cras aliquam sed risus id accumsan.

<h6>Default</h6>
        <div class="SearchResult">
        	<div class="SearchResult-item">
        		<a class="SearchResult-img" href="javascript:void(0)" style="background-image: url(//placehold.it/300x169);"></a>
        	</div>
        	<div class="SearchResult-item SearchResult-item--text">
        		<div class="SearchResult-item-content">
        			<h6>
        				<a class="SearchResult-title js-truncate" href="javascript:void(0)">Result Title can be super long if needed GERMAN REINHARDT I WILL BE YOUR SHIELD Up to 2 lines before truncation test test etsetestest</a>
        			</h6>
        			<p class="SearchResult-desc js-truncate">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer facilisis lectus et nisi volutpat porttitor. Morbi nec auctor nunc, vel facilisis mi. Nunc finibus massa eu nisi condimentum sollicitudin eu ut ipsum. Fusce justo lectus, aliquam vitae
        				quam in, scelerisque facilisis nisl. Nam facilisis mi sit amet neque scelerisque finibus. Cras aliquam sed risus id accumsan.
        			</p>
        			<div class="SearchResult-meta">
        				<div class="Byline">
        					<span class="Byline-label Label">Label</span>
        					<time datetime="1970-01-01T00:01" class="Byline-published">
                                <svg class="Icon Icon--lightFill Icon--xs" xmlns="http://www.w3.org/2000/svg">
                                    <use xlink:href="#icon-clock"/>
                                </svg>
                                4 hours ago
                            </time>
        				</div>
        			</div>
        		</div>
        	</div>
        </div>
        
        <div class="SearchResult">
        	<div class="SearchResult-item">
        		<a class="SearchResult-img" href="javascript:void(0)" style="background-image: url(//placehold.it/300x169);"></a>
        	</div>
        	<div class="SearchResult-item SearchResult-item--text">
        		<div class="SearchResult-item-content">
        			<h6>
        				<a class="SearchResult-title js-truncate" href="javascript:void(0)">Result Title can be short</a>
        			</h6>
        			<p class="SearchResult-desc js-truncate">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer facilisis lectus et nisi volutpat porttitor. Morbi nec auctor nunc, vel facilisis mi. Nunc finibus massa eu nisi condimentum sollicitudin eu ut ipsum. Fusce justo lectus, aliquam vitae
        				quam in, scelerisque facilisis nisl. Nam facilisis mi sit amet neque scelerisque finibus. Cras aliquam sed risus id accumsan.
        			</p>
        			<div class="SearchResult-meta">
        				<div class="Byline">
        					<span class="Byline-label Label">Label</span>
        					<time datetime="1970-01-01T00:01" class="Byline-published">
                                <svg class="Icon Icon--lightFill Icon--xs" xmlns="http://www.w3.org/2000/svg">
                                    <use xlink:href="#icon-clock"/>
                                </svg>
                                4 hours ago
                            </time>
        				</div>
        			</div>
        		</div>
        	</div>
        </div>
        
        <div class="SearchResult">
        	<div class="SearchResult-item">
        		<a class="SearchResult-img" href="javascript:void(0)" style="background-image: url(//placehold.it/300x169);"></a>
        	</div>
        	<div class="SearchResult-item SearchResult-item--text">
        		<div class="SearchResult-item-content">
        			<h6>
        				<a class="SearchResult-title js-truncate" href="javascript:void(0)">Result Title can be medium Overwatch words No Ellipsis if two lines or less</a>
        			</h6>
        			<p class="SearchResult-desc js-truncate">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer facilisis lectus et nisi volutpat porttitor. Morbi nec auctor nunc, vel facilisis mi. Nunc finibus massa eu nisi condimentum sollicitudin eu ut ipsum. Fusce justo lectus, aliquam vitae
        				quam in, scelerisque facilisis nisl. Nam facilisis mi sit amet neque scelerisque finibus. Cras aliquam sed risus id accumsan.
        			</p>
        			<div class="SearchResult-meta">
        				<div class="Byline">
        					<span class="Byline-label Label">Label</span>
        					<time datetime="1970-01-01T00:01" class="Byline-published">
                                <svg class="Icon Icon--lightFill Icon--xs" xmlns="http://www.w3.org/2000/svg">
                                    <use xlink:href="#icon-clock"/>
                                </svg>
                                4 hours ago
                            </time>
        				</div>
        			</div>
        		</div>
        	</div>
        </div>

Social Dropdown

The social dropdown has links to share the current page, including the url hash. The social dropdown should, in general, be aligned to the right of the page/content.

<div style="display: inline-block; width: 50vw; height: 1px"></div>
        <div class="Dropdown">
        	<button type="button" class="Button Button--secondary SocialDropdown-button SocialDropdown-button--stripped Dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                <svg xmlns="http://www.w3.org/2000/svg" class="Icon">
                    <use xlink:href="#icon-connect"/>
                </svg>
            </button>
        	<ul class="Dropdown-menu Dropdown-menu--right SocialDropdown-menu">
        		<li><a href="javascript:void(0)" class="SocialShare--facebook" target="_blank"><span class="Dropdown-menu-text js-truncate">Facebook</span>
                <svg class="Icon" xmlns="http://www.w3.org/2000/svg">
                    <use xlink:href="#social-facebook"/>
                </svg>
                </a></li>
        		<li><a href="javascript:void(0)" class="SocialShare--twitter" target="_blank"><span class="Dropdown-menu-text js-truncate">Twitter</span>
                <svg class="Icon" xmlns="http://www.w3.org/2000/svg">
                    <use xlink:href="#social-twitter"/>
                </svg>
                </a></li>
        		<li><a href="javascript:void(0)" class="SocialShare--url" target="_blank"><span class="Dropdown-menu-text js-truncate">Copy URL</span>
                <svg class="Icon" xmlns="http://www.w3.org/2000/svg">
                    <use xlink:href="#icon-external-url"/>
                </svg></a></li>
        	</ul>
        </div>

Social List

A simple list for displaying grouped Social Icons. Should be placed on dark background.

File location: src/assets/toolkit/styles/partials/molecules/_social-list.scss.

Example
<div class="TexturedBackground--dark">
        	<ul class="SocialList">
        		<li class="SocialList-item"><a class="SocialIcon SocialIcon--facebook" href="javascript:void(0)">
                <svg class="Icon SocialIcon-icon" xmlns="http://www.w3.org/2000/svg">
                    <use xlink:href="#social-facebook"/>
                </svg>
            </a></li>
        		<li class="SocialList-item"><a class="SocialIcon SocialIcon--twitter" href="javascript:void(0)">
                <svg class="Icon SocialIcon-icon" xmlns="http://www.w3.org/2000/svg">
                    <use xlink:href="#social-twitter"/>
                </svg>
            </a></li>
        		<li class="SocialList-item"><a class="SocialIcon SocialIcon--youtube" href="javascript:void(0)">
                <svg class="Icon SocialIcon-icon" xmlns="http://www.w3.org/2000/svg">
                    <use xlink:href="#social-youtube"/>
                </svg>
            </a></li>
        	</ul>
        </div>

Stat

Displays stat data for a player. The stat can be represented by an image or SVG icon. File location: src/assets/toolkit/styles/partials/molecules/_stat.scss.

Note: Shown here with optional .Stat-typeEmphasis class, add emphasis to inner text in the type block.

Example
Default

37,986 Triangle Down

Healing Done97% of Team Damage Taken
Dark Modifier

37,986 Triangle Down

Healing Done97% of Team Damage Taken
Without Image

37,986

Healing Done97% of Team Damage Taken
Small Modifier

37,986

Healing Done97% of Team Damage Taken
With SVG Icon
Star

37,986

Healing Done97% of Team Damage Taken
Light Modifier

37,986

Healing Done97% of Team Damage Taken
<h6>Default</h6>
        <div class="Stat">
        	<img src="../assets/toolkit/images/static/featured-stat-a.png" class="Stat-icon img-responsive" alt="">
        	<h4 class="Stat-value">37,986
        		<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 42.7 19.7" class="Icon Stat-valueAccent">
                    <title>Triangle Down</title>
                    <path d="M0 0l21.4 19.7L42.7 0H0z"/>
                </svg>
        	</h4>
        	<span class="Stat-type">
        <span class="Stat-typeEmphasis">Healing Done</span>97% of Team Damage Taken</span>
        </div>
        <h6>Dark Modifier</h6>
        <div class="Stat Stat--dark">
        	<img src="../assets/toolkit/images/static/featured-stat-a.png" class="Stat-icon img-responsive" alt="">
        	<h4 class="Stat-value">37,986
        		<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 42.7 19.7" class="Icon Stat-valueAccent">
                    <title>Triangle Down</title>
                    <path d="M0 0l21.4 19.7L42.7 0H0z"/>
                </svg>
        	</h4>
        	<span class="Stat-type">
        <span class="Stat-typeEmphasis">Healing Done</span>97% of Team Damage Taken</span>
        </div>
        <h6>Without Image</h6>
        <div class="Stat">
        	<h4 class="Stat-value">37,986</h4>
        	<span class="Stat-type">
        <span class="Stat-typeEmphasis">Healing Done</span>97% of Team Damage Taken</span>
        </div>
        <h6>Small Modifier</h6>
        <div class="Stat Stat--small">
        	<h4 class="Stat-value">37,986</h4>
        	<span class="Stat-type">
        <span class="Stat-typeEmphasis">Healing Done</span>97% of Team Damage Taken</span>
        </div>
        <h6>With SVG Icon</h6>
        <div class="Stat Stat--small">
        	<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 108.9 102.8" class="Icon Stat-icon">
                <title>Star</title>
                <path d="M108.9 37.8l-37-5.1L54.3 0 36.8 32.8 0 38.4l26.7 27-5.6 37.4L55 85.7l33.5 17-6.2-37.2zM54.8 77.5a21.8 21.8 0 1 1 21.8-21.8 21.85 21.85 0 0 1-21.8 21.8z"/>
                <circle class="a" cx="54.8" cy="55.8" r="15.2"/>
            </svg>
        	<h4 class="Stat-value">37,986</h4>
        	<span class="Stat-type">
        <span class="Stat-typeEmphasis">Healing Done</span>97% of Team Damage Taken</span>
        </div>
        <h6>Light Modifier</h6>
        <div class="Stat Stat--small Stat--light">
        	<h4 class="Stat-value">37,986</h4>
        	<span class="Stat-type">
        <span class="Stat-typeEmphasis">Healing Done</span>97% of Team Damage Taken</span>
        </div>

Stat Bar

Displays stat data in the form of a horizontal bar.

File location: src/assets/toolkit/styles/partials/molecules/_stat-bar.scss.

Example
85
95
Stat Title
1020
3021
Stat Title
185
59
Stat Title
<div class="StatBar">
        	<div class="StatBar-container">
        		<div class="StatBar-bar StatBar-bar--left">
        			<span class="StatBar-stat">85</span> <span class="StatBar-fill" style="width: 35%"></span>
        		</div>
        		<div class="StatBar-bar StatBar-bar--right">
        			<span class="StatBar-stat">95</span> <span class="StatBar-fill" style="width: 45%"></span>
        		</div>
        	</div>
        	<span class="StatBar-label">Stat Title</span>
        </div>
        <div class="StatBar">
        	<div class="StatBar-container">
        		<div class="StatBar-bar StatBar-bar--left">
        			<span class="StatBar-stat">1020</span> <span class="StatBar-fill" style="width: 50%"></span>
        		</div>
        		<div class="StatBar-bar StatBar-bar--right">
        			<span class="StatBar-stat">3021</span> <span class="StatBar-fill" style="width: 81%"></span>
        		</div>
        	</div>
        	<span class="StatBar-label">Stat Title</span>
        </div>
        <div class="StatBar">
        	<div class="StatBar-container">
        		<div class="StatBar-bar StatBar-bar--left">
        			<span class="StatBar-stat">185</span> <span class="StatBar-fill" style="width: 75%"></span>
        		</div>
        		<div class="StatBar-bar StatBar-bar--right">
        			<span class="StatBar-stat">59</span> <span class="StatBar-fill" style="width: 20%"></span>
        		</div>
        	</div>
        	<span class="StatBar-label">Stat Title</span>
        </div>

Streamer Count

A small indicator of how many viewers a streamer has. File location: src/assets/toolkit/styles/partials/molecules/_streamer-count.scss.

Note: It's feasible that more instances of this type of component my warrent an abstracted version of a text/icon component.

Example
Profile 62304
<div class="StreamerCount">
        	<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 93.2 93.21" class="Icon StreamerCount-icon">
                <title>Profile</title>
                <path d="M58.8 54.1c3.7-7.2 13.5-15.6 13.5-27.1 0-17.7-12.2-27-25.7-27S21.4 9.3 21.4 27c0 11.5 7.8 18 13.1 26.5 5.6 9-1.1 10-5.8 13C10.6 78.2 0 77.5 0 86.9v3.5c0 3.9 93.2 3.6 93.2 0v-3.5c0-9.6-15.6-12-30.3-21.7-2.4-1.6-8-3.6-4.1-11.1z"/>
            </svg>
        	<span class="StreamerCount-value">62304</span>
        </div>

Tables

Basic

Basic table.

File location: src/assets/toolkit/styles/partials/molecules/_table.scss.

Example
As All Heroes Avg Per 10 Min League Rank
Hero Damage Done 00,000 3rd
Final Blows 0.0 12th
Eliminations 00.0 8th
<table class="Table">
                	<thead>
                		<tr class="Table-row">
                			<th class="Table-header">As All Heroes</th>
                			<th class="Table-header">Avg Per 10 Min</th>
                			<th class="Table-header">League Rank</th>
                		</tr>
                	</thead>
                	<tbody>
                		<tr class="Table-row">
                			<td class="Table-data">Hero Damage Done</td>
                			<td class="Table-data">00,000</td>
                			<td class="Table-data">3rd</td>
                		</tr>
                		<tr class="Table-row">
                			<td class="Table-data">Final Blows</td>
                			<td class="Table-data">0.0</td>
                			<td class="Table-data">12th</td>
                		</tr>
                		<tr class="Table-row">
                			<td class="Table-data">Eliminations</td>
                			<td class="Table-data">00.0</td>
                			<td class="Table-data">8th</td>
                		</tr>
                	</tbody>
                </table>

Emphasized Cells

Table with emphasized cells.

File location: src/assets/toolkit/styles/partials/molecules/_table.scss.

Example
As All Heroes Avg Per 10 Min League Rank
Hero Damage Done 00,000 3rd
Final Blows 0.0 12th
Eliminations 00.0 8th
<table class="Table">
                	<thead>
                		<tr class="Table-row">
                			<th class="Table-header">As All Heroes</th>
                			<th class="Table-header">Avg Per 10 Min</th>
                			<th class="Table-header">League Rank</th>
                		</tr>
                	</thead>
                	<tbody>
                		<tr class="Table-row">
                			<td class="Table-data">Hero Damage Done</td>
                			<td class="Table-data">00,000</td>
                			<td class="Table-data Table-data--emphasized">3rd</td>
                		</tr>
                		<tr class="Table-row">
                			<td class="Table-data">Final Blows</td>
                			<td class="Table-data">0.0</td>
                			<td class="Table-data Table-data--emphasized">12th</td>
                		</tr>
                		<tr class="Table-row">
                			<td class="Table-data">Eliminations</td>
                			<td class="Table-data">00.0</td>
                			<td class="Table-data Table-data--emphasized">8th</td>
                		</tr>
                	</tbody>
                </table>

Large Cells

Table with larger text in cells.

File location: src/assets/toolkit/styles/partials/molecules/_table.scss.

Example
As All Heroes Avg Per 10 Min
Hero Damage Done 00,000
No data in this row.
Eliminations 00.0
<table class="Table">
                	<thead>
                		<tr class="Table-row">
                			<th class="Table-header">As All Heroes</th>
                			<th class="Table-header">Avg Per 10 Min</th>
                		</tr>
                	</thead>
                	<tbody>
                		<tr class="Table-row">
                			<td class="Table-data">Hero Damage Done</td>
                			<td class="Table-data">00,000</td>
                		</tr>
                		<tr class="Table-row">
                			<td class="Table-data Table-data--larger text-center u-text-light-gray" colspan="2">No data in this row.</td>
                		</tr>
                		<tr class="Table-row">
                			<td class="Table-data">Eliminations</td>
                			<td class="Table-data">00.0</td>
                		</tr>
                	</tbody>
                </table>

Extended Header

Table with an extended header.

File location: src/assets/toolkit/styles/partials/molecules/_table.scss.

Example
As All Heroes Avg Per 10 Min League Rank
Hero Damage Done 00,000 3rd
Final Blows 0.0 12th
Eliminations 00.0 8th
<table class="Table">
                	<thead>
                		<tr class="Table-row">
                			<th class="Table-header Table-header--extended">As All Heroes</th>
                			<th class="Table-header">Avg Per 10 Min</th>
                			<th class="Table-header">League Rank</th>
                		</tr>
                	</thead>
                	<tbody>
                		<tr class="Table-row">
                			<td class="Table-data u-uppercase">Hero Damage Done</td>
                			<td class="Table-data u-text-right">00,000</td>
                			<td class="Table-data u-text-right">3rd</td>
                		</tr>
                		<tr class="Table-row">
                			<td class="Table-data u-uppercase">Final Blows</td>
                			<td class="Table-data u-text-right">0.0</td>
                			<td class="Table-data u-text-right">12th</td>
                		</tr>
                		<tr class="Table-row">
                			<td class="Table-data u-uppercase">Eliminations</td>
                			<td class="Table-data u-text-right">00.0</td>
                			<td class="Table-data u-text-right">8th</td>
                		</tr>
                	</tbody>
                </table>

No Side Borders

Table with no borders on the sides.

File location: src/assets/toolkit/styles/partials/molecules/_table.scss.

Example
Top Heroes for All Maps Time Played % Played
Junkrat 00h 00m 56%
Tracer 00h 00m 32%
Genji 00h 00m 20%
Soldier: 76 00h 00m 10%
<table class="Table Table--noBorderSides">
                	<thead>
                		<tr class="Table-row">
                			<th class="Table-header Table-header--extended" colspan="2">Top Heroes for All Maps</th>
                			<th class="Table-header">Time Played</th>
                			<th class="Table-header">% Played</th>
                		</tr>
                	</thead>
                	<tbody>
                		<tr class="Table-row" style="background-image: linear-gradient(to right, transparent, rgba(0,0,0,0.1) 2.8rem, rgba(0,0,0,0.1) 56%, transparent 56%, transparent calc(100% - 5px), #cb9e37 calc(100% - 5px), #cb9e37 100%)">
                			<td class="Table-iconContainer" style="background-color: #cb9e37">
                				<div class="Table-icon">
                					<svg class="HeroIcon u-background-junkrat" xmlns="http://www.w3.org/2000/svg" style="fill: white">
                                        <use xlink:href="#hero-junkrat"/>
                                    </svg>
                				</div>
                			</td>
                			<td class="Table-data u-uppercase">Junkrat</td>
                			<td class="Table-data u-text-right">00h 00m</td>
                			<td class="Table-data u-text-right Table-data--emphasized">56%</td>
                		</tr>
                		<tr class="Table-row" style="background-image: linear-gradient(to right, transparent, rgba(0,0,0,0.1) 2.8rem, rgba(0,0,0,0.1) 32%, transparent 32%, transparent calc(100% - 5px), #f0a030 calc(100% - 5px), #f0a030 100%)">
                			<td class="Table-iconContainer" style="background-color: #f0a030">
                				<div class="Table-icon">
                					<svg class="HeroIcon u-background-tracer" xmlns="http://www.w3.org/2000/svg" style="fill: white">
                                        <use xlink:href="#hero-tracer"/>
                                    </svg>
                				</div>
                			</td>
                			<td class="Table-data u-uppercase">Tracer</td>
                			<td class="Table-data u-text-right">00h 00m</td>
                			<td class="Table-data u-text-right Table-data--emphasized">32%</td>
                		</tr>
                		<tr class="Table-row" style="background-image: linear-gradient(to right, transparent, rgba(0,0,0,0.1) 2.8rem, rgba(0,0,0,0.1) 20%, transparent 20%, transparent calc(100% - 5px), #98f556 calc(100% - 5px), #98f556 100%)">
                			<td class="Table-iconContainer" style="background-color: #f0a030">
                				<div class="Table-icon">
                					<svg class="HeroIcon u-background-genji" xmlns="http://www.w3.org/2000/svg" style="fill: white">
                                        <use xlink:href="#hero-genji"/>
                                    </svg>
                				</div>
                			</td>
                			<td class="Table-data u-uppercase">Genji</td>
                			<td class="Table-data u-text-right">00h 00m</td>
                			<td class="Table-data u-text-right Table-data--emphasized">20%</td>
                		</tr>
                		<tr class="Table-row" style="background-image: linear-gradient(to right, transparent, rgba(0,0,0,0.1) 2.8rem, rgba(0,0,0,0.1) 10%, transparent 10%, transparent calc(100% - 5px), #5e6eb5 calc(100% - 5px), #5e6eb5 100%)">
                			<td class="Table-iconContainer" style="background-color: #5e6eb5">
                				<div class="Table-icon">
                					<svg class="HeroIcon u-background-soldier-76" xmlns="http://www.w3.org/2000/svg" style="fill: white">
                                        <use xlink:href="#hero-soldier-76"/>
                                    </svg>
                				</div>
                			</td>
                			<td class="Table-data u-uppercase">Soldier: 76</td>
                			<td class="Table-data u-text-right">00h 00m</td>
                			<td class="Table-data u-text-right Table-data--emphasized">10%</td>
                		</tr>
                	</tbody>
                </table>

No Header Row

Table with no header row.

File location: src/assets/toolkit/styles/partials/molecules/_table.scss.

Example
Hero Damage Done 00,000 3rd
Final Blows 0.0 12th
Eliminations 00.0 8th
<table class="Table Table--noHeaderRow">
                	<tbody>
                		<tr class="Table-row">
                			<td class="Table-data">Hero Damage Done</td>
                			<td class="Table-data">00,000</td>
                			<td class="Table-data">3rd</td>
                		</tr>
                		<tr class="Table-row">
                			<td class="Table-data">Final Blows</td>
                			<td class="Table-data">0.0</td>
                			<td class="Table-data">12th</td>
                		</tr>
                		<tr class="Table-row">
                			<td class="Table-data">Eliminations</td>
                			<td class="Table-data">00.0</td>
                			<td class="Table-data">8th</td>
                		</tr>
                	</tbody>
                </table>

No Bottom Border

Table with no border on the bottom (useful when this table is nested inside another).

File location: src/assets/toolkit/styles/partials/molecules/_table.scss.

Example
Top Heroes for All Maps Time Played % Played
Junkrat 00h 00m 56%
Tracer 00h 00m 32%
Genji 00h 00m 20%
Soldier: 76 00h 00m 10%
<table class="Table Table--noBorderBottom">
                	<thead>
                		<tr class="Table-row">
                			<th class="Table-header Table-header--extended" colspan="2">Top Heroes for All Maps</th>
                			<th class="Table-header">Time Played</th>
                			<th class="Table-header">% Played</th>
                		</tr>
                	</thead>
                	<tbody>
                		<tr class="Table-row" style="background-image: linear-gradient(to right, transparent, rgba(0,0,0,0.1) 2.8rem, rgba(0,0,0,0.1) 56%, transparent 56%, transparent calc(100% - 5px), #cb9e37 calc(100% - 5px), #cb9e37 100%)">
                			<td class="Table-iconContainer" style="background-color: #cb9e37">
                				<div class="Table-icon">
                					<svg class="HeroIcon u-background-junkrat" xmlns="http://www.w3.org/2000/svg" style="fill: white">
                                        <use xlink:href="#hero-junkrat"/>
                                    </svg>
                				</div>
                			</td>
                			<td class="Table-data u-uppercase">Junkrat</td>
                			<td class="Table-data u-text-right">00h 00m</td>
                			<td class="Table-data u-text-right Table-data--emphasized">56%</td>
                		</tr>
                		<tr class="Table-row" style="background-image: linear-gradient(to right, transparent, rgba(0,0,0,0.1) 2.8rem, rgba(0,0,0,0.1) 32%, transparent 32%, transparent calc(100% - 5px), #f0a030 calc(100% - 5px), #f0a030 100%)">
                			<td class="Table-iconContainer" style="background-color: #f0a030">
                				<div class="Table-icon">
                					<svg class="HeroIcon u-background-tracer" xmlns="http://www.w3.org/2000/svg" style="fill: white">
                                        <use xlink:href="#hero-tracer"/>
                                    </svg>
                				</div>
                			</td>
                			<td class="Table-data u-uppercase">Tracer</td>
                			<td class="Table-data u-text-right">00h 00m</td>
                			<td class="Table-data u-text-right Table-data--emphasized">32%</td>
                		</tr>
                		<tr class="Table-row" style="background-image: linear-gradient(to right, transparent, rgba(0,0,0,0.1) 2.8rem, rgba(0,0,0,0.1) 20%, transparent 20%, transparent calc(100% - 5px), #98f556 calc(100% - 5px), #98f556 100%)">
                			<td class="Table-iconContainer" style="background-color: #f0a030">
                				<div class="Table-icon">
                					<svg class="HeroIcon u-background-genji" xmlns="http://www.w3.org/2000/svg" style="fill: white">
                                        <use xlink:href="#hero-genji"/>
                                    </svg>
                				</div>
                			</td>
                			<td class="Table-data u-uppercase">Genji</td>
                			<td class="Table-data u-text-right">00h 00m</td>
                			<td class="Table-data u-text-right Table-data--emphasized">20%</td>
                		</tr>
                		<tr class="Table-row" style="background-image: linear-gradient(to right, transparent, rgba(0,0,0,0.1) 2.8rem, rgba(0,0,0,0.1) 10%, transparent 10%, transparent calc(100% - 5px), #5e6eb5 calc(100% - 5px), #5e6eb5 100%)">
                			<td class="Table-iconContainer" style="background-color: #5e6eb5">
                				<div class="Table-icon">
                					<svg class="HeroIcon u-background-soldier-76" xmlns="http://www.w3.org/2000/svg" style="fill: white">
                                        <use xlink:href="#hero-soldier-76"/>
                                    </svg>
                				</div>
                			</td>
                			<td class="Table-data u-uppercase">Soldier: 76</td>
                			<td class="Table-data u-text-right">00h 00m</td>
                			<td class="Table-data u-text-right Table-data--emphasized">10%</td>
                		</tr>
                	</tbody>
                </table>

No Borders

Table with no borders, both inner and outer (useful when this table is nested inside another).

File location: src/assets/toolkit/styles/partials/molecules/_table.scss.

Example
Top Heroes for All Maps Time Played % Played
Junkrat 00h 00m 56%
Tracer 00h 00m 32%
Genji 00h 00m 20%
Soldier: 76 00h 00m 10%
<table class="Table Table--noBorders">
                	<thead>
                		<tr class="Table-row">
                			<th class="Table-header Table-header--extended" colspan="2">Top Heroes for All Maps</th>
                			<th class="Table-header">Time Played</th>
                			<th class="Table-header">% Played</th>
                		</tr>
                	</thead>
                	<tbody>
                		<tr class="Table-row" style="background-image: linear-gradient(to right, transparent, rgba(0,0,0,0.1) 2.8rem, rgba(0,0,0,0.1) 56%, transparent 56%, transparent calc(100% - 5px), #cb9e37 calc(100% - 5px), #cb9e37 100%)">
                			<td class="Table-iconContainer" style="background-color: #cb9e37">
                				<div class="Table-icon">
                					<svg class="HeroIcon u-background-junkrat" xmlns="http://www.w3.org/2000/svg" style="fill: white">
                                        <use xlink:href="#hero-junkrat"/>
                                    </svg>
                				</div>
                			</td>
                			<td class="Table-data u-uppercase">Junkrat</td>
                			<td class="Table-data u-text-right">00h 00m</td>
                			<td class="Table-data u-text-right Table-data--emphasized">56%</td>
                		</tr>
                		<tr class="Table-row" style="background-image: linear-gradient(to right, transparent, rgba(0,0,0,0.1) 2.8rem, rgba(0,0,0,0.1) 32%, transparent 32%, transparent calc(100% - 5px), #f0a030 calc(100% - 5px), #f0a030 100%)">
                			<td class="Table-iconContainer" style="background-color: #f0a030">
                				<div class="Table-icon">
                					<svg class="HeroIcon u-background-tracer" xmlns="http://www.w3.org/2000/svg" style="fill: white">
                                        <use xlink:href="#hero-tracer"/>
                                    </svg>
                				</div>
                			</td>
                			<td class="Table-data u-uppercase">Tracer</td>
                			<td class="Table-data u-text-right">00h 00m</td>
                			<td class="Table-data u-text-right Table-data--emphasized">32%</td>
                		</tr>
                		<tr class="Table-row" style="background-image: linear-gradient(to right, transparent, rgba(0,0,0,0.1) 2.8rem, rgba(0,0,0,0.1) 20%, transparent 20%, transparent calc(100% - 5px), #98f556 calc(100% - 5px), #98f556 100%)">
                			<td class="Table-iconContainer" style="background-color: #f0a030">
                				<div class="Table-icon">
                					<svg class="HeroIcon u-background-genji" xmlns="http://www.w3.org/2000/svg" style="fill: white">
                                        <use xlink:href="#hero-genji"/>
                                    </svg>
                				</div>
                			</td>
                			<td class="Table-data u-uppercase">Genji</td>
                			<td class="Table-data u-text-right">00h 00m</td>
                			<td class="Table-data u-text-right Table-data--emphasized">20%</td>
                		</tr>
                		<tr class="Table-row" style="background-image: linear-gradient(to right, transparent, rgba(0,0,0,0.1) 2.8rem, rgba(0,0,0,0.1) 10%, transparent 10%, transparent calc(100% - 5px), #5e6eb5 calc(100% - 5px), #5e6eb5 100%)">
                			<td class="Table-iconContainer" style="background-color: #5e6eb5">
                				<div class="Table-icon">
                					<svg class="HeroIcon u-background-soldier-76" xmlns="http://www.w3.org/2000/svg" style="fill: white">
                                        <use xlink:href="#hero-soldier-76"/>
                                    </svg>
                				</div>
                			</td>
                			<td class="Table-data u-uppercase">Soldier: 76</td>
                			<td class="Table-data u-text-right">00h 00m</td>
                			<td class="Table-data u-text-right Table-data--emphasized">10%</td>
                		</tr>
                	</tbody>
                </table>

Row Blowout

Some rows can visually break out of the table.

File location: src/assets/toolkit/styles/partials/molecules/_table.scss.

Example
As All Heroes Avg Per 10 Min League Rank
Hero Damage Done 00,000 3rd
Final Blows 0.0 12th
This Row Breakout!
Eliminations 00.0 8th
<table class="Table">
                	<thead>
                		<tr>
                			<th class="Table-header">As All Heroes</th>
                			<th class="Table-header">Avg Per 10 Min</th>
                			<th class="Table-header">League Rank</th>
                		</tr>
                	</thead>
                	<tbody>
                		<tr class="Table-row">
                			<td class="Table-data">Hero Damage Done</td>
                			<td class="Table-data">00,000</td>
                			<td class="Table-data">3rd</td>
                		</tr>
                		<tr class="Table-row">
                			<td class="Table-data">Final Blows</td>
                			<td class="Table-data">0.0</td>
                			<td class="Table-data">12th</td>
                		</tr>
                		<tr class="Table-row Table-row--breakout">
                			<td class="Table-data">This</td>
                			<td class="Table-data">Row</td>
                			<td class="Table-data">Breakout!</td>
                		</tr>
                		<tr class="Table-row">
                			<td class="Table-data">Eliminations</td>
                			<td class="Table-data">00.0</td>
                			<td class="Table-data">8th</td>
                		</tr>
                	</tbody>
                </table>

Basic (Old)

Warning: Deprecated

This component is deprecated and will be removed in a future release.

For basic styling—light padding and only horizontal dividers—add the base class .table to any <table>. It may seem super redundant, but given the widespread use of tables for other plugins like calendars and date pickers, we've opted to isolate our custom table styles.

Example
Username Date registered Role Status
Donna R. Folse 2012/05/06 Editor Active
Emily F. Burns 2011/12/01 Staff Banned
Andrew A. Stout 2010/08/21 User Inactive
Mary M. Bryan 2009/04/11 Editor Pending
Mary A. Lewis 2007/02/01 Staff Active
<table class="table">
                	<thead>
                		<tr>
                			<th>Username</th>
                			<th>Date registered</th>
                			<th>Role</th>
                			<th>Status</th>
                		</tr>
                	</thead>
                	<tbody>
                		<tr>
                			<td>Donna R. Folse</td>
                			<td>2012/05/06</td>
                			<td>Editor</td>
                			<td><span class="label label-success">Active</span></td>
                		</tr>
                		<tr>
                			<td>Emily F. Burns</td>
                			<td>2011/12/01</td>
                			<td>Staff</td>
                			<td><span class="label label-danger">Banned</span></td>
                		</tr>
                		<tr>
                			<td>Andrew A. Stout</td>
                			<td>2010/08/21</td>
                			<td>User</td>
                			<td><span class="label label-default">Inactive</span></td>
                		</tr>
                		<tr>
                			<td>Mary M. Bryan</td>
                			<td>2009/04/11</td>
                			<td>Editor</td>
                			<td><span class="label label-warning">Pending</span></td>
                		</tr>
                		<tr>
                			<td>Mary A. Lewis</td>
                			<td>2007/02/01</td>
                			<td>Staff</td>
                			<td><span class="label label-success">Active</span></td>
                		</tr>
                	</tbody>
                </table>

Striped Rows (Old)

Warning: Deprecated

This component is deprecated and will be removed in a future release.

Use .table-striped to add zebra-striping to any table row within the <tbody>.

Example
Username Date registered Role Status
Donna R. Folse 2012/05/06 Editor Active
Emily F. Burns 2011/12/01 Staff Banned
Andrew A. Stout 2010/08/21 User Inactive
Mary M. Bryan 2009/04/11 Editor Pending
Mary A. Lewis 2007/02/01 Staff Active
<table class="table table-striped">
                	<thead>
                		<tr>
                			<th>Username</th>
                			<th>Date registered</th>
                			<th>Role</th>
                			<th>Status</th>
                		</tr>
                	</thead>
                	<tbody>
                		<tr>
                			<td>Donna R. Folse</td>
                			<td>2012/05/06</td>
                			<td>Editor</td>
                			<td><span class="label label-success">Active</span></td>
                		</tr>
                		<tr>
                			<td>Emily F. Burns</td>
                			<td>2011/12/01</td>
                			<td>Staff</td>
                			<td><span class="label label-danger">Banned</span></td>
                		</tr>
                		<tr>
                			<td>Andrew A. Stout</td>
                			<td>2010/08/21</td>
                			<td>User</td>
                			<td><span class="label label-default">Inactive</span></td>
                		</tr>
                		<tr>
                			<td>Mary M. Bryan</td>
                			<td>2009/04/11</td>
                			<td>Editor</td>
                			<td><span class="label label-warning">Pending</span></td>
                		</tr>
                		<tr>
                			<td>Mary A. Lewis</td>
                			<td>2007/02/01</td>
                			<td>Staff</td>
                			<td><span class="label label-success">Active</span></td>
                		</tr>
                	</tbody>
                </table>

Bordered (Old)

Warning: Deprecated

This component is deprecated and will be removed in a future release.

Add .table-bordered for borders on all sides of the table and cells.

Example
Username Date registered Role Status
Donna R. Folse 2012/05/06 Editor Active
Emily F. Burns 2011/12/01 Staff Banned
Andrew A. Stout 2010/08/21 User Inactive
Mary M. Bryan 2009/04/11 Editor Pending
Mary A. Lewis 2007/02/01 Staff Active
<table class="table table-bordered">
                	<thead>
                		<tr>
                			<th>Username</th>
                			<th>Date registered</th>
                			<th>Role</th>
                			<th>Status</th>
                		</tr>
                	</thead>
                	<tbody>
                		<tr>
                			<td>Donna R. Folse</td>
                			<td>2012/05/06</td>
                			<td>Editor</td>
                			<td><span class="label label-success">Active</span></td>
                		</tr>
                		<tr>
                			<td>Emily F. Burns</td>
                			<td>2011/12/01</td>
                			<td>Staff</td>
                			<td><span class="label label-danger">Banned</span></td>
                		</tr>
                		<tr>
                			<td>Andrew A. Stout</td>
                			<td>2010/08/21</td>
                			<td>User</td>
                			<td><span class="label label-default">Inactive</span></td>
                		</tr>
                		<tr>
                			<td>Mary M. Bryan</td>
                			<td>2009/04/11</td>
                			<td>Editor</td>
                			<td><span class="label label-warning">Pending</span></td>
                		</tr>
                		<tr>
                			<td>Mary A. Lewis</td>
                			<td>2007/02/01</td>
                			<td>Staff</td>
                			<td><span class="label label-success">Active</span></td>
                		</tr>
                	</tbody>
                </table>

Responsive Tables (Old)

Warning: Deprecated

This component is deprecated and will be removed in a future release.

Create responsive tables by wrapping any .table in .table-responsive to make them scroll horizontally on small devices (under 768px). When viewing on anything larger than 768px wide, you will not see any difference in these tables.

Example
Username Date registered Role Status
Donna R. Folse 2012/05/06 Editor Active
Emily F. Burns 2011/12/01 Staff Banned
Andrew A. Stout 2010/08/21 User Inactive
Mary M. Bryan 2009/04/11 Editor Pending
Mary A. Lewis 2007/02/01 Staff Active
<div class="table-responsive">
                	<table class="table table-striped">
                		<thead>
                			<tr>
                				<th>Username</th>
                				<th>Date registered</th>
                				<th>Role</th>
                				<th>Status</th>
                			</tr>
                		</thead>
                		<tbody>
                			<tr>
                				<td>Donna R. Folse</td>
                				<td>2012/05/06</td>
                				<td>Editor</td>
                				<td><span class="label label-success">Active</span></td>
                			</tr>
                			<tr>
                				<td>Emily F. Burns</td>
                				<td>2011/12/01</td>
                				<td>Staff</td>
                				<td><span class="label label-danger">Banned</span></td>
                			</tr>
                			<tr>
                				<td>Andrew A. Stout</td>
                				<td>2010/08/21</td>
                				<td>User</td>
                				<td><span class="label label-default">Inactive</span></td>
                			</tr>
                			<tr>
                				<td>Mary M. Bryan</td>
                				<td>2009/04/11</td>
                				<td>Editor</td>
                				<td><span class="label label-warning">Pending</span></td>
                			</tr>
                			<tr>
                				<td>Mary A. Lewis</td>
                				<td>2007/02/01</td>
                				<td>Staff</td>
                				<td><span class="label label-success">Active</span></td>
                			</tr>
                		</tbody>
                	</table>
                </div>

Stacked (Old)

Warning: Deprecated

This component is deprecated and will be removed in a future release.

Add .table-stack for a table that will lay out in rows at small screen sizes.

Example
Username Date registered Role Status
Donna R. Folse 2012/05/06 Editor Active
Emily F. Burns 2011/12/01 Staff Banned
Andrew A. Stout 2010/08/21 User Inactive
Mary M. Bryan 2009/04/11 Editor Pending
Mary A. Lewis 2007/02/01 Staff Active
<table class="table table-stack">
                	<thead>
                		<tr>
                			<th>Username</th>
                			<th>Date registered</th>
                			<th>Role</th>
                			<th>Status</th>
                		</tr>
                	</thead>
                	<tbody>
                		<tr>
                			<td>Donna R. Folse</td>
                			<td>2012/05/06</td>
                			<td>Editor</td>
                			<td><span class="label label-success">Active</span></td>
                		</tr>
                		<tr>
                			<td>Emily F. Burns</td>
                			<td>2011/12/01</td>
                			<td>Staff</td>
                			<td><span class="label label-danger">Banned</span></td>
                		</tr>
                		<tr>
                			<td>Andrew A. Stout</td>
                			<td>2010/08/21</td>
                			<td>User</td>
                			<td><span class="label label-default">Inactive</span></td>
                		</tr>
                		<tr>
                			<td>Mary M. Bryan</td>
                			<td>2009/04/11</td>
                			<td>Editor</td>
                			<td><span class="label label-warning">Pending</span></td>
                		</tr>
                		<tr>
                			<td>Mary A. Lewis</td>
                			<td>2007/02/01</td>
                			<td>Staff</td>
                			<td><span class="label label-success">Active</span></td>
                		</tr>
                	</tbody>
                </table>

Tabs

Tabs

Basic setup for a Material Design based tab system.

File location: src/assets/toolkit/styles/partials/vendor/bootstrap/_navs.scss.

Example

Default Tabs

Default Tabs have a bottom border that extends to the right in the case that the given tabs do not take up 100% of the given space.

Example
Panel 1 - Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque nec massa turpis. Nam dignissim elit vel eros iaculis, condimentum sodales ex cursus. Suspendisse congue tellus at tellus maximus ultricies.
Panel 2 - Pellentesque nec massa turpis. Nam dignissim elit vel eros iaculis, condimentum sodales ex cursus. Suspendisse congue tellus at tellus maximus ultricies.
Panel 3 - This panel should never display, because the tab is disabled.
Panel 4 - Proin non leo vitae elit laoreet semper nec et risus. Duis id erat vel metus laoreet fermentum. In vulputate rutrum turpis non convallis. Quisque vel urna libero.
Panel 5 - Proin id turpis vel nulla euismod luctus a et massa. Sed pellentesque, nisl et pretium eleifend, felis arcu convallis diam, et ornare libero turpis et lacus. Nullam porta eleifend fermentum.
Panel 6 - Sed mauris arcu, hendrerit sit amet porta vitae, auctor at turpis. Duis in sem feugiat, ultrices leo ut, dictum nibh. Phasellus maximus interdum libero, ut ullamcorper nibh dapibus ac. Mauris ac dictum diam.
<div class="TexturedBackground" style="width: 100%; height: 100px;">
                	<div class="Tabs Background--gray">
                		<div class="Tabs-header">
                			<nav class="Tabs-bar">
                				<a href="#default-tabs-panel-1" id="default-tab-1" class="Tabs-tab Tabs-tab--active">all (300)</a>
                				<a href="#default-tabs-panel-2" id="default-tab-2" class="Tabs-tab">Interviews (45)</a>
                				<a href="#default-tabs-panel-3" id="default-tab-3" class="Tabs-tab Tabs-tab--disabled" tabindex="-1">Combine (123)</a>
                				<a href="#default-tabs-panel-4" id="default-tab-4" class="Tabs-tab">esports (56)</a>
                				<a href="#default-tabs-panel-5" id="default-tab-5" class="Tabs-tab">and (356)</a>
                				<a href="#default-tabs-panel-6" id="default-tab-6" class="Tabs-tab">here is (6)</a>
                			</nav>
                		</div>
                		<section class="Tabs-content">
                			<article id="default-tabs-panel-1" class="Tabs-panel Tabs-panel--active">Panel 1 - Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque nec massa turpis. Nam dignissim elit vel eros iaculis, condimentum sodales ex cursus. Suspendisse congue tellus at tellus maximus ultricies.</article>
                			<article id="default-tabs-panel-2" class="Tabs-panel">Panel 2 - Pellentesque nec massa turpis. Nam dignissim elit vel eros iaculis, condimentum sodales ex cursus. Suspendisse congue tellus at tellus maximus ultricies.</article>
                			<article id="default-tabs-panel-3" class="Tabs-panel">Panel 3 - This panel should never display, because the tab is disabled.</article>
                			<article id="default-tabs-panel-4" class="Tabs-panel">Panel 4 - Proin non leo vitae elit laoreet semper nec et risus. Duis id erat vel metus laoreet fermentum. In vulputate rutrum turpis non convallis. Quisque vel urna libero.</article>
                			<article id="default-tabs-panel-5" class="Tabs-panel">Panel 5 - Proin id turpis vel nulla euismod luctus a et massa. Sed pellentesque, nisl et pretium eleifend, felis arcu convallis diam, et ornare libero turpis et lacus. Nullam porta eleifend fermentum.</article>
                			<article id="default-tabs-panel-6" class="Tabs-panel">Panel 6 - Sed mauris arcu, hendrerit sit amet porta vitae, auctor at turpis. Duis in sem feugiat, ultrices leo ut, dictum nibh. Phasellus maximus interdum libero, ut ullamcorper nibh dapibus ac. Mauris ac dictum diam.</article>
                		</section>
                	</div>
                </div>

Tabs With Dark Background

--darkBackground and --rectangular modified versions have styling that stretches to the edge of the viewport. On mobile and tablet, these modified tabs are horizontally swipeable but the control chevrons do not appear.

Example
Panel 1 - Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque nec massa turpis. Nam dignissim elit vel eros iaculis, condimentum sodales ex cursus. Suspendisse congue tellus at tellus maximus ultricies.
Panel 2 - Pellentesque nec massa turpis. Nam dignissim elit vel eros iaculis, condimentum sodales ex cursus. Suspendisse congue tellus at tellus maximus ultricies.
Panel 3 - Sed mauris arcu, hendrerit sit amet porta vitae, auctor at turpis. Duis in sem feugiat, ultrices leo ut, dictum nibh. Phasellus maximus interdum libero, ut ullamcorper nibh dapibus ac. Mauris ac dictum diam.
Panel 4 - Proin non leo vitae elit laoreet semper nec et risus. Duis id erat vel metus laoreet fermentum. In vulputate rutrum turpis non convallis. Quisque vel urna libero.
Panel 5 - Proin id turpis vel nulla euismod luctus a et massa. Sed pellentesque, nisl et pretium eleifend, felis arcu convallis diam, et ornare libero turpis et lacus. Nullam porta eleifend fermentum.
Panel 6 - Sed mauris arcu, hendrerit sit amet porta vitae, auctor at turpis. Duis in sem feugiat, ultrices leo ut, dictum nibh. Phasellus maximus interdum libero, ut ullamcorper nibh dapibus ac. Mauris ac dictum diam.
Panel 7 - Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque nec massa turpis. Nam dignissim elit vel eros iaculis, condimentum sodales ex cursus. Suspendisse congue tellus at tellus maximus ultricies.
Panel 8 - Pellentesque nec massa turpis. Nam dignissim elit vel eros iaculis, condimentum sodales ex cursus. Suspendisse congue tellus at tellus maximus ultricies.
Panel 9 - Proin non leo vitae elit laoreet semper nec et risus. Duis id erat vel metus laoreet fermentum. In vulputate rutrum turpis non convallis. Quisque vel urna libero.
Panel 10 - Proin id turpis vel nulla euismod luctus a et massa. Sed pellentesque, nisl et pretium eleifend, felis arcu convallis diam, et ornare libero turpis et lacus. Nullam porta eleifend fermentum.
Panel 11 - Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque nec massa turpis. Nam dignissim elit vel eros iaculis, condimentum sodales ex cursus. Suspendisse congue tellus at tellus maximus ultricies.
Panel 12 - Pellentesque nec massa turpis. Nam dignissim elit vel eros iaculis, condimentum sodales ex cursus. Suspendisse congue tellus at tellus maximus ultricies.
Panel 13 - Sed mauris arcu, hendrerit sit amet porta vitae, auctor at turpis. Duis in sem feugiat, ultrices leo ut, dictum nibh. Phasellus maximus interdum libero, ut ullamcorper nibh dapibus ac. Mauris ac dictum diam.
Panel 14 - Proin non leo vitae elit laoreet semper nec et risus. Duis id erat vel metus laoreet fermentum. In vulputate rutrum turpis non convallis. Quisque vel urna libero.
Panel 15 - Proin id turpis vel nulla euismod luctus a et massa. Sed pellentesque, nisl et pretium eleifend, felis arcu convallis diam, et ornare libero turpis et lacus. Nullam porta eleifend fermentum.
<div class="Tabs Tabs--darkBackground">
                	<div class="Tabs-header-wrapper">
                		<div class="Tabs-header">
                			<nav class="Tabs-bar">
                				<a href="#dark-panel-1" id="dark-tab-1" class="Tabs-tab Tabs-tab--active">Tab 1</a>
                				<a href="#dark-panel-2" id="dark-tab-2" class="Tabs-tab">Tab 2</a>
                				<a href="#dark-panel-3" id="dark-tab-3" class="Tabs-tab">Tab 3</a>
                				<a href="#dark-panel-4" id="dark-tab-4" class="Tabs-tab">Tab 4</a>
                				<a href="#dark-panel-5" id="dark-tab-5" class="Tabs-tab">Tab 5</a>
                				<a href="#dark-panel-6" id="dark-tab-6" class="Tabs-tab">Tab 6</a>
                				<a href="#dark-panel-7" id="dark-tab-7" class="Tabs-tab">Tab 7</a>
                				<a href="#dark-panel-8" id="dark-tab-8" class="Tabs-tab">Tab 8</a>
                				<a href="#dark-panel-9" id="dark-tab-9" class="Tabs-tab">Tab 9</a>
                				<a href="#dark-panel-10" id="dark-tab-10" class="Tabs-tab">Tab 10</a>
                				<a href="#dark-panel-11" id="dark-tab-11" class="Tabs-tab">Tab 11</a>
                				<a href="#dark-panel-12" id="dark-tab-12" class="Tabs-tab">Tab 12</a>
                				<a href="#dark-panel-13" id="dark-tab-13" class="Tabs-tab">Tab 13</a>
                				<a href="#dark-panel-14" id="dark-tab-14" class="Tabs-tab">Tab 14</a>
                				<a href="#dark-panel-15" id="dark-tab-15" class="Tabs-tab">Tab 15</a>
                			</nav>
                		</div>
                	</div>
                	<section class="Tabs-content">
                		<article id="dark-panel-1" class="Tabs-panel Tabs-panel--active">Panel 1 - Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque nec massa turpis. Nam dignissim elit vel eros iaculis, condimentum sodales ex cursus. Suspendisse congue tellus at tellus maximus ultricies.</article>
                		<article id="dark-panel-2" class="Tabs-panel">Panel 2 - Pellentesque nec massa turpis. Nam dignissim elit vel eros iaculis, condimentum sodales ex cursus. Suspendisse congue tellus at tellus maximus ultricies.</article>
                		<article id="dark-panel-3" class="Tabs-panel">Panel 3 - Sed mauris arcu, hendrerit sit amet porta vitae, auctor at turpis. Duis in sem feugiat, ultrices leo ut, dictum nibh. Phasellus maximus interdum libero, ut ullamcorper nibh dapibus ac. Mauris ac dictum diam.</article>
                		<article id="dark-panel-4" class="Tabs-panel">Panel 4 - Proin non leo vitae elit laoreet semper nec et risus. Duis id erat vel metus laoreet fermentum. In vulputate rutrum turpis non convallis. Quisque vel urna libero.</article>
                		<article id="dark-panel-5" class="Tabs-panel">Panel 5 - Proin id turpis vel nulla euismod luctus a et massa. Sed pellentesque, nisl et pretium eleifend, felis arcu convallis diam, et ornare libero turpis et lacus. Nullam porta eleifend fermentum.</article>
                		<article id="dark-panel-6" class="Tabs-panel">Panel 6 - Sed mauris arcu, hendrerit sit amet porta vitae, auctor at turpis. Duis in sem feugiat, ultrices leo ut, dictum nibh. Phasellus maximus interdum libero, ut ullamcorper nibh dapibus ac. Mauris ac dictum diam.</article>
                		<article id="dark-panel-7" class="Tabs-panel">Panel 7 - Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque nec massa turpis. Nam dignissim elit vel eros iaculis, condimentum sodales ex cursus. Suspendisse congue tellus at tellus maximus ultricies.</article>
                		<article id="dark-panel-8" class="Tabs-panel">Panel 8 - Pellentesque nec massa turpis. Nam dignissim elit vel eros iaculis, condimentum sodales ex cursus. Suspendisse congue tellus at tellus maximus ultricies.</article>
                		<article id="dark-panel-9" class="Tabs-panel">Panel 9 - Proin non leo vitae elit laoreet semper nec et risus. Duis id erat vel metus laoreet fermentum. In vulputate rutrum turpis non convallis. Quisque vel urna libero.</article>
                		<article id="dark-panel-10" class="Tabs-panel">Panel 10 - Proin id turpis vel nulla euismod luctus a et massa. Sed pellentesque, nisl et pretium eleifend, felis arcu convallis diam, et ornare libero turpis et lacus. Nullam porta eleifend fermentum.</article>
                		<article id="dark-panel-11" class="Tabs-panel">Panel 11 - Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque nec massa turpis. Nam dignissim elit vel eros iaculis, condimentum sodales ex cursus. Suspendisse congue tellus at tellus maximus ultricies.</article>
                		<article id="dark-panel-12" class="Tabs-panel">Panel 12 - Pellentesque nec massa turpis. Nam dignissim elit vel eros iaculis, condimentum sodales ex cursus. Suspendisse congue tellus at tellus maximus ultricies.</article>
                		<article id="dark-panel-13" class="Tabs-panel">Panel 13 - Sed mauris arcu, hendrerit sit amet porta vitae, auctor at turpis. Duis in sem feugiat, ultrices leo ut, dictum nibh. Phasellus maximus interdum libero, ut ullamcorper nibh dapibus ac. Mauris ac dictum diam.</article>
                		<article id="dark-panel-14" class="Tabs-panel">Panel 14 - Proin non leo vitae elit laoreet semper nec et risus. Duis id erat vel metus laoreet fermentum. In vulputate rutrum turpis non convallis. Quisque vel urna libero.</article>
                		<article id="dark-panel-15" class="Tabs-panel">Panel 15 - Proin id turpis vel nulla euismod luctus a et massa. Sed pellentesque, nisl et pretium eleifend, felis arcu convallis diam, et ornare libero turpis et lacus. Nullam porta eleifend fermentum.</article>
                	</section>
                </div>

Rectangular Tabs

Example
Panel 1 - Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque nec massa turpis. Nam dignissim elit vel eros iaculis, condimentum sodales ex cursus. Suspendisse congue tellus at tellus maximus ultricies.
Panel 2 - Pellentesque nec massa turpis. Nam dignissim elit vel eros iaculis, condimentum sodales ex cursus. Suspendisse congue tellus at tellus maximus ultricies.
Panel 3 - Sed mauris arcu, hendrerit sit amet porta vitae, auctor at turpis. Duis in sem feugiat, ultrices leo ut, dictum nibh. Phasellus maximus interdum libero, ut ullamcorper nibh dapibus ac. Mauris ac dictum diam.
Panel 4 - Proin non leo vitae elit laoreet semper nec et risus. Duis id erat vel metus laoreet fermentum. In vulputate rutrum turpis non convallis. Quisque vel urna libero.
Panel 5 - Proin id turpis vel nulla euismod luctus a et massa. Sed pellentesque, nisl et pretium eleifend, felis arcu convallis diam, et ornare libero turpis et lacus. Nullam porta eleifend fermentum.
Panel 6 - Sed mauris arcu, hendrerit sit amet porta vitae, auctor at turpis. Duis in sem feugiat, ultrices leo ut, dictum nibh. Phasellus maximus interdum libero, ut ullamcorper nibh dapibus ac. Mauris ac dictum diam.
Panel 7 - Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque nec massa turpis. Nam dignissim elit vel eros iaculis, condimentum sodales ex cursus. Suspendisse congue tellus at tellus maximus ultricies.
Panel 8 - Pellentesque nec massa turpis. Nam dignissim elit vel eros iaculis, condimentum sodales ex cursus. Suspendisse congue tellus at tellus maximus ultricies.
Panel 9 - Proin non leo vitae elit laoreet semper nec et risus. Duis id erat vel metus laoreet fermentum. In vulputate rutrum turpis non convallis. Quisque vel urna libero.
Panel 10 - Proin id turpis vel nulla euismod luctus a et massa. Sed pellentesque, nisl et pretium eleifend, felis arcu convallis diam, et ornare libero turpis et lacus. Nullam porta eleifend fermentum.
Panel 11 - Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque nec massa turpis. Nam dignissim elit vel eros iaculis, condimentum sodales ex cursus. Suspendisse congue tellus at tellus maximus ultricies.
Panel 12 - Pellentesque nec massa turpis. Nam dignissim elit vel eros iaculis, condimentum sodales ex cursus. Suspendisse congue tellus at tellus maximus ultricies.
Panel 13 - Sed mauris arcu, hendrerit sit amet porta vitae, auctor at turpis. Duis in sem feugiat, ultrices leo ut, dictum nibh. Phasellus maximus interdum libero, ut ullamcorper nibh dapibus ac. Mauris ac dictum diam.
Panel 14 - Proin non leo vitae elit laoreet semper nec et risus. Duis id erat vel metus laoreet fermentum. In vulputate rutrum turpis non convallis. Quisque vel urna libero.
Panel 15 - Proin id turpis vel nulla euismod luctus a et massa. Sed pellentesque, nisl et pretium eleifend, felis arcu convallis diam, et ornare libero turpis et lacus. Nullam porta eleifend fermentum.
<div class="Tabs Tabs--rectangular">
                	<div class="Tabs-header-wrapper">
                		<div class="Tabs-header">
                			<nav class="Tabs-bar">
                				<a href="#rectangular-tabs-panel-1" id="rectangular-tab-1" class="Tabs-tab Tabs-tab--active">Tab 1</a>
                				<a href="#rectangular-tabs-panel-2" id="rectangular-tab-2" class="Tabs-tab">Tab 2</a>
                				<a href="#rectangular-tabs-panel-3" id="rectangular-tab-3" class="Tabs-tab">Tab 3</a>
                				<a href="#rectangular-tabs-panel-4" id="rectangular-tab-4" class="Tabs-tab Tabs-tab--disabled">Tab 4</a>
                				<a href="#rectangular-tabs-panel-5" id="rectangular-tab-5" class="Tabs-tab">Tab 5</a>
                				<a href="#rectangular-tabs-panel-6" id="rectangular-tab-6" class="Tabs-tab">Tab 6</a>
                				<a href="#rectangular-tabs-panel-7" id="rectangular-tab-7" class="Tabs-tab">Tab 7</a>
                				<a href="#rectangular-tabs-panel-8" id="rectangular-tab-8" class="Tabs-tab">Tab 8</a>
                				<a href="#rectangular-tabs-panel-9" id="rectangular-tab-9" class="Tabs-tab">Tab 9</a>
                				<a href="#rectangular-tabs-panel-10" id="rectangular-tab-10" class="Tabs-tab">Tab 10</a>
                				<a href="#rectangular-tabs-panel-11" id="rectangular-tab-11" class="Tabs-tab">Tab 11</a>
                				<a href="#rectangular-tabs-panel-12" id="rectangular-tab-12" class="Tabs-tab">Tab 12</a>
                				<a href="#rectangular-tabs-panel-13" id="rectangular-tab-13" class="Tabs-tab">Tab 13</a>
                				<a href="#rectangular-tabs-panel-14" id="rectangular-tab-14" class="Tabs-tab">Tab 14</a>
                				<a href="#rectangular-tabs-panel-15" id="rectangular-tab-15" class="Tabs-tab">Tab 15</a>
                			</nav>
                		</div>
                	</div>
                	<section class="Tabs-content">
                		<article id="rectangular-tabs-panel-1" class="Tabs-panel Tabs-panel--active">Panel 1 - Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque nec massa turpis. Nam dignissim elit vel eros iaculis, condimentum sodales ex cursus. Suspendisse congue tellus at tellus maximus ultricies.</article>
                		<article id="rectangular-tabs-panel-2" class="Tabs-panel">Panel 2 - Pellentesque nec massa turpis. Nam dignissim elit vel eros iaculis, condimentum sodales ex cursus. Suspendisse congue tellus at tellus maximus ultricies.</article>
                		<article id="rectangular-tabs-panel-3" class="Tabs-panel">Panel 3 - Sed mauris arcu, hendrerit sit amet porta vitae, auctor at turpis. Duis in sem feugiat, ultrices leo ut, dictum nibh. Phasellus maximus interdum libero, ut ullamcorper nibh dapibus ac. Mauris ac dictum diam.</article>
                		<article id="rectangular-tabs-panel-4" class="Tabs-panel">Panel 4 - Proin non leo vitae elit laoreet semper nec et risus. Duis id erat vel metus laoreet fermentum. In vulputate rutrum turpis non convallis. Quisque vel urna libero.</article>
                		<article id="rectangular-tabs-panel-5" class="Tabs-panel">Panel 5 - Proin id turpis vel nulla euismod luctus a et massa. Sed pellentesque, nisl et pretium eleifend, felis arcu convallis diam, et ornare libero turpis et lacus. Nullam porta eleifend fermentum.</article>
                		<article id="rectangular-tabs-panel-6" class="Tabs-panel">Panel 6 - Sed mauris arcu, hendrerit sit amet porta vitae, auctor at turpis. Duis in sem feugiat, ultrices leo ut, dictum nibh. Phasellus maximus interdum libero, ut ullamcorper nibh dapibus ac. Mauris ac dictum diam.</article>
                		<article id="rectangular-tabs-panel-7" class="Tabs-panel">Panel 7 - Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque nec massa turpis. Nam dignissim elit vel eros iaculis, condimentum sodales ex cursus. Suspendisse congue tellus at tellus maximus ultricies.</article>
                		<article id="rectangular-tabs-panel-8" class="Tabs-panel">Panel 8 - Pellentesque nec massa turpis. Nam dignissim elit vel eros iaculis, condimentum sodales ex cursus. Suspendisse congue tellus at tellus maximus ultricies.</article>
                		<article id="rectangular-tabs-panel-9" class="Tabs-panel">Panel 9 - Proin non leo vitae elit laoreet semper nec et risus. Duis id erat vel metus laoreet fermentum. In vulputate rutrum turpis non convallis. Quisque vel urna libero.</article>
                		<article id="rectangular-tabs-panel-10" class="Tabs-panel">Panel 10 - Proin id turpis vel nulla euismod luctus a et massa. Sed pellentesque, nisl et pretium eleifend, felis arcu convallis diam, et ornare libero turpis et lacus. Nullam porta eleifend fermentum.</article>
                		<article id="rectangular-tabs-panel-11" class="Tabs-panel">Panel 11 - Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque nec massa turpis. Nam dignissim elit vel eros iaculis, condimentum sodales ex cursus. Suspendisse congue tellus at tellus maximus ultricies.</article>
                		<article id="rectangular-tabs-panel-12" class="Tabs-panel">Panel 12 - Pellentesque nec massa turpis. Nam dignissim elit vel eros iaculis, condimentum sodales ex cursus. Suspendisse congue tellus at tellus maximus ultricies.</article>
                		<article id="rectangular-tabs-panel-13" class="Tabs-panel">Panel 13 - Sed mauris arcu, hendrerit sit amet porta vitae, auctor at turpis. Duis in sem feugiat, ultrices leo ut, dictum nibh. Phasellus maximus interdum libero, ut ullamcorper nibh dapibus ac. Mauris ac dictum diam.</article>
                		<article id="rectangular-tabs-panel-14" class="Tabs-panel">Panel 14 - Proin non leo vitae elit laoreet semper nec et risus. Duis id erat vel metus laoreet fermentum. In vulputate rutrum turpis non convallis. Quisque vel urna libero.</article>
                		<article id="rectangular-tabs-panel-15" class="Tabs-panel">Panel 15 - Proin id turpis vel nulla euismod luctus a et massa. Sed pellentesque, nisl et pretium eleifend, felis arcu convallis diam, et ornare libero turpis et lacus. Nullam porta eleifend fermentum.</article>
                	</section>
                </div>

Minimal Tabs

Default Tabs have a bottom border that extends to the right in the case that the given tabs do not take up 100% of the given space.

Example
Panel 1 - Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque nec massa turpis. Nam dignissim elit vel eros iaculis, condimentum sodales ex cursus. Suspendisse congue tellus at tellus maximus ultricies.
Panel 2 - Pellentesque nec massa turpis. Nam dignissim elit vel eros iaculis, condimentum sodales ex cursus. Suspendisse congue tellus at tellus maximus ultricies.
Panel 3 - This panel should never display, because the tab is disabled.
Panel 4 - Proin non leo vitae elit laoreet semper nec et risus. Duis id erat vel metus laoreet fermentum. In vulputate rutrum turpis non convallis. Quisque vel urna libero.
Panel 5 - Proin id turpis vel nulla euismod luctus a et massa. Sed pellentesque, nisl et pretium eleifend, felis arcu convallis diam, et ornare libero turpis et lacus. Nullam porta eleifend fermentum.
Panel 6 - Sed mauris arcu, hendrerit sit amet porta vitae, auctor at turpis. Duis in sem feugiat, ultrices leo ut, dictum nibh. Phasellus maximus interdum libero, ut ullamcorper nibh dapibus ac. Mauris ac dictum diam.
<div class="Tabs Tabs--minimal">
                	<div class="Tabs-header">
                		<nav class="Tabs-bar">
                			<a href="#minimal-tabs-panel-1" id="minimal-tab-1" class="Tabs-tab Tabs-tab--active">all (300)</a>
                			<a href="#minimal-tabs-panel-2" id="minimal-tab-2" class="Tabs-tab">Interviews (45)</a>
                			<a href="#minimal-tabs-panel-3" id="minimal-tab-3" class="Tabs-tab Tabs-tab--disabled" tabindex="-1">Combine (123)</a>
                			<a href="#minimal-tabs-panel-4" id="minimal-tab-4" class="Tabs-tab">esports (56)</a>
                			<a href="#minimal-tabs-panel-5" id="minimal-tab-5" class="Tabs-tab">and (356)</a>
                			<a href="#minimal-tabs-panel-6" id="minimal-tab-6" class="Tabs-tab">here is (6)</a>
                		</nav>
                	</div>
                	<section class="Tabs-content">
                		<article id="minimal-tabs-panel-1" class="Tabs-panel Tabs-panel--active">Panel 1 - Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque nec massa turpis. Nam dignissim elit vel eros iaculis, condimentum sodales ex cursus. Suspendisse congue tellus at tellus maximus ultricies.</article>
                		<article id="minimal-tabs-panel-2" class="Tabs-panel">Panel 2 - Pellentesque nec massa turpis. Nam dignissim elit vel eros iaculis, condimentum sodales ex cursus. Suspendisse congue tellus at tellus maximus ultricies.</article>
                		<article id="minimal-tabs-panel-3" class="Tabs-panel">Panel 3 - This panel should never display, because the tab is disabled.</article>
                		<article id="minimal-tabs-panel-4" class="Tabs-panel">Panel 4 - Proin non leo vitae elit laoreet semper nec et risus. Duis id erat vel metus laoreet fermentum. In vulputate rutrum turpis non convallis. Quisque vel urna libero.</article>
                		<article id="minimal-tabs-panel-5" class="Tabs-panel">Panel 5 - Proin id turpis vel nulla euismod luctus a et massa. Sed pellentesque, nisl et pretium eleifend, felis arcu convallis diam, et ornare libero turpis et lacus. Nullam porta eleifend fermentum.</article>
                		<article id="minimal-tabs-panel-6" class="Tabs-panel">Panel 6 - Sed mauris arcu, hendrerit sit amet porta vitae, auctor at turpis. Duis in sem feugiat, ultrices leo ut, dictum nibh. Phasellus maximus interdum libero, ut ullamcorper nibh dapibus ac. Mauris ac dictum diam.</article>
                	</section>
                </div>

Responsive Tabs

Responsive tabs will try to maintain all tabs inline. When it overflows the container, it'll switch to a dropdown layout with a new element to attach an event trigger to.

Example
Standard View
Overflowed Modifier
Overflowed Modifier and Active
<h6>Standard View</h6>
                <div class="TexturedBackground" style="width: 100%; height: 200px; display: block;">
                	<div class="TabsResponsive-wrapper">
                		<div class="Container Container--wide">
                			<div class="TabsResponsive">
                				<div class="Tabs-toggle">
                					<a href="javascript:void(0)" class="Tabs-tab-content">
                                        <svg class="Icon" xmlns="http://www.w3.org/2000/svg">
                                            <use xlink:href="#icon-chevron-down"/>
                                        </svg>
                                        Toggle
                                    </a>
                				</div>
                				<div class="Tabs-list">
                					<div class="Tabs-tab">
                						<a href="javascript:void(0)" class="Tabs-tab-content">All</a>
                					</div>
                					<div class="Tabs-tab Tabs-tab--active">
                						<a href="javascript:void(0)" class="Tabs-tab-content">Interviews</a>
                					</div>
                					<div class="Tabs-tab">
                						<a href="javascript:void(0)" class="Tabs-tab-content">Esports</a>
                					</div>
                				</div>
                			</div>
                		</div>
                	</div>
                </div>
                
                <h6>Overflowed Modifier</h6>
                <div style="width: 300px">
                	<div class="TabsResponsive is-overflowed">
                		<div class="Tabs-toggle">
                			<a href="javascript:void(0)" class="Tabs-tab-content">
                                <svg class="Icon" xmlns="http://www.w3.org/2000/svg">
                                    <use xlink:href="#icon-chevron-down"/>
                                </svg>
                                Toggle
                            </a>
                		</div>
                		<div class="Tabs-list">
                			<div class="Tabs-tab">
                				<a href="javascript:void(0)" class="Tabs-tab-content">All</a>
                			</div>
                			<div class="Tabs-tab Tabs-tab--active">
                				<a href="javascript:void(0)" class="Tabs-tab-content">Interviews</a>
                			</div>
                			<div class="Tabs-tab">
                				<a href="javascript:void(0)" class="Tabs-tab-content">Esports</a>
                			</div>
                		</div>
                	</div>
                </div>
                
                <h6>Overflowed Modifier and Active</h6>
                <div style="width: 300px">
                	<div class="TabsResponsive is-overflowed is-active">
                		<div class="Tabs-toggle">
                			<a href="javascript:void(0)" class="Tabs-tab-content">
                                <svg class="Icon" xmlns="http://www.w3.org/2000/svg">
                                    <use xlink:href="#icon-chevron-down"/>
                                </svg>
                                Toggle
                            </a>
                		</div>
                		<div class="Tabs-list">
                			<div class="Tabs-tab">
                				<a href="javascript:void(0)" class="Tabs-tab-content">All</a>
                			</div>
                			<div class="Tabs-tab Tabs-tab--active">
                				<a href="javascript:void(0)" class="Tabs-tab-content">Interviews</a>
                			</div>
                			<div class="Tabs-tab">
                				<a href="javascript:void(0)" class="Tabs-tab-content">Esports</a>
                			</div>
                		</div>
                	</div>
                </div>

Tags

Tag component for labeling, sorting, filtering, etc.

File location: src/assets/toolkit/styles/partials/molecules/_tags.scss.

Example
Filters:
Tag
Tag
Tag
Tag
Tag
Tag
Tag
<div class="Tags">
        	<div class="Tags-block">
        		<div class="Tags-label">Filters:</div>
        	</div>
        	<div class="Tags-block">
        		<div class="Tags-tag">
        			<span class="Tags-text">Tag</span>
        			<button class="Tags-cancel">
                        <svg xmlns="http://www.w3.org/2000/svg" class="Icon Tags-icon">
                            <use xlink:href="#icon-close"/>
                        </svg>
                    </button>
        		</div>
        
        		<div class="Tags-tag">
        			<span class="Tags-text">Tag</span>
        			<button class="Tags-cancel">
                        <svg xmlns="http://www.w3.org/2000/svg" class="Icon Tags-icon">
                            <use xlink:href="#icon-close"/>
                        </svg>
                    </button>
        		</div>
        
        		<div class="Tags-tag">
        			<span class="Tags-text">Tag</span>
        			<button class="Tags-cancel">
                        <svg xmlns="http://www.w3.org/2000/svg" class="Icon Tags-icon">
                            <use xlink:href="#icon-close"/>
                        </svg>
                    </button>
        		</div>
        
        		<div class="Tags-tag">
        			<span class="Tags-text">Tag</span>
        			<button class="Tags-cancel">
                        <svg xmlns="http://www.w3.org/2000/svg" class="Icon Tags-icon">
                            <use xlink:href="#icon-close"/>
                        </svg>
                    </button>
        		</div>
        
        		<div class="Tags-tag">
        			<span class="Tags-text">Tag</span>
        			<button class="Tags-cancel">
                        <svg xmlns="http://www.w3.org/2000/svg" class="Icon Tags-icon">
                            <use xlink:href="#icon-close"/>
                        </svg>
                    </button>
        		</div>
        
        		<div class="Tags-tag">
        			<span class="Tags-text">Tag</span>
        			<button class="Tags-cancel">
                        <svg xmlns="http://www.w3.org/2000/svg" class="Icon Tags-icon">
                            <use xlink:href="#icon-close"/>
                        </svg>
                    </button>
        		</div>
        
        		<div class="Tags-tag">
        			<span class="Tags-text">Tag</span>
        			<button class="Tags-cancel">
                        <svg xmlns="http://www.w3.org/2000/svg" class="Icon Tags-icon">
                            <use xlink:href="#icon-close"/>
                        </svg>
                    </button>
        		</div>
        	</div>
        </div>

Team Label

Team Label

Displays team label with or without scores.

File location: src/assets/toolkit/styles/materials/02-molecules/_team-label.scss.

Example

Default Team Label

Example
12-6
<div class="TeamLabel">
                	<div class="TeamLabel-block">
                		<svg xmlns="http://www.w3.org/2000/svg" class="TeamLabel-logo">
                            <use xlink:href="#icon-team-fallback"/>
                        </svg>
                	</div>
                	<div class="TeamLabel-info">
                		<div class="TeamLabel-name hidden-sm hidden-xs">Team Name</div>
                		<div class="TeamLabel-name hidden-md hidden-lg">TEAM1</div>
                		<div class="TeamLabel-stat">12-6</div>
                	</div>
                </div>

Without Stat Block

Example
<div class="TeamLabel">
                	<div class="TeamLabel-block">
                		<svg xmlns="http://www.w3.org/2000/svg" class="TeamLabel-logo">
                            <use xlink:href="#icon-team-fallback"/>
                        </svg>
                	</div>
                	<div class="TeamLabel-info TeamLabel-info--noScore">
                		<div class="TeamLabel-name hidden-sm hidden-xs">Team Name</div>
                		<div class="TeamLabel-name hidden-md hidden-lg">TEAM1</div>
                	</div>
                </div>

Centered

Example
12-6
<div class="TeamLabel TeamLabel--centered">
                	<div class="TeamLabel-block">
                		<svg xmlns="http://www.w3.org/2000/svg" class="TeamLabel-logo">
                            <use xlink:href="#icon-team-fallback"/>
                        </svg>
                	</div>
                	<div class="TeamLabel-info">
                		<div class="TeamLabel-name hidden-sm hidden-xs">Team Name</div>
                		<div class="TeamLabel-name hidden-md hidden-lg">TEAM1</div>
                		<div class="TeamLabel-stat">12-6</div>
                	</div>
                </div>

Reverse

Example
<div class="TeamLabel TeamLabel--reverse">
                	<div class="TeamLabel-block">
                		<svg xmlns="http://www.w3.org/2000/svg" class="TeamLabel-logo">
                            <use xlink:href="#icon-team-fallback"/>
                        </svg>
                	</div>
                	<span class="TeamLabel-info TeamLabel-info--noScore">
                        <div class="TeamLabel-name hidden-sm hidden-xs">Team Name</div>
                        <div class="TeamLabel-name hidden-md hidden-lg">TEAM1</div>
                    </span>
                </div>

Horizontal Stat

Example
12
6
<div class="TeamLabel TeamLabel--horizontalStat">
                	<div class="TeamLabel-block">
                		<svg xmlns="http://www.w3.org/2000/svg" class="TeamLabel-logo">
                            <use xlink:href="#icon-team-fallback"/>
                        </svg>
                	</div>
                	<div class="TeamLabel-stat">
                		12
                	</div>
                	<div class="TeamLabel-info TeamLabel-info--noScore">
                		<div class="TeamLabel-name hidden-sm hidden-xs">Team Name</div>
                		<div class="TeamLabel-name hidden-md hidden-lg">TEAM1</div>
                	</div>
                	<div class="TeamLabel-stat">
                		6
                	</div>
                </div>

Small

Example
12-6
<div class="TeamLabel TeamLabel--small">
                	<div class="TeamLabel-block">
                		<svg xmlns="http://www.w3.org/2000/svg" class="TeamLabel-logo">
                            <use xlink:href="#icon-team-fallback"/>
                        </svg>
                	</div>
                	<div class="TeamLabel-info">
                		<div class="TeamLabel-name hidden-sm hidden-xs">TEAM1</div>
                		<div class="TeamLabel-name hidden-md hidden-lg">TEAM2</div>
                		<div class="TeamLabel-stat">12-6</div>
                	</div>
                </div>

Inline

Example
12-6
<div class="TeamLabel TeamLabel--inline TeamLabel--small">
                	<div class="TeamLabel-block">
                		<svg xmlns="http://www.w3.org/2000/svg" class="TeamLabel-logo">
                            <use xlink:href="#icon-team-fallback"/>
                        </svg>
                	</div>
                	<div class="TeamLabel-info">
                		<div class="TeamLabel-name hidden-sm hidden-xs">TEAM1</div>
                		<div class="TeamLabel-name hidden-md hidden-lg">TEAM2</div>
                		<div class="TeamLabel-stat">12-6</div>
                	</div>
                </div>

Text Blocks

Text Blocks

Generic text block for descriptive text. File location: src/assets/toolkit/styles/materials/molecules/_text-block.scss.

Example

Default Text Block

Example

Default TextBlock

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

<div class="TextBlock">
                	<h1 class="TextBlock-title">Default TextBlock</h1>
                	<div class="TextBlock-content">
                		<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor
                			in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
                		</p>
                	</div>
                </div>

Text Block List

When two (or more) .TextBlocks are adjacent to one another, some extra padding is adding for spacing purposes.

Example

Default TextBlock

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

Following Default TextBlock

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

<div class="TextBlock">
                	<h1 class="TextBlock-title">Default TextBlock</h1>
                	<div class="TextBlock-content">
                		<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor
                			in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
                		</p>
                	</div>
                </div>
                <div class="TextBlock">
                	<h1 class="TextBlock-title">Following Default TextBlock</h1>
                	<div class="TextBlock-content">
                		<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor
                			in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
                		</p>
                	</div>
                </div>

Text Block With Smaller Title

Example

Smaller Title for TextBlock

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

<div class="TextBlock">
                	<h1 class="TextBlock-title TextBlock-title--sm">Smaller Title for TextBlock</h1>
                	<div class="TextBlock-content">
                		<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor
                			in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
                		</p>
                	</div>
                </div>

Text Block With Custom Spacing

.TextBlocks have all of the standard spacing modifiers on the -title and -content elements as modifiers.

Example

Default TextBlock

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

<div class="TextBlock">
                	<h1 class="TextBlock-title TextBlock-title--large">Default TextBlock</h1>
                	<div class="TextBlock-content TextBlock-content--large">
                		<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor
                			in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
                		</p>
                	</div>
                </div>

Toggle

A custom toggle. File location: src/assets/toolkit/styles/partials/molecules/_toggle.scss.

Example
Option 1
Option 2
<div class="Toggle js-checkbox-toggle">
        	<div class="Toggle-block">
        		<span class="Toggle-label js-checkbox-toggle-label is-active">Option 1</span>
        	</div>
        	<div class="Toggle-block">
        		<label class="Toggle-checkboxLabel"> <input class="Toggle-checkbox" name="checkbox" type="checkbox">
                    <span class="Toggle-fauxCheckbox"></span> </label>
        	</div>
        	<div class="Toggle-block">
        		<span class="Toggle-label js-checkbox-toggle-label">Option 2</span>
        	</div>
        </div>

Videos

Example

Widget Match

Widget Match

Displays a day's worth of matches in a condensed format. There are modifiers for --current and --past

File location: src/assets/toolkit/styles/materials/molecules/_widget-match.scss.

Example

Default Upcoming Match

Example
5:00 pm
1/10
tea --
tea --
<div class="WidgetMatch ContentBox ContentBox--no-shadow">
                	<div class="WidgetMatch-header">
                		<div class="WidgetMatch-time u-uppercase">
                			5:00 pm
                		</div>
                		<div class="WidgetMatch-date u-uppercase">
                			1/10
                		</div>
                	</div>
                	<div class="WidgetMatch-team TeamLabel">
                		<div class="TeamLabel-block">
                			<svg xmlns="http://www.w3.org/2000/svg" class="TeamLabel-logo">
                                <use xlink:href="#icon-team-fallback"/>
                            </svg>
                		</div>
                		<div class="TeamLabel-info">
                			<span class="TeamLabel-name u-uppercase">tea</span>
                			<span class="TeamLabel-stat">--</span>
                		</div>
                	</div>
                	<div class="WidgetMatch-team TeamLabel">
                		<div class="TeamLabel-block">
                			<svg xmlns="http://www.w3.org/2000/svg" class="TeamLabel-logo">
                                <use xlink:href="#icon-team-fallback"/>
                            </svg>
                		</div>
                		<div class="TeamLabel-info">
                			<span class="TeamLabel-name u-uppercase">tea</span>
                			<span class="TeamLabel-stat">--</span>
                		</div>
                	</div>
                </div>

Live Modifier

Example
live now
game 2
team name here 0
team name here 2
<div class="WidgetMatch WidgetMatch--live ContentBox ContentBox--no-shadow">
                	<div class="WidgetMatch-header">
                		<div class="WidgetMatch-time WidgetMatch-time--now u-uppercase u-bold">
                			live now
                		</div>
                		<div class="WidgetMatch-game u-capitalize">
                			game 2
                		</div>
                	</div>
                	<div class="WidgetMatch-team TeamLabel">
                		<div class="TeamLabel-block">
                			<svg xmlns="http://www.w3.org/2000/svg" class="TeamLabel-logo">
                                <use xlink:href="#icon-team-fallback"/>
                            </svg>
                		</div>
                		<div class="TeamLabel-info">
                			<span class="TeamLabel-name u-capitalize">team name here</span>
                			<span class="TeamLabel-stat">0</span>
                		</div>
                	</div>
                	<div class="WidgetMatch-team TeamLabel">
                		<div class="TeamLabel-block">
                			<svg xmlns="http://www.w3.org/2000/svg" class="TeamLabel-logo">
                                <use xlink:href="#icon-team-fallback"/>
                            </svg>
                		</div>
                		<div class="TeamLabel-info">
                			<span class="TeamLabel-name u-capitalize">team name here</span>
                			<span class="TeamLabel-stat">2</span>
                		</div>
                	</div>
                </div>

Completed Modifier

Example
5:00 pm
1/10
tea 0
tea 4
<div class="WidgetMatch WidgetMatch--completed ContentBox ContentBox--no-shadow">
                	<div class="WidgetMatch-header">
                		<div class="WidgetMatch-time u-uppercase">
                			5:00 pm
                		</div>
                		<div class="WidgetMatch-date u-uppercase">
                			1/10
                		</div>
                	</div>
                	<div class="WidgetMatch-team TeamLabel">
                		<div class="TeamLabel-block">
                			<svg xmlns="http://www.w3.org/2000/svg" class="TeamLabel-logo">
                                <use xlink:href="#icon-team-fallback"/>
                            </svg>
                		</div>
                		<div class="TeamLabel-info">
                			<span class="TeamLabel-name u-uppercase">tea</span>
                			<span class="TeamLabel-stat">0</span>
                		</div>
                	</div>
                	<div class="WidgetMatch-team WidgetMatch-team--winner TeamLabel">
                		<div class="TeamLabel-block">
                			<svg xmlns="http://www.w3.org/2000/svg" class="TeamLabel-logo">
                                <use xlink:href="#icon-team-fallback"/>
                            </svg>
                		</div>
                		<div class="TeamLabel-info is-winner">
                			<span class="TeamLabel-name u-uppercase">tea</span>
                			<span class="TeamLabel-stat">4</span>
                		</div>
                	</div>
                </div>