Molecules



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>

Card Group

Basic

Cards can be organized into groups, allowing for advanced functionality depending on the purpose. As Cards will expand to fill their space, a CardGroup can provide structure to lay out collections of cards appropriately. The most core grouping provides a basic grid where the number of items per row will not decrease as the screen size decreases.

Example
  • Card image cap

    Player Name

  • Card image cap

    Player Name

  • Card image cap

    Player Name

  • Card image cap

    Player Name

  • Card image cap

    Player Name

  • Card image cap

    Player Name

  • Card image cap

    Player Name

<ul class="CardGroup">
                	<li class="CardGroup-card">
                		<div class="Card Card--compact">
                			<div class="Card-img--top AspectRatio AspectRatio--16x9">
                				<img class="AspectRatio-subject" src="http://placehold.it/300x169" alt="Card image cap">
                			</div>
                
                			<div class="Card-body">
                				<h1 class="Card-title u-text-center">Player Name</h1>
                			</div>
                		</div>
                	</li>
                	<li class="CardGroup-card">
                		<div class="Card Card--compact">
                			<div class="Card-img--top AspectRatio AspectRatio--16x9">
                				<img class="AspectRatio-subject" src="http://placehold.it/300x169" alt="Card image cap">
                			</div>
                
                			<div class="Card-body">
                				<h1 class="Card-title u-text-center">Player Name</h1>
                			</div>
                		</div>
                	</li>
                	<li class="CardGroup-card">
                		<div class="Card Card--compact">
                			<div class="Card-img--top AspectRatio AspectRatio--16x9">
                				<img class="AspectRatio-subject" src="http://placehold.it/300x169" alt="Card image cap">
                			</div>
                
                			<div class="Card-body">
                				<h1 class="Card-title u-text-center">Player Name</h1>
                			</div>
                		</div>
                	</li>
                	<li class="CardGroup-card">
                		<div class="Card Card--compact">
                			<div class="Card-img--top AspectRatio AspectRatio--16x9">
                				<img class="AspectRatio-subject" src="http://placehold.it/300x169" alt="Card image cap">
                			</div>
                
                			<div class="Card-body">
                				<h1 class="Card-title u-text-center">Player Name</h1>
                			</div>
                		</div>
                	</li>
                	<li class="CardGroup-card">
                		<div class="Card Card--compact">
                			<div class="Card-img--top AspectRatio AspectRatio--16x9">
                				<img class="AspectRatio-subject" src="http://placehold.it/300x169" alt="Card image cap">
                			</div>
                
                			<div class="Card-body">
                				<h1 class="Card-title u-text-center">Player Name</h1>
                			</div>
                		</div>
                	</li>
                	<li class="CardGroup-card">
                		<div class="Card Card--compact">
                			<div class="Card-img--top AspectRatio AspectRatio--16x9">
                				<img class="AspectRatio-subject" src="http://placehold.it/300x169" alt="Card image cap">
                			</div>
                
                			<div class="Card-body">
                				<h1 class="Card-title u-text-center">Player Name</h1>
                			</div>
                		</div>
                	</li>
                	<li class="CardGroup-card">
                		<div class="Card Card--compact">
                			<div class="Card-img--top AspectRatio AspectRatio--16x9">
                				<img class="AspectRatio-subject" src="http://placehold.it/300x169" alt="Card image cap">
                			</div>
                
                			<div class="Card-body">
                				<h1 class="Card-title u-text-center">Player Name</h1>
                			</div>
                		</div>
                	</li>
                </ul>

Blog Card Group

A blog card group is a simple flex container for a grouping of cards to be used in blog articles.

Example
blog_card image cap

Card Title

Some quick example text to build on the Card Title and make up the bulk of the blog_card's content.

Card Title

Some quick example text to build on the Card Title and make up the bulk of the blog_card's content.

blog_card image cap
Card Header

Card title

Card Content

Card Header

Card title

Card Content

<div class="Article">
                	<div class="blog_card-group">
                		<div class="blog_card-list">
                			<div class="blog_card"><img alt="blog_card image cap" class="blog_card-img-top" src="//placehold.it/400x300">
                				<div class="blog_card-block">
                					<h4 class="blog_card-title">Card Title</h4>
                
                					<p class="blog_card-text">Some quick example text to build on the Card Title and make up the bulk of the blog_card's content.</p>
                				</div>
                			</div>
                
                			<div class="blog_card">
                				<div class="blog_card-block">
                					<h4 class="blog_card-title">Card Title</h4>
                
                					<p class="blog_card-text">Some quick example text to build on the Card Title and make up the bulk of the blog_card's content.</p>
                				</div>
                				<img alt="blog_card image cap" class="blog_card-img-bottom" src="//placehold.it/400x300">
                			</div>
                
                			<div class="blog_card">
                				<div class="blog_card-header">Card Header</div>
                				<div class="blog_card-block">
                					<h4 class="blog_card-title">Card title</h4>
                					<p class="blog_card-text">Card Content</p>
                				</div>
                			</div>
                
                			<div class="blog_card">
                				<div class="blog_card-header">Card Header</div>
                				<div class="blog_card-block">
                					<h4 class="blog_card-title">Card title</h4>
                					<p class="blog_card-text">Card Content</p>
                				</div>
                				<div class="blog_card-footer">Card Footer</div>
                			</div>
                		</div>
                	</div>
                </div>

Responsive Card Group

A responsive CardGroup will change how many elements it shows per row based on the available screen width.

Example
  • Card image cap

    Player Name

  • Card image cap

    Player Name

  • Card image cap

    Player Name

  • Card image cap

    Player Name

  • Card image cap

    Player Name

  • Card image cap

    Player Name

  • Card image cap

    Player Name

