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.

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

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

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.

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

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

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.

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

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.

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.

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.

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.

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

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.

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.

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.

Default

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

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

Slim Modifier

<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

<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

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

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>

Email Sign Up

//

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

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

Error Content

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

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

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

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.

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

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.

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

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

Match Result

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

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 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 With Details Expanded

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>

Header

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

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

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>

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.

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.

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

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.

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.

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

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

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

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

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

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

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

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

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.

Default

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

  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>

Player Handle

Player Handle

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

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

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.

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

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.

Default Scroll Area

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

Lorem ipsum

Lorem ipsum

Lorem ipsum

Lorem ipsum

Lorem ipsum

Lorem ipsum

Lorem ipsum

Lorem ipsum

Lorem ipsum

<div className="ScrollArea ScrollArea--vertical">
                	<div className="ScrollArea-container" style="height: 256px;">
                		<div className="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 className="ScrollArea-gradient--horizontal" />
                	<div className="ScrollArea-gradient--vertical" />
                </div>

Search Result

Displays an entry from a returned user search.

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

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

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

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

Result Title can be short

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

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

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

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

Social Dropdown

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

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

Social List

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

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

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

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.

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.

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

Table

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

As All Heroes Avg Per 10 Min League Rank
Hero Damage Done 00,000 3rd
Final Blows 0.0 12th
Eliminations 00.0 8th


Emphasized Table Cell Text
As All Heroes Avg Per 10 Min League Rank
Hero Damage Done 00,000 3rd
Final Blows 0.0 12th
Eliminations 00.0 8th


Extended Header Modifier
As All Heroes Avg Per 10 Min League Rank
Hero Damage Done 00,000 3rd
Final Blows 0.0 12th
Eliminations 00.0 8th


No Table Borders Modifier
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">
                	<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>
                			<td class="Table-data">Final Blows</td>
                			<td class="Table-data">0.0</td>
                			<td class="Table-data">12th</td>
                		</tr>
                		<tr>
                			<td class="Table-data">Eliminations</td>
                			<td class="Table-data">00.0</td>
                			<td class="Table-data">8th</td>
                		</tr>
                	</tbody>
                </table>
                
                <br/><br/>
                
                <h6>Emphasized Table Cell Text</h6>
                
                <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>
                			<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>
                			<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>
                			<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>
                
                <br/><br/>
                
                <h6>Extended Header Modifier</h6>
                
                <table class="Table">
                	<thead>
                		<tr>
                			<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>
                			<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>
                			<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>
                			<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>
                
                <br/><br/>
                
                <h6>No Table Borders Modifier</h6>
                
                <table class="Table Table--noBorderSides">
                	<thead>
                		<tr>
                			<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 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 Table-data--extended 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 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 Table-data--extended 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 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 Table-data--extended 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 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 Table-data--extended 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>

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.

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

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.

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.

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.

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.

Default Tabs

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

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

Tabs With Dark Background

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

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

Rectangular Tabs

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

Minimal Tabs

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

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

Responsive Tabs

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

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.

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.

Default Team Label

12-6
Without Optional Stat Block
Centered Modifier
12-6
Reverse Modifier (Without Stat Block)
Small Modifier
12-6
Inline Modifier (With Small Modifier)
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>
                <h6>Without Optional Stat Block</h6>
                <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>
                
                <h6>Centered Modifier</h6>
                <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>
                <h6>Reverse Modifier (Without Stat Block)</h6>
                <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>
                <h6>Small Modifier</h6>
                <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>
                <h6>Inline Modifier (With Small Modifier)</h6>
                <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.

Default Text Block

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.

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

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.

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.

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

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.

Default Upcoming Match

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

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

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>