<ul class="CardGroup CardGroup--responsive">
                	<li class="CardGroup-card">
                		<div class="Card Card--compact">
                			<div class="Card-img--top AspectRatio AspectRatio--16x9">
                				<img class="AspectRatio-subject" src="http://placehold.it/300x169" alt="Card image cap">
                			</div>
                
                			<div class="Card-body">
                				<h1 class="Card-title u-text-center">Player Name</h1>
                			</div>
                		</div>
                	</li>
                	<li class="CardGroup-card">
                		<div class="Card Card--compact">
                			<div class="Card-img--top AspectRatio AspectRatio--16x9">
                				<img class="AspectRatio-subject" src="http://placehold.it/300x169" alt="Card image cap">
                			</div>
                
                			<div class="Card-body">
                				<h1 class="Card-title u-text-center">Player Name</h1>
                			</div>
                		</div>
                	</li>
                	<li class="CardGroup-card">
                		<div class="Card Card--compact">
                			<div class="Card-img--top AspectRatio AspectRatio--16x9">
                				<img class="AspectRatio-subject" src="http://placehold.it/300x169" alt="Card image cap">
                			</div>
                
                			<div class="Card-body">
                				<h1 class="Card-title u-text-center">Player Name</h1>
                			</div>
                		</div>
                	</li>
                	<li class="CardGroup-card">
                		<div class="Card Card--compact">
                			<div class="Card-img--top AspectRatio AspectRatio--16x9">
                				<img class="AspectRatio-subject" src="http://placehold.it/300x169" alt="Card image cap">
                			</div>
                
                			<div class="Card-body">
                				<h1 class="Card-title u-text-center">Player Name</h1>
                			</div>
                		</div>
                	</li>
                	<li class="CardGroup-card">
                		<div class="Card Card--compact">
                			<div class="Card-img--top AspectRatio AspectRatio--16x9">
                				<img class="AspectRatio-subject" src="http://placehold.it/300x169" alt="Card image cap">
                			</div>
                
                			<div class="Card-body">
                				<h1 class="Card-title u-text-center">Player Name</h1>
                			</div>
                		</div>
                	</li>
                	<li class="CardGroup-card">
                		<div class="Card Card--compact">
                			<div class="Card-img--top AspectRatio AspectRatio--16x9">
                				<img class="AspectRatio-subject" src="http://placehold.it/300x169" alt="Card image cap">
                			</div>
                
                			<div class="Card-body">
                				<h1 class="Card-title u-text-center">Player Name</h1>
                			</div>
                		</div>
                	</li>
                	<li class="CardGroup-card">
                		<div class="Card Card--compact">
                			<div class="Card-img--top AspectRatio AspectRatio--16x9">
                				<img class="AspectRatio-subject" src="http://placehold.it/300x169" alt="Card image cap">
                			</div>
                
                			<div class="Card-body">
                				<h1 class="Card-title u-text-center">Player Name</h1>
                			</div>
                		</div>
                	</li>
                </ul>

Responsive Card Group Compact

CardGroup--responsiveCompact will increase the density of content. For desktop this means displaying 5 items instead of 4.

Example
  • Card image cap

    Player Name

  • Card image cap

    Player Name

  • Card image cap

    Player Name

  • Card image cap

    Player Name

  • Card image cap

    Player Name

  • Card image cap

    Player Name

  • Card image cap

    Player Name

<ul class="CardGroup CardGroup--responsive CardGroup--responsiveCompact">
                	<li class="CardGroup-card">
                		<div class="Card Card--compact">
                			<div class="Card-img--top AspectRatio AspectRatio--16x9">
                				<img class="AspectRatio-subject" src="http://placehold.it/300x169" alt="Card image cap">
                			</div>
                
                			<div class="Card-body">
                				<h1 class="Card-title u-text-center">Player Name</h1>
                			</div>
                		</div>
                	</li>
                	<li class="CardGroup-card">
                		<div class="Card Card--compact">
                			<div class="Card-img--top AspectRatio AspectRatio--16x9">
                				<img class="AspectRatio-subject" src="http://placehold.it/300x169" alt="Card image cap">
                			</div>
                
                			<div class="Card-body">
                				<h1 class="Card-title u-text-center">Player Name</h1>
                			</div>
                		</div>
                	</li>
                	<li class="CardGroup-card">
                		<div class="Card Card--compact">
                			<div class="Card-img--top AspectRatio AspectRatio--16x9">
                				<img class="AspectRatio-subject" src="http://placehold.it/300x169" alt="Card image cap">
                			</div>
                
                			<div class="Card-body">
                				<h1 class="Card-title u-text-center">Player Name</h1>
                			</div>
                		</div>
                	</li>
                	<li class="CardGroup-card">
                		<div class="Card Card--compact">
                			<div class="Card-img--top AspectRatio AspectRatio--16x9">
                				<img class="AspectRatio-subject" src="http://placehold.it/300x169" alt="Card image cap">
                			</div>
                
                			<div class="Card-body">
                				<h1 class="Card-title u-text-center">Player Name</h1>
                			</div>
                		</div>
                	</li>
                	<li class="CardGroup-card">
                		<div class="Card Card--compact">
                			<div class="Card-img--top AspectRatio AspectRatio--16x9">
                				<img class="AspectRatio-subject" src="http://placehold.it/300x169" alt="Card image cap">
                			</div>
                
                			<div class="Card-body">
                				<h1 class="Card-title u-text-center">Player Name</h1>
                			</div>
                		</div>
                	</li>
                	<li class="CardGroup-card">
                		<div class="Card Card--compact">
                			<div class="Card-img--top AspectRatio AspectRatio--16x9">
                				<img class="AspectRatio-subject" src="http://placehold.it/300x169" alt="Card image cap">
                			</div>
                
                			<div class="Card-body">
                				<h1 class="Card-title u-text-center">Player Name</h1>
                			</div>
                		</div>
                	</li>
                	<li class="CardGroup-card">
                		<div class="Card Card--compact">
                			<div class="Card-img--top AspectRatio AspectRatio--16x9">
                				<img class="AspectRatio-subject" src="http://placehold.it/300x169" alt="Card image cap">
                			</div>
                
                			<div class="Card-body">
                				<h1 class="Card-title u-text-center">Player Name</h1>
                			</div>
                		</div>
                	</li>
                </ul>

Team List

A Team List CardGroup will change how many elements it shows per row based on the available screen width, starting at 2 per row and maxing out at 4 per row, allowing for a full-width card size option.

<ul class="CardGroup CardGroup--responsive CardGroup--team-list">
                	<li class="CardGroup-card">
                		<div class="Card Card--team">
                			<a href="javascript:void(0)" class="Card-link Card-link--withUnderlineAnimation">
                				<div class="AspectRatio">
                					<svg xmlns="http://www.w3.org/2000/svg" class="Card-imgTop AspectRatio-subject u-transparent--heavy">
                                        <use xlink:href="#icon-team-fallback"/>
                                    </svg>
                				</div>
                
                				<div class="Card-body">
                					<h1 class="Card-title">Team Name</h1>
                					<p class="Card-text">Location</p>
                				</div>
                			</a>
                
                			<a href="javascript:void(0)" class="Card-link Card-link--withUnderlineAnimation Card-button Button">
                                <span class="Button-text">View Roster</span>
                                <svg xmlns="http://www.w3.org/2000/svg" class="Icon">
                                    <use xlink:href="#icon-chevron-down"/>
                                </svg>
                            </a>
                		</div>
                	</li>
                	<li class="CardGroup-card">
                		<div class="Card Card--team">
                			<a href="javascript:void(0)" class="Card-link Card-link--withUnderlineAnimation">
                				<div class="AspectRatio">
                					<svg xmlns="http://www.w3.org/2000/svg" class="Card-imgTop AspectRatio-subject u-transparent--heavy">
                                        <use xlink:href="#icon-team-fallback"/>
                                    </svg>
                				</div>
                
                				<div class="Card-body">
                					<h1 class="Card-title">Team Name</h1>
                					<p class="Card-text">Location</p>
                				</div>
                			</a>
                
                			<a href="javascript:void(0)" class="Card-link Card-link--withUnderlineAnimation Card-button Button">
                                <span class="Button-text">View Roster</span>
                                <svg xmlns="http://www.w3.org/2000/svg" class="Icon">
                                    <use xlink:href="#icon-chevron-down"/>
                                </svg>
                            </a>
                		</div>
                	</li>
                	<li class="CardGroup-card">
                		<div class="Card Card--team">
                			<a href="javascript:void(0)" class="Card-link Card-link--withUnderlineAnimation">
                				<div class="AspectRatio">
                					<svg xmlns="http://www.w3.org/2000/svg" class="Card-imgTop AspectRatio-subject u-transparent--heavy">
                                        <use xlink:href="#icon-team-fallback"/>
                                    </svg>
                				</div>
                
                				<div class="Card-body">
                					<h1 class="Card-title">Team Name</h1>
                					<p class="Card-text">Location</p>
                				</div>
                			</a>
                
                			<a href="javascript:void(0)" class="Card-link Card-link--withUnderlineAnimation Card-button Button">
                                <span class="Button-text">View Roster</span>
                                <svg xmlns="http://www.w3.org/2000/svg" class="Icon">
                                    <use xlink:href="#icon-chevron-down"/>
                                </svg>
                            </a>
                		</div>
                	</li>
                	<li class="CardGroup-card">
                		<div class="Card Card--team">
                			<a href="javascript:void(0)" class="Card-link Card-link--withUnderlineAnimation">
                				<div class="AspectRatio">
                					<svg xmlns="http://www.w3.org/2000/svg" class="Card-imgTop AspectRatio-subject u-transparent--heavy">
                                        <use xlink:href="#icon-team-fallback"/>
                                    </svg>
                				</div>
                
                				<div class="Card-body">
                					<h1 class="Card-title">Team Name</h1>
                					<p class="Card-text">Location</p>
                				</div>
                			</a>
                
                			<a href="javascript:void(0)" class="Card-link Card-link--withUnderlineAnimation Card-button Button">
                                <span class="Button-text">View Roster</span>
                                <svg xmlns="http://www.w3.org/2000/svg" class="Icon">
                                    <use xlink:href="#icon-chevron-down"/>
                                </svg>
                            </a>
                		</div>
                	</li>
                	<li class="CardGroup-card">
                		<div class="Card Card--team">
                			<a href="javascript:void(0)" class="Card-link Card-link--withUnderlineAnimation">
                				<div class="AspectRatio">
                					<svg xmlns="http://www.w3.org/2000/svg" class="Card-imgTop AspectRatio-subject u-transparent--heavy">
                                        <use xlink:href="#icon-team-fallback"/>
                                    </svg>
                				</div>
                
                				<div class="Card-body">
                					<h1 class="Card-title">Team Name</h1>
                					<p class="Card-text">Location</p>
                				</div>
                			</a>
                
                			<a href="javascript:void(0)" class="Card-link Card-link--withUnderlineAnimation Card-button Button">
                                <span class="Button-text">View Roster</span>
                                <svg xmlns="http://www.w3.org/2000/svg" class="Icon">
                                    <use xlink:href="#icon-chevron-down"/>
                                </svg>
                            </a>
                		</div>
                	</li>
                	<li class="CardGroup-card">
                		<div class="Card Card--team">
                			<a href="javascript:void(0)" class="Card-link Card-link--withUnderlineAnimation">
                				<div class="AspectRatio">
                					<svg xmlns="http://www.w3.org/2000/svg" class="Card-imgTop AspectRatio-subject u-transparent--heavy">
                                        <use xlink:href="#icon-team-fallback"/>
                                    </svg>
                				</div>
                
                				<div class="Card-body">
                					<h1 class="Card-title">Team Name</h1>
                					<p class="Card-text">Location</p>
                				</div>
                			</a>
                
                			<a href="javascript:void(0)" class="Card-link Card-link--withUnderlineAnimation Card-button Button">
                                <span class="Button-text">View Roster</span>
                                <svg xmlns="http://www.w3.org/2000/svg" class="Icon">
                                    <use xlink:href="#icon-chevron-down"/>
                                </svg>
                            </a>
                		</div>
                	</li>
                	<li class="CardGroup-card">
                		<div class="Card Card--team">
                			<a href="javascript:void(0)" class="Card-link Card-link--withUnderlineAnimation">
                				<div class="AspectRatio">
                					<svg xmlns="http://www.w3.org/2000/svg" class="Card-imgTop AspectRatio-subject u-transparent--heavy">
                                        <use xlink:href="#icon-team-fallback"/>
                                    </svg>
                				</div>
                
                				<div class="Card-body">
                					<h1 class="Card-title">Team Name</h1>
                					<p class="Card-text">Location</p>
                				</div>
                			</a>
                
                			<a href="javascript:void(0)" class="Card-link Card-link--withUnderlineAnimation Card-button Button">
                                <span class="Button-text">View Roster</span>
                                <svg xmlns="http://www.w3.org/2000/svg" class="Icon">
                                    <use xlink:href="#icon-chevron-down"/>
                                </svg>
                            </a>
                		</div>
                	</li>
                </ul>

Sectioned

Responsive module displaying images or text under common subheadings.

Example
division leaders
  • 1st PLACE SEED
    Atlantic Leader
  • 2nd PLACE SEED
    Pacific Leader
other qualifying teams
  • 3rd PLACE SEED
  • to be determined
    4th PLACE SEED
  • to be determined
    5th PLACE SEED
  • 6th PLACE SEED
<div class="CardGroup CardGroup--sectioned FlexElement FlexElement--responsive">
                	<div class="CardGroup-left">
                		<div class="SubHeader">
                			division leaders
                		</div>
                		<ul class="CardGroup CardGroup--responsive">
                			<li class="CardGroup-card">
                				<div class="Card Card--noFlex">
                					<div class="Card-imageHolder AspectRatio AspectRatio--full">
                						<svg xmlns="http://www.w3.org/2000/svg" class="Card-imgTop u-transparent--heavy AspectRatio-subject">
                                            <use xlink:href="#icon-team-fallback"/>
                                        </svg>
                					</div>
                					<div class="Card-body">
                						<b class="u-ui5">1st PLACE SEED</b>
                						<div class="u-ui6">Atlantic Leader</div>
                					</div>
                				</div>
                			</li>
                			<li class="CardGroup-card">
                				<div class="Card Card--noFlex">
                					<div class="Card-imageHolder AspectRatio AspectRatio--full">
                						<svg xmlns="http://www.w3.org/2000/svg" class="Card-imgTop u-transparent--heavy AspectRatio-subject">
                                            <use xlink:href="#icon-team-fallback"/>
                                        </svg>
                					</div>
                					<div class="Card-body">
                						<b class="u-ui5">2nd PLACE SEED</b>
                						<div class="u-ui6">Pacific Leader</div>
                					</div>
                				</div>
                			</li>
                		</ul>
                	</div>
                	<div class="CardGroup-right">
                		<div class="SubHeader">
                			other qualifying teams
                		</div>
                		<ul class="CardGroup CardGroup--responsive">
                			<li class="CardGroup-card">
                				<div class="Card Card--noFlex">
                					<div class="Card-imageHolder AspectRatio AspectRatio--full">
                						<svg xmlns="http://www.w3.org/2000/svg" class="Card-imgTop u-transparent--heavy AspectRatio-subject">
                                            <use xlink:href="#icon-team-fallback"/>
                                        </svg>
                					</div>
                					<div class="Card-body">
                						<b class="u-ui5">3rd PLACE SEED</b>
                					</div>
                				</div>
                			</li>
                			<li class="CardGroup-card">
                				<div class="Card Card--noFlex">
                					<div class="Card-imageHolder AspectRatio AspectRatio--full">
                						<div class="AspectRatio-subject">
                							<div class="Label u-transparent--light u-uppercase">to be determined</div>
                						</div>
                					</div>
                					<div class="Card-body">
                						<b class="u-ui5">4th PLACE SEED</b>
                					</div>
                				</div>
                			</li>
                			<li class="CardGroup-card">
                				<div class="Card Card--noFlex">
                					<div class="Card-imageHolder AspectRatio AspectRatio--full">
                						<div class="AspectRatio-subject u-uppercase">
                							<div class="Label u-transparent--light u-uppercase">to be determined</div>
                						</div>
                					</div>
                					<div class="Card-body">
                						<b class="u-ui5">5th PLACE SEED</b>
                					</div>
                				</div>
                			</li>
                			<li class="CardGroup-card">
                				<div class="Card Card--noFlex">
                					<div class="Card-imageHolder AspectRatio AspectRatio--full">
                						<svg xmlns="http://www.w3.org/2000/svg" class="Card-imgTop u-transparent--heavy AspectRatio-subject">
                                            <use xlink:href="#icon-team-fallback"/>
                                        </svg>
                					</div>
                					<div class="Card-body">
                						<b class="u-ui5">6th PLACE SEED</b>
                					</div>
                				</div>
                			</li>
                		</ul>
                	</div>
                </div>

Divider

A style for card groups that puts a divider between cards. Works with CardGroup--responsive and CardGroup--responsiveCompact. More internal padding than a normal card and aligns on the left and right with the edge of the container.

Example
  • Lorem ipsum dolor sit amet, consectetur adipiscing elit.

  • Lorem ipsum dolor sit amet, consectetur adipiscing elit.

  • Lorem ipsum dolor sit amet, consectetur adipiscing elit.

  • Lorem ipsum dolor sit amet, consectetur adipiscing elit.

  • Lorem ipsum dolor sit amet, consectetur adipiscing elit.

  • Lorem ipsum dolor sit amet, consectetur adipiscing elit.

  • Lorem ipsum dolor sit amet, consectetur adipiscing elit.

<ul class="CardGroup CardGroup--responsive CardGroup--divider">
                	<li class="CardGroup-card">
                		<div class="Card Card--compact">
                			<div class="Card Card-imageHolder u-horizontalPadding--small">
                				<a href="http://www.overwatchleague.com" class="Card-link">
                					<div class="Card-img--top AspectRatio AspectRatio--16x9 AspectRatio--centered AspectRatio--full">
                						<img class="AspectRatio-subject" src="http://placehold.it/300x169" alt="Card image cap">
                					</div>
                				</a>
                			</div>
                			<div class="Card-body">
                				<div class="Card-text">
                					<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
                				</div>
                			</div>
                		</div>
                	</li>
                	<li class="CardGroup-card">
                		<div class="Card Card--compact">
                			<div class="Card Card-imageHolder u-horizontalPadding--small">
                				<a href="http://www.overwatchleague.com" class="Card-link">
                					<div class="Card-img--top AspectRatio AspectRatio--16x9 AspectRatio--centered AspectRatio--full">
                						<img class="AspectRatio-subject" src="http://placehold.it/300x169" alt="Card image cap">
                					</div>
                				</a>
                			</div>
                			<div class="Card-body">
                				<div class="Card-text">
                					<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
                				</div>
                			</div>
                		</div>
                	</li>
                	<li class="CardGroup-card">
                		<div class="Card Card--compact">
                			<div class="Card Card-imageHolder u-horizontalPadding--small">
                				<a href="http://www.overwatchleague.com" class="Card-link">
                					<div class="Card-img--top AspectRatio AspectRatio--16x9 AspectRatio--centered AspectRatio--full">
                						<img class="AspectRatio-subject" src="http://placehold.it/300x169" alt="Card image cap">
                					</div>
                				</a>
                			</div>
                			<div class="Card-body">
                				<div class="Card-text">
                					<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
                				</div>
                			</div>
                		</div>
                	</li>
                	<li class="CardGroup-card">
                		<div class="Card Card--compact">
                			<div class="Card Card-imageHolder u-horizontalPadding--small">
                				<a href="http://www.overwatchleague.com" class="Card-link">
                					<div class="Card-img--top AspectRatio AspectRatio--16x9 AspectRatio--centered AspectRatio--full">
                						<img class="AspectRatio-subject" src="http://placehold.it/300x169" alt="Card image cap">
                					</div>
                				</a>
                			</div>
                			<div class="Card-body">
                				<div class="Card-text">
                					<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
                				</div>
                			</div>
                		</div>
                	</li>
                	<li class="CardGroup-card">
                		<div class="Card Card--compact">
                			<div class="Card Card-imageHolder u-horizontalPadding--small">
                				<a href="http://www.overwatchleague.com" class="Card-link">
                					<div class="Card-img--top AspectRatio AspectRatio--16x9 AspectRatio--centered AspectRatio--full">
                						<img class="AspectRatio-subject" src="http://placehold.it/300x169" alt="Card image cap">
                					</div>
                				</a>
                			</div>
                			<div class="Card-body">
                				<div class="Card-text">
                					<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
                				</div>
                			</div>
                		</div>
                	</li>
                	<li class="CardGroup-card">
                		<div class="Card Card--compact">
                			<div class="Card Card-imageHolder u-horizontalPadding--small">
                				<a href="http://www.overwatchleague.com" class="Card-link">
                					<div class="Card-img--top AspectRatio AspectRatio--16x9 AspectRatio--centered AspectRatio--full">
                						<img class="AspectRatio-subject" src="http://placehold.it/300x169" alt="Card image cap">
                					</div>
                				</a>
                			</div>
                			<div class="Card-body">
                				<div class="Card-text">
                					<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
                				</div>
                			</div>
                		</div>
                	</li>
                	<li class="CardGroup-card">
                		<div class="Card Card--compact">
                			<div class="Card Card-imageHolder u-horizontalPadding--small">
                				<a href="http://www.overwatchleague.com" class="Card-link">
                					<div class="Card-img--top AspectRatio AspectRatio--16x9 AspectRatio--centered AspectRatio--full">
                						<img class="AspectRatio-subject" src="http://placehold.it/300x169" alt="Card image cap">
                					</div>
                				</a>
                			</div>
                			<div class="Card-body">
                				<div class="Card-text">
                					<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
                				</div>
                			</div>
                		</div>
                	</li>
                </ul>

Cards

Card

A card is a flexible and extensible content container. It includes options for headers and footers, a wide variety of content, contextual background colors, and powerful display options. It also has no fixed width to start, so they’ll naturally fill the full width of its parent element.

Cards are built off of the Bootstrap 4 card concept, but default naming has been updated to follow SUITCSS naming standards.

Finally, the syntax for these cards deviates slightly from Bootstrap 4. Card images are now wrapped in a div for more advanced styling/animations.

Example
Card image cap

Card title

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.

Go somewhere
<div style="max-width: 450px;">
                	<div class="Card">
                		<div class="Card-imageHolder">
                			<div class="Card-img--top AspectRatio AspectRatio--16x9">
                				<img class="AspectRatio-subject" src="http://placehold.it/300x169" alt="Card image cap">
                			</div>
                		</div>
                		<div class="Card-body">
                			<h1 class="Card-title">Card title</h1>
                			<p class="Card-text">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>
                			<a href="javascript:void(0)" class="btn btn-primary">Go somewhere</a>
                		</div>
                	</div>
                </div>

Overlay

Cards support having an image overlay, which you can use via .Card-imgOverlay. This element will be placed over the image and you can position elements inside of it. Note that you MUST absolutely position elements inside of the overlay, as the overlay itself will have no height, and you MUST use .AspectRatio and an acceptable .AspectRatio--XXXXX modifier on the card to properly overlay the image.

Example
Card image cap
12:20

Card title

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.

Go somewhere
<div style="max-width: 450px;">
                	<div class="Card">
                		<div class="Card-imageHolder">
                			<div class="Card-img--top AspectRatio AspectRatio--16x9">
                				<img class="AspectRatio-subject" src="http://placehold.it/300x169" alt="Card image cap">
                			</div>
                		</div>
                
                		<div class="Card-img-overlay AspectRatio AspectRatio--16x9" style="background-color: rgba(255, 0, 0, .5);">
                			<div class="Card-timecode" style="bottom: 0; left: 10px;">12:20</div>
                		</div>
                
                		<div class="Card-body">
                			<h1 class="Card-title">Card title</h1>
                			<p class="Card-text">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>
                			<a href="javascript:void(0)" class="btn btn-primary">Go somewhere</a>
                		</div>
                	</div>
                </div>

Compact

Adding a .Card--compact flag will tighten up the spacing between elements for a more compact look suitable in things like media galleries.

Example
Card image cap

Card title

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.

Go somewhere
<div style="max-width: 250px;">
                	<div class="Card Card--compact">
                		<div class="Card-imageHolder">
                			<div class="Card-img--top AspectRatio AspectRatio--16x9">
                				<img class="AspectRatio-subject" src="http://placehold.it/300x169" alt="Card image cap">
                			</div>
                		</div>
                		<div class="Card-body">
                			<h1 class="Card-title">Card title</h1>
                			<p class="Card-text">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>
                			<a href="javascript:void(0)" class="btn btn-primary">Go somewhere</a>
                		</div>
                	</div>
                </div>

Caption

For a compact look, use .Card--caption with a card to inset the text content.

Note that appropriate padding must be applied to the card for it to lay out correctly. Please see AspectRatio for examples.

Example
Card image cap

Card title

Lorem ipsum dolor sit amet, consectetur adipiscing elit

<div style="max-width: 400px;">
                	<div class="Card Card--caption AspectRatio AspectRatio--16x9">
                		<div class="Card-img--top ">
                			<img class="AspectRatio-subject" src="http://placehold.it/300x169" alt="Card image cap">
                		</div>
                		<div class="Card-body">
                			<h1 class="Card-title">Card title</h1>
                			<p class="Card-text">Lorem ipsum dolor sit amet, consectetur adipiscing elit</p>
                		</div>
                	</div>
                </div>

Video

Adding .Card--video will cause a specific effect for a .Card-timecode element in an overlay to create a pleasing effect.

Example

Card title

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.

Go somewhere
<div style="max-width: 450px;">
                	<div class="Card Card--video">
                		<div class="Card-imageHolder">
                			<a href="javascript:alert('here');" class="Card-link Card-link--withUnderlineAnimation Card-link--withOverlayAnimation">
                				<div class="Card-img--top AspectRatio AspectRatio--16x9">
                					<img class="AspectRatio-subject" src="http://placehold.it/300x169" alt="Card image cap">
                				</div>
                
                				<div class="Card-img-overlay AspectRatio AspectRatio--16x9">
                					<div class="Card-timecode">12:20</div>
                				</div>
                			</a>
                		</div>
                
                		<div class="Card-body">
                			<a href="javascript:alert('here');" class="Card-link">
                				<h1 class="Card-title">Card title</h1>
                			</a>
                
                			<p class="Card-text">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>
                			<a href="javascript:void(0)" class="btn btn-primary">Go somewhere</a>
                		</div>
                	</div>
                </div>

Team Card

Adding .Card--team will display the card specifically for a team. This example assumes the size and spacing around the .Card--team is defined by a .CardGroup--responsive.

<div style="max-width: 300px;">
                	<div class="Card Card--team">
                		<div class="Card-imageHolder">
                			<a href="javascript:void(0)" class="Card-link Card-link--withUnderlineAnimation">
                				<div class="AspectRatio">
                					<svg xmlns="http://www.w3.org/2000/svg" class="Card-imgTop AspectRatio-subject u-transparent--heavy">
                                        <use xlink:href="#icon-team-fallback"/>
                                    </svg>
                				</div>
                
                				<div class="Card-body">
                					<h1 class="Card-title">Team Name</h1>
                					<p class="Card-text">Location</p>
                				</div>
                			</a>
                		</div>
                
                		<a href="javascript:void(0)" class="Card-link Card-link--withUnderlineAnimation Card-button Button">
                            <span class="Button-text">View Roster</span>
                            <svg xmlns="http://www.w3.org/2000/svg" class="Icon">
                                <use xlink:href="#icon-chevron-down"/>
                            </svg>
                        </a>
                	</div>
                </div>

Active Team Card

Adding .is-active to a .Card--team will give this effect. The change between the two happens on a timer('slow') ease-in-out transition.

<div style="max-width: 300px;">
                	<div class="Card Card--team is-active">
                		<div class="Card-imageHolder">
                			<a href="javascript:void(0)" class="Card-link Card-link--withUnderlineAnimation">
                				<div class="AspectRatio">
                					<svg xmlns="http://www.w3.org/2000/svg" class="Card-imgTop AspectRatio-subject u-transparent--heavy">
                                        <use xlink:href="#icon-team-fallback"/>
                                    </svg>
                				</div>
                
                				<div class="Card-body">
                					<h1 class="Card-title">Team Name</h1>
                					<p class="Card-text">Location</p>
                				</div>
                			</a>
                		</div>
                
                		<a href="javascript:void(0)" class="Card-link Card-link--withUnderlineAnimation Card-button Button">
                            <span class="Button-text">View Roster</span>
                            <svg xmlns="http://www.w3.org/2000/svg" class="Icon">
                                <use xlink:href="#icon-chevron-down"/>
                            </svg>
                        </a>
                	</div>
                </div>

Noflex

-noFlex overrides .Cards's display: flex;. This is handy for wrapping children that have height: 100%; and is not visible on some browsers (Firefox and Edge).

Example
1st PLACE SEED
Atlantic Leader
<div style="max-width: 300px;">
                	<div class="Card Card--noFlex">
                		<div class="Card-imageHolder AspectRatio AspectRatio--full">
                			<svg xmlns="http://www.w3.org/2000/svg" class="Card-imgTop u-transparent--heavy AspectRatio-subject">
                                <use xlink:href="#icon-team-fallback"/>
                            </svg>
                		</div>
                		<div class="Card-body">
                			<b class="u-ui5">1st PLACE SEED</b>
                			<div class="u-ui6">Atlantic Leader</div>
                		</div>
                	</div>
                </div>

Blog

Blog cards are specific cards used in blog articles, and are scoped to exist within an .Article class. There's also an alias of this as a modifier to .Card called .Card--blog that doesn't require an .Article parent.

Example
blog_card image cap
Card Title

Some quick example text to build on the Card Title and make up the bulk of the blog_card's content.

<div class="Article">
                	<div class="blog_card">
                		<img alt="blog_card image cap" class="blog_card-img-top" src="//placehold.it/1600x1200">
                		<div class="blog_card-block">
                			<h5 class="blog_card-title">Card Title</h5>
                
                			<p class="blog_card-text">Some quick example text to build on the Card Title and make up the bulk of the blog_card's content.</p>
                		</div>
                	</div>
                </div>

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>

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 Info

Match Info

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

Example

Default Match Info

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

Match Info Dark

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

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

Match Row

Match

Match rows are the various types of rows of a Match Schedule. They utilize various Match Statuses.

MatchRow-match have a hover effect that shows a match detail button. On mobile and tablet, the button becomes a right-chevron icon.

MatchRow-match--tbd does not have a hover effect because we do not know what teams are playing.

File location: src/assets/toolkit/styles/molecules/_match-row.scss.

<div class="MatchRow MatchRow-match">
                	<a href="javascript:void(0)" class="MatchRow-contentWrapper">
                		<div class="MatchRow-team">
                			<div class="TeamLabel TeamLabel--reverse">
                				<div class="TeamLabel-block">
                					<img src="../assets/toolkit/images/static/team-badge-e.png" alt="" class="TeamLabel-logo">
                				</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">TMN</div>
                				</div>
                			</div>
                		</div>
                		<div class="MatchRow-status">
                			<span class="MatchStatus">
                                <span class="MatchStatus-time">5:00 pm</span>
                			</span>
                		</div>
                		<div class="MatchRow-team">
                			<div class="TeamLabel">
                				<div class="TeamLabel-block">
                					<img src="../assets/toolkit/images/static/team-badge-a.png" alt="" class="TeamLabel-logo">
                				</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">TMN</div>
                				</div>
                			</div>
                			<div class="MatchRow-matchDetail">
                				<button class="Button Button--primary">
                                    <span class="Button-text js-truncate">match details</span>
                                </button>
                			</div>
                		</div>
                	</a>
                </div>
                
                <br />
                <div class="MatchRow MatchRow-match MatchRow-match--tbd">
                	<div class="MatchRow-contentWrapper">
                		<div class="MatchRow-team">
                			<div class="TeamLabel TeamLabel--reverse">
                				<div class="TeamLabel-block">
                					<svg class="Icon TeamLabel-logo" xmlns="http://www.w3.org/2000/svg">
                                        <use xlink:href="#schedule-team-logo-placeholder"/>
                                    </svg>
                				</div>
                				<div class="TeamLabel-info TeamLabel-info--noScore">
                					<div class="TeamLabel-name hidden-sm hidden-xs">--</div>
                					<div class="TeamLabel-name hidden-md hidden-lg">--</div>
                				</div>
                			</div>
                		</div>
                		<div class="MatchRow-status">
                			<span class="MatchStatus">
                                <span class="MatchStatus-time">5:00 pm</span>
                			</span>
                		</div>
                		<div class="MatchRow-team">
                			<div class="TeamLabel">
                				<svg class="Icon TeamLabel-logo" xmlns="http://www.w3.org/2000/svg">
                                    <use xlink:href="#schedule-team-logo-placeholder"/>
                                </svg>
                				<div class="TeamLabel-info TeamLabel-info--noScore">
                					<div class="TeamLabel-name hidden-sm hidden-xs">--</div>
                					<div class="TeamLabel-name hidden-md hidden-lg">--</div>
                				</div>
                			</div>
                		</div>
                	</div>
                </div>

Match Stacked

Stacked match are the stacked version of Match Rows

Example
3
1
<div style="width: 100%;max-width: 400px;">
                	<div class="MatchStacked">
                		<div class="MatchStacked-teams">
                			<div class="TeamLabel">
                				<div class="TeamLabel-block">
                					<img src="../assets/toolkit/images/static/team-badge-a.png" alt="" class="TeamLabel-logo">
                				</div>
                				<div class="TeamLabel-info">
                					<div class="TeamLabel-name hidden-md hidden-sm hidden-xs">Team Name</div>
                					<div class="TeamLabel-name hidden-lg">TMN</div>
                				</div>
                				<div class="TeamLabel-stat is-winner">3</div>
                			</div>
                			<div class="TeamLabel">
                				<div class="TeamLabel-block">
                					<img src="../assets/toolkit/images/static/team-badge-b.png" alt="" class="TeamLabel-logo">
                				</div>
                				<div class="TeamLabel-info">
                					<div class="TeamLabel-name hidden-md hidden-sm hidden-xs">Team Name</div>
                					<div class="TeamLabel-name hidden-lg">TMN</div>
                				</div>
                				<div class="TeamLabel-stat">1</div>
                			</div>
                		</div>
                		<button href="javascript:void(0)" class="MatchStacked-vod Button Button--iconOnly">
                            <svg class="Icon" xmlns="http://www.w3.org/2000/svg">
                                <use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#icon-video"/>
                            </svg>
                        </button>
                		<div class="MatchStacked-details MatchDetail">
                			<div class="MatchDetail-selector">
                				<button class="MatchDetail-selector-expand Card-link--withUnderlineAnimation">
                                    Match Details
                                    <svg xmlns="http://www.w3.org/2000/svg" class="Icon Icon--xs">
                                        <use xlink:href="#icon-chevron-down"/>
                                    </svg>
                                </button>
                			</div>
                		</div>
                	</div>
                </div>

Match Stacked Hoverable Details

Stacked match with hoverable match details

Example
3
1
<div style="width: 100%;max-width: 400px;">
                	<div class="MatchStacked MatchStacked--hoverableDetails">
                		<div class="MatchStacked-teams">
                			<div class="TeamLabel">
                				<div class="TeamLabel-block">
                					<img src="../assets/toolkit/images/static/team-badge-a.png" alt="" class="TeamLabel-logo">
                				</div>
                				<div class="TeamLabel-info">
                					<div class="TeamLabel-name hidden-md hidden-sm hidden-xs">Team Name</div>
                					<div class="TeamLabel-name hidden-lg">TMN</div>
                				</div>
                				<div class="TeamLabel-stat is-winner">3</div>
                			</div>
                			<div class="TeamLabel">
                				<div class="TeamLabel-block">
                					<img src="../assets/toolkit/images/static/team-badge-b.png" alt="" class="TeamLabel-logo">
                				</div>
                				<div class="TeamLabel-info">
                					<div class="TeamLabel-name hidden-md hidden-sm hidden-xs">Team Name</div>
                					<div class="TeamLabel-name hidden-lg">TMN</div>
                				</div>
                				<div class="TeamLabel-stat">1</div>
                			</div>
                		</div>
                		<button href="javascript:void(0)" class="MatchStacked-vod Button Button--iconOnly">
                            <svg class="Icon" xmlns="http://www.w3.org/2000/svg">
                                <use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#icon-video"/>
                            </svg>
                        </button>
                		<div class="MatchStacked-details MatchDetail">
                			<div class="MatchDetail-selector">
                				<button class="MatchDetail-selector-expand">
                                    Series Detail
                                    <svg xmlns="http://www.w3.org/2000/svg" class="Icon Icon--xs">
                                        <use xlink:href="#icon-chevron-down"/>
                                    </svg>
                                </button>
                			</div>
                		</div>
                	</div>
                </div>

Match Stacked With Details Expanded

Example
3
1
TMN
12/12/18
TMN
0
Hanamura
3
5
Ilos
2
<div style="width: 100%;max-width: 400px;">
                	<div class="MatchStacked">
                		<div class="MatchStacked-teams">
                			<div class="TeamLabel">
                				<div class="TeamLabel-block">
                					<img src="../assets/toolkit/images/static/team-badge-a.png" alt="" class="TeamLabel-logo">
                				</div>
                				<div class="TeamLabel-info">
                					<div class="TeamLabel-name hidden-md hidden-sm hidden-xs">Team Name</div>
                					<div class="TeamLabel-name hidden-lg">TMN</div>
                				</div>
                				<div class="TeamLabel-stat is-winner">3</div>
                			</div>
                			<div class="TeamLabel">
                				<div class="TeamLabel-block">
                					<img src="../assets/toolkit/images/static/team-badge-b.png" alt="" class="TeamLabel-logo">
                				</div>
                				<div class="TeamLabel-info">
                					<div class="TeamLabel-name hidden-md hidden-sm hidden-xs">Team Name</div>
                					<div class="TeamLabel-name hidden-lg">TMN</div>
                				</div>
                				<div class="TeamLabel-stat">1</div>
                			</div>
                		</div>
                		<a href="javascript:void(0)" class="MatchStacked-vod Button Button--iconOnly">
                            <svg class="Icon" xmlns="http://www.w3.org/2000/svg">
                                <use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#icon-video"/>
                            </svg>
                        </a>
                		<div class="MatchStacked-details MatchDetail">
                			<div class="MatchDetail-selector">
                				<button class="MatchDetail-selector-expand Card-link--withUnderlineAnimation is-active">
                                    Match Details
                                    <svg xmlns="http://www.w3.org/2000/svg" class="Icon Icon--xs">
                                        <use xlink:href="#icon-chevron-down"/>
                                    </svg>
                                </button>
                			</div>
                			<div class="MatchDetail-matchList">
                				<div class="MatchDetail-teamList">
                					<div class="TeamLabel">
                						<div class="TeamLabel-block">
                							<img src="../assets/toolkit/images/static/team-badge-a.png" alt="" class="TeamLabel-logo">
                						</div>
                						<div class="TeamLabel-info TeamLabel-info--noScore">
                							<div class="TeamLabel-name">TMN</div>
                						</div>
                					</div>
                					<div class="MatchDetail-date">
                						12/12/18
                					</div>
                					<div class="TeamLabel TeamLabel--reverse">
                						<div class="TeamLabel-block">
                							<img src="../assets/toolkit/images/static/team-badge-b.png" alt="" class="TeamLabel-logo">
                						</div>
                						<div class="TeamLabel-info TeamLabel-info--noScore">
                							<div class="TeamLabel-name">TMN</div>
                						</div>
                					</div>
                				</div>
                				<div class="MatchDetail-mapList">
                					<div class="MatchDetail-map">
                						<div class="MatchDetail-mapScore">0</div>
                						<div class="MatchDetail-mapName">Hanamura</div>
                						<div class="MatchDetail-mapScore is-winner">3</div>
                					</div>
                					<div class="MatchDetail-map">
                						<div class="MatchDetail-mapScore is-winner">5</div>
                						<div class="MatchDetail-mapName">Ilos</div>
                						<div class="MatchDetail-mapScore">2</div>
                					</div>
                				</div>
                			</div>
                		</div>
                	</div>
                </div>

Match Stacked With Schedule Expanded

Example
3
1
<div style="width: 100%;max-width: 400px;">
                	<div class="MatchStacked">
                		<div class="MatchStacked-teams">
                			<div class="TeamLabel">
                				<div class="TeamLabel-block">
                					<img src="../assets/toolkit/images/static/team-badge-a.png" alt="" class="TeamLabel-logo">
                				</div>
                				<div class="TeamLabel-info">
                					<div class="TeamLabel-name hidden-md hidden-sm hidden-xs">Team Name</div>
                					<div class="TeamLabel-name hidden-lg">TMN</div>
                				</div>
                				<div class="TeamLabel-stat is-winner">3</div>
                			</div>
                			<div class="TeamLabel">
                				<div class="TeamLabel-block">
                					<img src="../assets/toolkit/images/static/team-badge-b.png" alt="" class="TeamLabel-logo">
                				</div>
                				<div class="TeamLabel-info">
                					<div class="TeamLabel-name hidden-md hidden-sm hidden-xs">Team Name</div>
                					<div class="TeamLabel-name hidden-lg">TMN</div>
                				</div>
                				<div class="TeamLabel-stat">1</div>
                			</div>
                		</div>
                		<a href="javascript:void(0)" class="MatchStacked-vod Button Button--iconOnly">
                            <svg class="Icon" xmlns="http://www.w3.org/2000/svg">
                                <use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#icon-video"/>
                            </svg>
                        </a>
                		<div class="MatchStacked-details MatchDetail">
                			<div class="MatchDetail-selector">
                				<button class="MatchDetail-selector-expand is-active">
                                    Series Detail
                                    <svg xmlns="http://www.w3.org/2000/svg" class="Icon Icon--xs">
                                        <use xlink:href="#icon-chevron-up"/>
                                    </svg>
                                </button>
                			</div>
                			<div class="MatchSchedule is-selected">
                				<div class="MatchRow MatchRow-header Date">
                					<span class="Date-dayOfWeek">Wednesday</span>
                					<span class="Date-monthAndDay">December 6</span>
                				</div>
                				<div class="MatchRow MatchRow-match">
                					<a href="javascript:void(0)" class="MatchRow-contentWrapper">
                						<div class="MatchRow-team">
                							<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>
                								<div class="TeamLabel-info TeamLabel-info--noScore">
                									<div class="TeamLabel-name">TMN</div>
                								</div>
                							</div>
                						</div>
                						<div class="MatchRow-status">
                							<span class="MatchStatus MatchStatus--transparent">
                                               <span class="MatchStatus-score is-winner">4</span>
                							<span class="MatchStatus-score">-</span>
                							<span class="MatchStatus-score">0</span>
                							</span>
                						</div>
                						<div class="MatchRow-team">
                							<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">TMN</div>
                								</div>
                							</div>
                						</div>
                					</a>
                				</div>
                				<div class="MatchRow MatchRow-header Date">
                					<span class="Date-dayOfWeek">Wednesday</span>
                					<span class="Date-monthAndDay">December 6</span>
                				</div>
                				<div class="MatchRow MatchRow-match">
                					<a href="javascript:void(0)" class="MatchRow-contentWrapper">
                						<div class="MatchRow-team">
                							<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>
                								<div class="TeamLabel-info TeamLabel-info--noScore">
                									<div class="TeamLabel-name">TMN</div>
                								</div>
                							</div>
                						</div>
                						<div class="MatchRow-status">
                							<span class="MatchStatus MatchStatus--transparent">
                                               <span class="MatchStatus-score is-winner">4</span>
                							<span class="MatchStatus-score">-</span>
                							<span class="MatchStatus-score">0</span>
                							</span>
                						</div>
                						<div class="MatchRow-team">
                							<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">TMN</div>
                								</div>
                							</div>
                						</div>
                					</a>
                				</div>
                				<div class="MatchRow MatchRow-match">
                					<a href="javascript:void(0)" class="MatchRow-contentWrapper">
                						<div class="MatchRow-team">
                							<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>
                								<div class="TeamLabel-info TeamLabel-info--noScore">
                									<div class="TeamLabel-name">TMN</div>
                								</div>
                							</div>
                						</div>
                						<div class="MatchRow-status">
                							<span class="MatchStatus MatchStatus--transparent">
                                               <span class="MatchStatus-score is-winner">4</span>
                							<span class="MatchStatus-score">-</span>
                							<span class="MatchStatus-score">0</span>
                							</span>
                						</div>
                						<div class="MatchRow-team">
                							<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">TMN</div>
                								</div>
                							</div>
                						</div>
                					</a>
                				</div>
                				<div class="MatchRow MatchRow-match">
                					<a href="javascript:void(0)" class="MatchRow-contentWrapper">
                						<div class="MatchRow-team">
                							<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>
                								<div class="TeamLabel-info TeamLabel-info--noScore">
                									<div class="TeamLabel-name">TMN</div>
                								</div>
                							</div>
                						</div>
                						<div class="MatchRow-status">
                							<span class="MatchStatus MatchStatus--transparent">
                                               <span class="MatchStatus-score is-winner">4</span>
                							<span class="MatchStatus-score">-</span>
                							<span class="MatchStatus-score">0</span>
                							</span>
                						</div>
                						<div class="MatchRow-team">
                							<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">TMN</div>
                								</div>
                							</div>
                						</div>
                					</a>
                				</div>
                			</div>
                		</div>
                	</div>
                </div>

Match Without Vods

Stacked match without VODs show team standing instead of VODs.

Example
3
Team Name
3
5
Team Name
1
<div style="width: 100%;max-width: 400px;">
                	<div class="MatchStacked MatchStacked--withoutVOD">
                		<div class="MatchStacked-teams">
                			<div class="TeamLabel TeamLabel--horizontalStat">
                				<div class="TeamLabel-block" style="background-color:yellow;">
                					<img src="../assets/toolkit/images/static/team-badge-a.png" alt="" class="TeamLabel-logo">
                				</div>
                				<div class="TeamLabel-stat">
                					3
                				</div>
                				<div class="TeamLabel-info">
                					<div class="TeamLabel-name">Team Name</div>
                				</div>
                				<div class="TeamLabel-stat is-winner">3</div>
                			</div>
                			<div class="TeamLabel TeamLabel--horizontalStat">
                				<div class="TeamLabel-block" style="background-color:orange;">
                					<img src="../assets/toolkit/images/static/team-badge-b.png" alt="" class="TeamLabel-logo">
                				</div>
                				<div class="TeamLabel-stat">
                					5
                				</div>
                				<div class="TeamLabel-info">
                					<div class="TeamLabel-name">Team Name</div>
                				</div>
                				<div class="TeamLabel-stat">1</div>
                			</div>
                		</div>
                		<div class="MatchStacked-details MatchDetail">
                			<div class="MatchDetail-selector">
                				<button class="MatchDetail-selector-expand">
                                    Series Detail
                                    <svg xmlns="http://www.w3.org/2000/svg" class="Icon Icon--xs">
                                        <use xlink:href="#icon-chevron-down"/>
                                    </svg>
                                </button>
                			</div>
                		</div>
                	</div>
                </div>

Header

MatchRow-header and MatchRow-header--today modifier is available for use.

Example
Wednesday December 6

today
<section>
                	<div class="MatchRow MatchRow-header Date">
                		<span class="Date-dayOfWeek">Wednesday</span>
                		<span class="Date-monthAndDay">December 6</span>
                	</div>
                </section>
                
                <br />
                
                <section>
                	<div class="MatchRow MatchRow-header MatchRow-header--today Date">
                		<span class="MatchRow-day">today</span>
                	</div>
                </section>

Title Match

Example
Stage 1 Title Matches Prize Pool: $1,000,000 USD
<div class="MatchRow MatchRow--titleMatch">
                	<span class="MatchRow-left">
                        <span class="MatchRow-stageName">Stage 1</span>
                	<span class="MatchRow-titleMatch">Title Matches</span>
                	</span>
                	<span class="MatchRow-divider"></span>
                	<span class="MatchRow-right">
                        <span class="MatchRow-prizeLabel">Prize Pool:</span>
                	<span class="MatchRow-prize">$1,000,000 USD</span>
                	</span>
                </div>

Match Status

Match Status

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

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

Example

Upcoming

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

Title Match

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

Score

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

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

Live

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

Final

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

Win

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

Small

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

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>

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>

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

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>