Organisms



Accordions

Accordions should only be used to stack information in long-form formats to help with digestibility.

Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS.

<div class="panel-group" id="accordionImage">
        	<div class="panel">
        		<div class="panel-heading">
        			<div class="panel-title"><a class="text-right" data-parent="#accordionImage" data-toggle="collapse" href="#accordionImage-one"><img src="https://bnetcmsus-a.akamaihd.net/cms/page_media/ht/HTA3HMCTAP8D1472230851411.png" />Now with an Image</a></div>
        		</div>
        
        		<div class="panel-collapse collapse in" id="accordionImage-one">
        			<div class="panel-body">
        				<p>Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put
        					a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table,
        					raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS.</p>
        			</div>
        		</div>
        	</div>
        </div>

Article

Article component: src/assets/toolkit/styles/partials/organisms/_article.scss.

The article component overrides the base styles provided by the Blizzard responsive-blog-design styleguide.

Article Title

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce euismod tellus at nisl auctor gravida. Morbi dictum tempor consequat. Integer fringilla nulla nec enim porttitor tincidunt. Cras vitae ultricies nisi. Duis dapibus scelerisque orci. Proin hendrerit tempus tempor. Mauris placerat mauris eget congue tempus. Nam malesuada, eros ac vestibulum pulvinar, eros libero interdum erat, ac mattis eros nibh eu libero. Quisque sollicitudin ac massa eu fringilla. Curabitur feugiat facilisis lacus, eu molestie lectus tempor a. Cras consectetur ultrices erat at pulvinar. Integer vulputate pharetra magna, id rutrum nunc fringilla eu. Aenean ullamcorper diam velit, sed placerat leo tincidunt sed. Duis sagittis, neque quis luctus rhoncus, justo ipsum malesuada erat, quis pulvinar neque justo eget turpis.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce euismod tellus at nisl auctor gravida. Morbi dictum tempor consequat. Integer fringilla nulla nec enim porttitor tincidunt.


alternate-image-name
Cras vitae ultricies nisi. Duis dapibus scelerisque orci. Proin hendrerit tempus tempor. Mauris placerat mauris eget congue tempus. Nam malesuada, eros ac vestibulum pulvinar, eros libero interdum erat, ac mattis eros nibh eu libero. Quisque sollicitudin ac massa eu fringilla. Curabitur feugiat facilisis lacus, eu molestie lectus tempor a. Cras consectetur ultrices erat at pulvinar. Integer vulputate pharetra magna, id rutrum nunc fringilla eu. Aenean ullamcorper diam velit, sed placerat leo tincidunt sed. Duis sagittis, neque quis luctus rhoncus, justo ipsum malesuada erat, quis pulvinar neque justo eget turpis.




Centered Article Title

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce euismod tellus at nisl auctor gravida. Morbi dictum tempor consequat. Integer fringilla nulla nec enim porttitor tincidunt. Cras vitae ultricies nisi. Duis dapibus scelerisque orci. Proin hendrerit tempus tempor. Mauris placerat mauris eget congue tempus. Nam malesuada, eros ac vestibulum pulvinar, eros libero interdum erat, ac mattis eros nibh eu libero. Quisque sollicitudin ac massa eu fringilla. Curabitur feugiat facilisis lacus, eu molestie lectus tempor a. Cras consectetur ultrices erat at pulvinar. Integer vulputate pharetra magna, id rutrum nunc fringilla eu. Aenean ullamcorper diam velit, sed placerat leo tincidunt sed. Duis sagittis, neque quis luctus rhoncus, justo ipsum malesuada erat, quis pulvinar neque justo eget turpis.

<div class="container">
        	<article class="Article">
        		<header class="Article-header">
        			<h1 class="Article-title">Article Title</h1>
        			<div class="Article-metadata">
        				<span 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>
                                <span class="Byline-author">By Blizzard Entertainment</span>
        				</span>
        				</span>
        			</div>
        		</header>
        		<div class="Article-body">
        			<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce euismod tellus at nisl auctor gravida.
        				<a href="">Morbi dictum</a> tempor consequat. Integer fringilla nulla nec enim porttitor tincidunt. Cras vitae ultricies nisi. Duis dapibus scelerisque orci. Proin hendrerit tempus tempor. Mauris placerat mauris eget congue tempus. Nam malesuada,
        				eros ac vestibulum pulvinar, eros libero interdum erat, ac mattis eros nibh eu libero. Quisque sollicitudin ac massa eu fringilla. Curabitur feugiat facilisis lacus, eu molestie lectus tempor a. Cras consectetur ultrices erat at pulvinar. Integer
        				vulputate pharetra magna, id rutrum nunc fringilla eu. Aenean ullamcorper diam velit, sed placerat leo tincidunt sed. Duis sagittis, neque quis luctus rhoncus, justo ipsum malesuada erat, quis pulvinar neque justo eget turpis.
        			</p>
        			<ul>
        				<li>
        					<a href="javascript:void(0)">Link 1</a>
        				</li>
        				<li>
        					<a href="javascript:void(0)">Link 2</a>
        				</li>
        				<li>
        					<a href="javascript:void(0)">Link 3</a>
        				</li>
        			</ul>
        			<p>Lorem ipsum dolor sit amet, consectetur adipiscing <a href="">elit</a>. Fusce euismod tellus at nisl auctor gravida. Morbi dictum tempor consequat. Integer fringilla nulla nec enim porttitor tincidunt.
        			</p>
        			<hr>
        			<p>
        				<figure class="pull-left">
        					<div class="image">
        						<img src="//placehold.it/400x300" alt="alternate-image-name">
        					</div>
        				</figure>
        				Cras vitae ultricies nisi. Duis dapibus scelerisque orci. Proin hendrerit tempus tempor. Mauris placerat mauris eget congue tempus. Nam malesuada, eros ac vestibulum pulvinar, eros libero interdum erat, ac mattis eros nibh eu libero. Quisque sollicitudin
        				ac massa eu fringilla. Curabitur feugiat facilisis lacus, eu molestie lectus tempor a. Cras consectetur ultrices erat at pulvinar. Integer vulputate pharetra magna, id rutrum nunc fringilla eu. Aenean ullamcorper diam velit, sed placerat leo tincidunt
        				sed. Duis sagittis, neque quis luctus rhoncus, justo ipsum malesuada erat, quis pulvinar neque justo eget turpis.
        			</p>
        		</div>
        	</article>
        </div>
        <br>
        <br>
        <hr>
        <article class="Article Article--center">
        	<header class="Article-header">
        		<h1 class="Article-title">Centered Article Title</h1>
        		<div class="Article-metadata">
        			<span 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>
                                <span class="Byline-author">By Blizzard Entertainment</span>
        			</span>
        			</span>
        		</div>
        	</header>
        	<div class="Article-body">
        		<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce euismod tellus at nisl auctor gravida.
        			<a href="">Morbi dictum</a> tempor consequat. Integer fringilla nulla nec enim porttitor tincidunt. Cras vitae ultricies nisi. Duis dapibus scelerisque orci. Proin hendrerit tempus tempor. Mauris placerat mauris eget congue tempus. Nam malesuada, eros
        			ac vestibulum pulvinar, eros libero interdum erat, ac mattis eros nibh eu libero. Quisque sollicitudin ac massa eu fringilla. Curabitur feugiat facilisis lacus, eu molestie lectus tempor a. Cras consectetur ultrices erat at pulvinar. Integer vulputate
        			pharetra magna, id rutrum nunc fringilla eu. Aenean ullamcorper diam velit, sed placerat leo tincidunt sed. Duis sagittis, neque quis luctus rhoncus, justo ipsum malesuada erat, quis pulvinar neque justo eget turpis.
        		</p>
        	</div>
        </article>

Call To Action

Buy Cta

Overwatch game Call To Action section. This will sit over the previous section by around 60px or so. Be sure to make the appropriate accommodations! (Gray background added to show it can be put over any background.)

File location: src/assets/toolkit/styles/partials/organisms/_buy-cta.scss.

Play Overwatch Now!

You can play Overwatch, just like the Pros! Yeah! Do it!

Buy Overwatch


Play Overwatch Now!

You can play Overwatch, just like the Pros! Yeah! Do it!

Buy Overwatch
<div class="ContentModule"></div>
                <div class="BuyCTA">
                	<div class="BuyCTA-topSpacer">
                		<div class="container">
                			<div class="BuyCTA-bucket BuyCTA-bucket--boxes">
                				<div class="BuyCTA-boxes">
                					<div class="BuyCTA-boxesImg"></div>
                				</div>
                			</div>
                			<div class="BuyCTA-bucket BuyCTA-bucket--body">
                				<h4 class="BuyCTA-title">Play Overwatch Now!</h4>
                				<p class="BuyCTA-desc">You can play Overwatch, just like the Pros! Yeah! Do it!</p>
                				<a class="btn btn-primary" href="javascript:void(0)" target="_blank">Buy Overwatch</a>
                				<p class="BuyCTA-legal">Some legal text. All Rights Reserved. All that Jazz.</p>
                			</div>
                			<div class="BuyCTA-bucket BuyCTA-bucket--tracer">
                				<div class="BuyCTA-tracer"></div>
                			</div>
                		</div>
                	</div>
                </div><br/><br/>
                <div class="ContentModule" style="background:#333333;"></div>
                <div class="BuyCTA">
                	<div class="BuyCTA-topSpacer">
                		<div class="container">
                			<div class="BuyCTA-bucket BuyCTA-bucket--boxes">
                				<div class="BuyCTA-boxes">
                					<div class="BuyCTA-boxesImg"></div>
                				</div>
                			</div>
                			<div class="BuyCTA-bucket BuyCTA-bucket--body">
                				<h4 class="BuyCTA-title">Play Overwatch Now!</h4>
                				<p class="BuyCTA-desc">You can play Overwatch, just like the Pros! Yeah! Do it!</p>
                				<a class="btn btn-primary" href="javascript:void(0)" target="_blank">Buy Overwatch</a>
                				<p class="BuyCTA-legal">Some legal text. All Rights Reserved. All that Jazz.</p>
                			</div>
                			<div class="BuyCTA-bucket BuyCTA-bucket--tracer">
                				<div class="BuyCTA-tracer"></div>
                			</div>
                		</div>
                	</div>
                </div>

Social Cta

Global social links section. Links out to various social accounts. This is designed to be used on a dark background, to assist with readability.

File location: src/assets/toolkit/styles/partials/organisms/_social-cta.scss.

Stay Connected

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

<section class="SocialCta">
                	<h3 class="SocialCta-title">Stay Connected</h3>
                	<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>
                		<li class="SocialList-item">
                			<a class="SocialIcon SocialIcon--twitch" href="javascript:void(0)">
                                <svg class="Icon SocialIcon-icon" xmlns="http://www.w3.org/2000/svg">
                                    <use xlink:href="#social-twitch"/>
                                </svg>
                            </a>
                		</li>
                	</ul>
                	<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>
                		<p class="EmailSignUp-legal">More legal text yay</p>
                	</div>
                </section>

Collapsible Container

A container for content that can collapse at a given breakpoint. Uses the Bootstrap collapse script. It's left unstyled for the most part.

Note: There are optional modifiers that allow the collapsible functionality on certain viewports, like .CollapsibleContainer--hidden-md

File location: src/assets/toolkit/styles/partials/organisms/_o-collapsible-container.scss.

Title
Sub title

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum at blandit felis. Nullam porta tristique nibh sed semper. Sed a purus euismod nisi interdum finibus sit posuere. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum at blandit felis. Nullam porta tristique nibh sed semper. Sed a purus euismod nisi interdum finibus sit posuere.

<div class="CollapsibleContainer">
        	<button class="btn btn-stripped CollapsibleContainer-btn collapsed" type="button" data-toggle="collapse" data-target="#collapseExample" aria-expanded="false" aria-controls="collapseExample">
                Toggle Content
                <svg xmlns="http://www.w3.org/2000/svg" class="Icon btn-inner-icon">
                    <use xlink:href="#icon-chevron-down"/>
                </svg>
            </button>
        	<div id="collapseExample" class="CollapsibleContainer-content collapse">
        		<div class="TextBlock TextBlock--padded">
        			<h5 class="TextBlock-title">Title</h5>
        			<h6 class="TextBlock-subTitle">Sub title</h6>
        			<hr class="TextBlock-rule Rule Rule--short Rule--light">
        			<div class="TextBlock-content">
        				<p class="TextBlock-text">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum at blandit felis. Nullam porta tristique nibh sed semper. Sed a purus euismod nisi interdum finibus sit posuere. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum
        					at blandit felis. Nullam porta tristique nibh sed semper. Sed a purus euismod nisi interdum finibus sit posuere.
        				</p>
        			</div>
        			<div class="TextBlock-footer">
        				<a href="javascript:void(0)" class="btn btn-secondary">More</a>
        			</div>
        		</div>
        	</div>
        </div>

Content Modules

Content Modules

Content modules are modular elements controlled by the CMS. They can contain a variety of molecules and other organisms.

File location: src/assets/toolkit/styles/materials/organisms/_content-modules.scss.

Default

Default Content Module Module Link Out

Sample Content

<section class="ContentModule">
                	<div class="container">
                		<header class="ContentModule-header">
                			<h4 class="ContentModule-title">Default Content Module <a href="javascript:void(0)" class="ContentModule-link">
                                Module Link Out
                                <svg xmlns="http://www.w3.org/2000/svg" class="Icon ContentModule-icon">
                                    <use xlink:href="#icon-arrow-right"/>
                                </svg>
                            </a>
                			</h4>
                		</header>
                		<p>Sample Content</p>
                	</div>
                </section>

Alternate Background

Alternate Background Module Link Out

Sample Content

<section class="ContentModule ContentModule--alternate">
                	<div class="container">
                		<header class="ContentModule-header">
                			<h4 class="ContentModule-title">Alternate Background <a href="javascript:void(0)" class="ContentModule-link">Module Link
                                Out
                                <svg xmlns="http://www.w3.org/2000/svg" class="Icon ContentModule-icon">
                                    <use xlink:href="#icon-arrow-right"/>
                                </svg>
                            </a>
                			</h4>
                		</header>
                		<p>Sample Content</p>
                	</div>
                </section>

Thin Modifier

Thin Modifier Module Link Out

Sample Content

<section class="ContentModule ContentModule--thin">
                	<div class="container">
                		<header class="ContentModule-header">
                			<h4 class="ContentModule-title">Thin Modifier <a href="javascript:void(0)" class="ContentModule-link">Module Link
                                Out
                                <svg xmlns="http://www.w3.org/2000/svg" class="Icon ContentModule-icon">
                                    <use xlink:href="#icon-arrow-right"/>
                                </svg>
                            </a>
                			</h4>
                		</header>
                		<p>Sample Content</p>
                	</div>
                </section>

Alternate Thin Modifier

Alternate Thin Modifier Module Link Out

Sample Content

<section class="ContentModule ContentModule--thin ContentModule--alternate">
                	<div class="container">
                		<header class="ContentModule-header">
                			<h4 class="ContentModule-title">Alternate Thin Modifier <a href="javascript:void(0)" class="ContentModule-link">Module Link
                                Out
                                <svg xmlns="http://www.w3.org/2000/svg" class="Icon ContentModule-icon">
                                    <use xlink:href="#icon-arrow-right"/>
                                </svg>
                            </a>
                			</h4>
                		</header>
                		<p>Sample Content</p>
                	</div>
                </section>

Thin Bottom Modifier

Thin bottom section Module Link Out

This content is closer

<section class="ContentModule ContentModule--thin-bottom">
                	<div class="container">
                		<header class="ContentModule-header">
                			<h4 class="ContentModule-title">Thin bottom section <a href="javascript:void(0)" class="ContentModule-link">Module Link
                                Out
                                <svg xmlns="http://www.w3.org/2000/svg" class="Icon ContentModule-icon">
                                    <use xlink:href="#icon-arrow-right"/>
                                </svg>
                            </a>
                			</h4>
                		</header>
                		<p>This content is closer</p>
                	</div>
                </section>

Thin Top Modifier

Thin Top SectionModule Link Out

Sample Content

<section class="ContentModule ContentModule--thin-top">
                	<div class="container">
                		<header class="ContentModule-header">
                			<h4 class="ContentModule-title">Thin Top Section<a href="javascript:void(0)" class="ContentModule-link">Module Link
                                Out
                                <svg xmlns="http://www.w3.org/2000/svg" class="Icon ContentModule-icon">
                                    <use xlink:href="#icon-arrow-right"/>
                                </svg>
                            </a>
                			</h4>
                		</header>
                		<p>Sample Content</p>
                	</div>
                </section>

Data Table

Tabular data. Extends the table molecule. Not shown here, a .table-centered modifier that just centers text and a mostly text modifier called .table-first-col-focus which helps focus the first column text with the rest of the columns playing a supplementary data role.

Default
Heading Heading Heading Heading
Data 1 Data 1 Data 1 Data 1
Data 2 Data 2 Data 2 Data 2
Data 3 Data 3 Data 3 Data 3
Data 4 Data 4 Data 4 Data 4
Data 5 Data 5 Data 5 Data 5
Data 6 Data 6 Data 6 Data 6
Data 7 Data 7 Data 7 Data 7
Data 8 Data 8 Data 8 Data 8
Data 9 Data 9 Data 9 Data 9
Data 10 Data 10 Data 10 Data 10
Data 11 Data 11 Data 11 Data 11
Data 12 Data 12 Data 12 Data 12
Data 13 Data 13 Data 13 Data 13
Data 14 Data 14 Data 14 Data 14
Data 15 Data 15 Data 15 Data 15
Data 16 Data 16 Data 16 Data 16
Data 17 Data 17 Data 17 Data 17
Data 18 Data 18 Data 18 Data 18
Data 19 Data 19 Data 19 Data 19
Data 20 Data 20 Data 20 Data 20
Data 21 Data 21 Data 21 Data 21
Data 22 Data 22 Data 22 Data 22
Data 23 Data 23 Data 23 Data 23
Data 24 Data 24 Data 24 Data 24
Data 25 Data 25 Data 25 Data 25
Data 26 Data 26 Data 26 Data 26
<h6>Default</h6>
        <div class="ScrollArea">
        	<div class="ScrollArea-container">
        		<div class="ScrollArea-content">
        			<table class="table data-table">
        				<thead>
        					<tr>
        						<th>Heading</th>
        						<th>Heading</th>
        						<th>Heading</th>
        						<th>Heading</th>
        					</tr>
        				</thead>
        				<tbody>
        					<tr>
        						<td>Data 1</td>
        						<td>Data 1</td>
        						<td>Data 1</td>
        						<td>Data 1</td>
        					</tr>
        					<tr>
        						<td>Data 2</td>
        						<td>Data 2</td>
        						<td>Data 2</td>
        						<td>Data 2</td>
        					</tr>
        					<tr>
        						<td>Data 3</td>
        						<td>Data 3</td>
        						<td>Data 3</td>
        						<td>Data 3</td>
        					</tr>
        					<tr>
        						<td>Data 4</td>
        						<td>Data 4</td>
        						<td>Data 4</td>
        						<td>Data 4</td>
        					</tr>
        					<tr>
        						<td>Data 5</td>
        						<td>Data 5</td>
        						<td>Data 5</td>
        						<td>Data 5</td>
        					</tr>
        					<tr>
        						<td>Data 6</td>
        						<td>Data 6</td>
        						<td>Data 6</td>
        						<td>Data 6</td>
        					</tr>
        					<tr>
        						<td>Data 7</td>
        						<td>Data 7</td>
        						<td>Data 7</td>
        						<td>Data 7</td>
        					</tr>
        					<tr>
        						<td>Data 8</td>
        						<td>Data 8</td>
        						<td>Data 8</td>
        						<td>Data 8</td>
        					</tr>
        					<tr>
        						<td>Data 9</td>
        						<td>Data 9</td>
        						<td>Data 9</td>
        						<td>Data 9</td>
        					</tr>
        					<tr>
        						<td>Data 10</td>
        						<td>Data 10</td>
        						<td>Data 10</td>
        						<td>Data 10</td>
        					</tr>
        					<tr>
        						<td>Data 11</td>
        						<td>Data 11</td>
        						<td>Data 11</td>
        						<td>Data 11</td>
        					</tr>
        					<tr>
        						<td>Data 12</td>
        						<td>Data 12</td>
        						<td>Data 12</td>
        						<td>Data 12</td>
        					</tr>
        					<tr>
        						<td>Data 13</td>
        						<td>Data 13</td>
        						<td>Data 13</td>
        						<td>Data 13</td>
        					</tr>
        					<tr>
        						<td>Data 14</td>
        						<td>Data 14</td>
        						<td>Data 14</td>
        						<td>Data 14</td>
        					</tr>
        					<tr>
        						<td>Data 15</td>
        						<td>Data 15</td>
        						<td>Data 15</td>
        						<td>Data 15</td>
        					</tr>
        					<tr>
        						<td>Data 16</td>
        						<td>Data 16</td>
        						<td>Data 16</td>
        						<td>Data 16</td>
        					</tr>
        					<tr>
        						<td>Data 17</td>
        						<td>Data 17</td>
        						<td>Data 17</td>
        						<td>Data 17</td>
        					</tr>
        					<tr>
        						<td>Data 18</td>
        						<td>Data 18</td>
        						<td>Data 18</td>
        						<td>Data 18</td>
        					</tr>
        					<tr>
        						<td>Data 19</td>
        						<td>Data 19</td>
        						<td>Data 19</td>
        						<td>Data 19</td>
        					</tr>
        					<tr>
        						<td>Data 20</td>
        						<td>Data 20</td>
        						<td>Data 20</td>
        						<td>Data 20</td>
        					</tr>
        					<tr>
        						<td>Data 21</td>
        						<td>Data 21</td>
        						<td>Data 21</td>
        						<td>Data 21</td>
        					</tr>
        					<tr>
        						<td>Data 22</td>
        						<td>Data 22</td>
        						<td>Data 22</td>
        						<td>Data 22</td>
        					</tr>
        					<tr>
        						<td>Data 23</td>
        						<td>Data 23</td>
        						<td>Data 23</td>
        						<td>Data 23</td>
        					</tr>
        					<tr>
        						<td>Data 24</td>
        						<td>Data 24</td>
        						<td>Data 24</td>
        						<td>Data 24</td>
        					</tr>
        					<tr>
        						<td>Data 25</td>
        						<td>Data 25</td>
        						<td>Data 25</td>
        						<td>Data 25</td>
        					</tr>
        					<tr>
        						<td>Data 26</td>
        						<td>Data 26</td>
        						<td>Data 26</td>
        						<td>Data 26</td>
        					</tr>
        				</tbody>
        			</table>
        		</div>
        	</div>
        </div>

Filters

Filters for targeted search criteria.

File location: src/assets/toolkit/styles/partials/organisms/_filters.scss.

Filter Group Label:
Filter Group Label:
Filter Group Label:
Option 1
Option 2
<form class="Filters">
        	<div class="CollapsibleContainer CollapsibleContainer--visible-sm Filters-wrapper u-spacing-md">
        		<button class="btn Filters-btnCollapse CollapsibleContainer-btn collapsed" type="button" data-toggle="collapse" data-target="#collapseFilter" aria-expanded="false" aria-controls="collapseExample">
                    <svg xmlns="http://www.w3.org/2000/svg" class="Icon btn-inner-icon">
                        <use xlink:href="#icon-chevron-down"/>
                    </svg>
                    Toggle Filters
                </button>
        		<div id="collapseFilter" class="CollapsibleContainer-content collapse">
        			<div class="row">
        				<div class="col-md-6">
        					<div class="Filters-group">
        						<div class="Filters-groupLabel">Filter Group Label:<a href="javascript:void(0)" class="Filters-infoLink">
                                    <svg xmlns="http://www.w3.org/2000/svg" class="Icon Filters-infoIcon">
                                        <use xlink:href="#icon-info"/>
                                    </svg>
                                </a>
        						</div>
        						<div class="input-group Filters-btnWrapper">
        							<div class="Filters-btn">
        								<input type="checkbox" id="group-1-1" name="filterGroup1[]" value="value" data-filter-group="1" class="Filters-checkbox js-filter-checkbox js-filter-reset">
        								<label for="group-1-1" class="Filters-checkboxLabel">All</label>
        							</div>
        							<div class="Filters-btn">
        								<input type="checkbox" id="group-1-2" name="filterGroup1[]" value="value" data-filter-group="1" class="Filters-checkbox js-filter-checkbox">
        								<label for="group-1-2" class="Filters-checkboxLabel">Second</label>
        							</div>
        							<div class="Filters-btn">
        								<input type="checkbox" id="group-1-3" name="filterGroup1[]" value="value" data-filter-group="1" class="Filters-checkbox js-filter-checkbox">
        								<label for="group-1-3" class="Filters-checkboxLabel">Third</label>
        							</div>
        							<div class="Filters-btn">
        								<input type="checkbox" id="group-1-4" name="filterGroup1[]" value="value" data-filter-group="1" class="Filters-checkbox js-filter-checkbox">
        								<label for="group-1-4" class="Filters-checkboxLabel">Fourth</label>
        							</div>
        							<div class="Filters-btn">
        								<input type="checkbox" id="group-1-5" name="filterGroup1[]" value="value" data-filter-group="1" class="Filters-checkbox js-filter-checkbox">
        								<label for="group-1-5" class="Filters-checkboxLabel">Fifth</label>
        							</div>
        							<div class="Filters-btn">
        								<input type="checkbox" id="group-1-6" name="filterGroup1[]" value="value" data-filter-group="1" class="Filters-checkbox js-filter-checkbox">
        								<label for="group-1-6" class="Filters-checkboxLabel">Sixth</label>
        							</div>
        						</div>
        					</div>
        					<div class="Filters-group">
        						<div class="Filters-groupLabel">Filter Group Label:<a href="javascript:void(0)" class="Filters-infoLink">
                                    <svg xmlns="http://www.w3.org/2000/svg" class="Icon Filters-infoIcon">
                                        <use xlink:href="#icon-info"/>
                                    </svg>
                                </a>
        						</div>
        						<div class="input-group Filters-btnWrapper">
        							<div class="Filters-btn">
        								<input type="checkbox" id="group-2-1" name="filterGroup2[]" value="value" data-filter-group="2" class="Filters-checkbox js-filter-checkbox js-filter-reset">
        								<label for="group-2-1" class="Filters-checkboxLabel">All</label>
        							</div>
        							<div class="Filters-btn">
        								<input type="checkbox" id="group-2-2" name="filterGroup2[]" value="value" data-filter-group="2" class="Filters-checkbox js-filter-checkbox">
        								<label for="group-2-2" class="Filters-checkboxLabel">Second</label>
        							</div>
        							<div class="Filters-btn">
        								<input type="checkbox" id="group-2-3" name="filterGroup2[]" value="value" data-filter-group="2" class="Filters-checkbox js-filter-checkbox">
        								<label for="group-2-3" class="Filters-checkboxLabel">Third</label>
        							</div>
        							<div class="Filters-btn">
        								<input type="checkbox" id="group-2-4" name="filterGroup2[]" value="value" data-filter-group="2" class="Filters-checkbox js-filter-checkbox">
        								<label for="group-2-4" class="Filters-checkboxLabel">Fourth</label>
        							</div>
        							<div class="Filters-btn">
        								<input type="checkbox" id="group-2-5" name="filterGroup2[]" value="value" data-filter-group="2" class="Filters-checkbox js-filter-checkbox">
        								<label for="group-2-5" class="Filters-checkboxLabel">Fifth</label>
        							</div>
        							<div class="Filters-btn">
        								<input type="checkbox" id="group-2-6" name="filterGroup2[]" value="value" data-filter-group="2" class="Filters-checkbox js-filter-checkbox">
        								<label for="group-2-6" class="Filters-checkboxLabel">Sixth</label>
        							</div>
        						</div>
        					</div>
        				</div>
        				<div class="col-md-6">
        					<div class="Filters-group">
        						<div class="Filters-groupLabel">Filter Group Label:<a href="javascript:void(0)" class="Filters-infoLink">
                                    <svg xmlns="http://www.w3.org/2000/svg" class="Icon Filters-infoIcon">
                                        <use xlink:href="#icon-info"/>
                                    </svg>
                                </a>
        						</div>
        						<div class="Filters-well">
        							<div class="Filters-groupBlock">
        								<div class="btn-group">
        									<button type="button" class="btn btn-tertiary dropdown-toggle dropdown-toggle-left" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                                                Dropdown
                                                <svg xmlns="http://www.w3.org/2000/svg" class="Icon btn-inner-icon">
                                                    <use xlink:href="#icon-chevron-down"/>
                                                </svg>
                                            </button>
        									<ul class="dropdown-menu">
        										<li><a href="javascript:void(0)">Item 1</a></li>
        										<li><a href="javascript:void(0)">Item 2</a></li>
        										<li><a href="javascript:void(0)">Item 3</a></li>
        									</ul>
        								</div>
        							</div>
        							<div class="Filters-groupBlock">
        								<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>
        							</div>
        						</div>
        					</div>
        				</div>
        			</div>
        		</div>
        	</div>
        	<div class="Filters-search Search Search--grey">
        		<div class="Search-form">
        			<input type="text" placeholder="Placeholder..." class="Search-input">
        			<button type="submit" class="Search-submit">
                        <svg xmlns="http://www.w3.org/2000/svg" class="Icon Search-icon">
                            <use xlink:href="#icon-search"/>
                        </svg>
                    </button>
        		</div>
        	</div>
        </form>

Game Result

Default

2 - 1
Game Result
<div class="GameResult">
                	<div class="container">
                		<div class="TeamScore GameResult-awayTeam">
                			<div class="TeamScore-team">
                				<div class="TeamScore-logo">
                					<div class="AspectRatio AspectRatio--full">
                						<svg xmlns="http://www.w3.org/2000/svg" class="AspectRatio-subject u-transparent--heavy">
                                            <use xlink:href="#icon-team-fallback"/>
                                        </svg>
                					</div>
                				</div>
                				<div class="TeamScore-name hidden-sm hidden-md hidden-lg">TMN</div>
                				<div class="TeamScore-name hidden-xs">Team Name</div>
                			</div>
                			<div class="TeamScore-score">
                				<svg xmlns="http://www.w3.org/2000/svg" class="TeamScore-winnerIcon Icon">
                                    <use xlink:href="#icon-crown"/>
                                </svg>
                				<span class="TeamScore-scoreValue"> </span>
                			</div>
                		</div>
                		<div class="GameResult-scores">
                			<div class="MatchStatus MatchStatus--transparent MatchStatus--large">
                				<span class="MatchStatus-score is-winner">2</span>
                				<span class="MatchStatus-score">-</span>
                				<span class="MatchStatus-score">1</span>
                			</div>
                			<div class="GameResult-caption">Game Result</div>
                		</div>
                		<div class="TeamScore TeamScore--reverse GameResult-homeTeam">
                			<div class="TeamScore-team">
                				<div class="TeamScore-logo">
                					<div class="AspectRatio AspectRatio--full">
                						<svg xmlns="http://www.w3.org/2000/svg" class="AspectRatio-subject u-transparent--heavy">
                                            <use xlink:href="#icon-team-fallback"/>
                                        </svg>
                					</div>
                				</div>
                				<div class="TeamScore-name hidden-sm hidden-md hidden-lg">TMN</div>
                				<div class="TeamScore-name hidden-xs">Team Name</div>
                			</div>
                			<div class="TeamScore-score">
                				<svg xmlns="http://www.w3.org/2000/svg" class="TeamScore-winnerIcon Icon">
                                    <use xlink:href="#icon-crown"/>
                                </svg>
                				<span class="TeamScore-scoreValue"> </span>
                			</div>
                		</div>
                	</div>
                </div>

Game Roster

Default

Roster
  • Player Name

    Player Handle

    Role
  • Player Name

    Player Handle

    Role
  • Player Name

    Player Handle

    Role
  • Player Name

    Player Handle

    Role
  • Player Name

    Player Handle

    Role
  • Player Name

    Player Handle

    Role
  • Player Name

    Player Handle

    Role
  • Player Name

    Player Handle

    Role
  • Player Name

    Player Handle

    Role
  • Player Name

    Player Handle

    Role
  • Player Name

    Player Handle

    Role
  • Player Name

    Player Handle

    Role
<div class="GameRoster">
                	<div class="GameRoster-title">Roster</div>
                	<div class="GameRoster-rosterList">
                		<div class="TeamScore hidden-sm hidden-md hidden-lg GameRoster-team">
                			<div class="TeamScore-team">
                				<div class="TeamScore-logo">
                					<div class="AspectRatio AspectRatio--full">
                						<svg xmlns="http://www.w3.org/2000/svg" class="AspectRatio-subject u-transparent--heavy">
                                            <use xlink:href="#icon-team-fallback"/>
                                        </svg>
                					</div>
                				</div>
                				<div class="TeamScore-name hidden-sm hidden-md hidden-lg">TMN</div>
                				<div class="TeamScore-name hidden-xs">Team Name</div>
                			</div>
                			<div class="TeamScore-score">
                				<svg xmlns="http://www.w3.org/2000/svg" class="TeamScore-winnerIcon Icon">
                                    <use xlink:href="#icon-crown"/>
                                </svg>
                				<span class="TeamScore-scoreValue"> </span>
                			</div>
                		</div>
                		<ul class="GameRoster-awayRoster UnstyledList">
                			<li class="GameRoster-player PlayerHandle PlayerHandle--teamRoster PlayerHandle--reverse">
                				<div class="PlayerHandle-picture">
                					<img src="http://placehold.it/100x100" alt="Player Name">
                				</div>
                				<div class="PlayerHandle-handleWrapper" style="border-color: red;">
                					<h4 class="PlayerHandle-name">Player Handle</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>
                			</li>
                			<li class="GameRoster-player PlayerHandle PlayerHandle--teamRoster PlayerHandle--reverse">
                				<div class="PlayerHandle-picture">
                					<img src="http://placehold.it/100x100" alt="Player Name">
                				</div>
                				<div class="PlayerHandle-handleWrapper" style="border-color: red;">
                					<h4 class="PlayerHandle-name">Player Handle</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>
                			</li>
                			<li class="GameRoster-player PlayerHandle PlayerHandle--teamRoster PlayerHandle--reverse">
                				<div class="PlayerHandle-picture">
                					<img src="http://placehold.it/100x100" alt="Player Name">
                				</div>
                				<div class="PlayerHandle-handleWrapper" style="border-color: red;">
                					<h4 class="PlayerHandle-name">Player Handle</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>
                			</li>
                			<li class="GameRoster-player PlayerHandle PlayerHandle--teamRoster PlayerHandle--reverse">
                				<div class="PlayerHandle-picture">
                					<img src="http://placehold.it/100x100" alt="Player Name">
                				</div>
                				<div class="PlayerHandle-handleWrapper" style="border-color: red;">
                					<h4 class="PlayerHandle-name">Player Handle</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>
                			</li>
                			<li class="GameRoster-player PlayerHandle PlayerHandle--teamRoster PlayerHandle--reverse">
                				<div class="PlayerHandle-picture">
                					<img src="http://placehold.it/100x100" alt="Player Name">
                				</div>
                				<div class="PlayerHandle-handleWrapper" style="border-color: red;">
                					<h4 class="PlayerHandle-name">Player Handle</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>
                			</li>
                			<li class="GameRoster-player PlayerHandle PlayerHandle--teamRoster PlayerHandle--reverse">
                				<div class="PlayerHandle-picture">
                					<img src="http://placehold.it/100x100" alt="Player Name">
                				</div>
                				<div class="PlayerHandle-handleWrapper" style="border-color: red;">
                					<h4 class="PlayerHandle-name">Player Handle</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>
                			</li>
                		</ul>
                		<div class="GameRoster-divider"></div>
                		<div class="TeamScore hidden-sm hidden-md hidden-lg GameRoster-team">
                			<div class="TeamScore-team">
                				<div class="TeamScore-logo">
                					<div class="AspectRatio AspectRatio--full">
                						<svg xmlns="http://www.w3.org/2000/svg" class="AspectRatio-subject u-transparent--heavy">
                                            <use xlink:href="#icon-team-fallback"/>
                                        </svg>
                					</div>
                				</div>
                				<div class="TeamScore-name hidden-sm hidden-md hidden-lg">TMN</div>
                				<div class="TeamScore-name hidden-xs">Team Name</div>
                			</div>
                			<div class="TeamScore-score">
                				<svg xmlns="http://www.w3.org/2000/svg" class="TeamScore-winnerIcon Icon">
                                    <use xlink:href="#icon-crown"/>
                                </svg>
                				<span class="TeamScore-scoreValue"> </span>
                			</div>
                		</div>
                		<ul class="GameRoster-homeRoster UnstyledList">
                			<li class="GameRoster-player PlayerHandle PlayerHandle--teamRoster">
                				<div class="PlayerHandle-picture">
                					<img src="http://placehold.it/100x100" alt="Player Name">
                				</div>
                				<div class="PlayerHandle-handleWrapper" style="border-color: red;">
                					<h4 class="PlayerHandle-name">Player Handle</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>
                			</li>
                			<li class="GameRoster-player PlayerHandle PlayerHandle--teamRoster">
                				<div class="PlayerHandle-picture">
                					<img src="http://placehold.it/100x100" alt="Player Name">
                				</div>
                				<div class="PlayerHandle-handleWrapper" style="border-color: red;">
                					<h4 class="PlayerHandle-name">Player Handle</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>
                			</li>
                			<li class="GameRoster-player PlayerHandle PlayerHandle--teamRoster">
                				<div class="PlayerHandle-picture">
                					<img src="http://placehold.it/100x100" alt="Player Name">
                				</div>
                				<div class="PlayerHandle-handleWrapper" style="border-color: red;">
                					<h4 class="PlayerHandle-name">Player Handle</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>
                			</li>
                			<li class="GameRoster-player PlayerHandle PlayerHandle--teamRoster">
                				<div class="PlayerHandle-picture">
                					<img src="http://placehold.it/100x100" alt="Player Name">
                				</div>
                				<div class="PlayerHandle-handleWrapper" style="border-color: red;">
                					<h4 class="PlayerHandle-name">Player Handle</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>
                			</li>
                			<li class="GameRoster-player PlayerHandle PlayerHandle--teamRoster">
                				<div class="PlayerHandle-picture">
                					<img src="http://placehold.it/100x100" alt="Player Name">
                				</div>
                				<div class="PlayerHandle-handleWrapper" style="border-color: red;">
                					<h4 class="PlayerHandle-name">Player Handle</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>
                			</li>
                			<li class="GameRoster-player PlayerHandle PlayerHandle--teamRoster">
                				<div class="PlayerHandle-picture">
                					<img src="http://placehold.it/100x100" alt="Player Name">
                				</div>
                				<div class="PlayerHandle-handleWrapper" style="border-color: red;">
                					<h4 class="PlayerHandle-name">Player Handle</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>
                			</li>
                		</ul>
                	</div>
                </div>

Live Match Bar

Live Match indicator. Visible on demand via the CMS.

File location: src/assets/toolkit/styles/partials/organisms/_live-match-bar.scss.

Live Soon
Live Now
Compact Mode
<h6>Live Soon</h6>
        <div class="LiveMatch">
        	<div class="TeamLabel TeamLabel--reverse" style="border-color: #a6222a">
        		<div class="TeamLabel-block" style="background: #fed506">
        			<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 A</div>
        			<div class="TeamLabel-name hidden-md hidden-lg">AAA</div>
        		</div>
        	</div>
        	<div class="LiveMatch-liveCTA">
        		<a href="javascript:void(0)" class="LiveMatch-liveLink">
                    Live In
                    <span class="LiveMatch-clock">02:45:03</span>
                </a>
        	</div>
        	<div class="TeamLabel" style="border-color: #0e4ee6">
        		<div class="TeamLabel-block" style="background: #a08fff">
        			<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 B</div>
        			<div class="TeamLabel-name hidden-md hidden-lg">BBB</div>
        		</div>
        	</div>
        </div>
        <h6>Live Now</h6>
        <div class="LiveMatch">
        	<div class="TeamLabel TeamLabel--reverse" style="border-color: #a6222a">
        		<div class="TeamLabel-block" style="background: #fed506">
        			<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 A</div>
        			<div class="TeamLabel-name hidden-md hidden-lg">AAA</div>
        		</div>
        	</div>
        	<div class="LiveMatch-liveCTA is-active">
        		<a href="javascript:void(0)" class="LiveMatch-liveLink">
                    <span class="LiveMatch-indicator">&#x25cf;</span>
                    Live Now
                </a>
        	</div>
        	<div class="TeamLabel" style="border-color: #0e4ee6">
        		<div class="TeamLabel-block" style="background: #a08fff">
        			<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 B</div>
        			<div class="TeamLabel-name hidden-md hidden-lg">BBB</div>
        		</div>
        	</div>
        </div>
        <h6>Compact Mode</h6>
        <div class="is-compact">
        	<div class="LiveMatch">
        		<div class="TeamLabel TeamLabel--reverse" style="border-color: #a6222a">
        			<div class="TeamLabel-block" style="background: #fed506">
        				<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 A</div>
        				<div class="TeamLabel-name hidden-md hidden-lg">AAA</div>
        			</div>
        		</div>
        		<div class="LiveMatch-liveCTA is-active">
        			<a href="javascript:void(0)" class="LiveMatch-liveLink">
                        <span class="LiveMatch-indicator">&#x25cf;</span>
                        Live Now
                    </a>
        		</div>
        		<div class="TeamLabel" style="border-color: #0e4ee6">
        			<div class="TeamLabel-block" style="background: #a08fff">
        				<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 B</div>
        				<div class="TeamLabel-name hidden-md hidden-lg">BBB</div>
        			</div>
        		</div>
        	</div>
        </div>

Live Stream

Live Stream component with video and stats

File location: src/assets/toolkit/styles/partials/organisms/_live-stream.scss.

● Live Now | Game 3 of 4
Team Name
0
Team Name
0
Results
3 1 2 1
2 2 2 1
  • Game 1
    Hanamura
  • Game 2
    Horizon Lunar Colony
  • Game 3
    Ilios
  • Game 4
    Junkertown
<div class="TexturedBackground TexturedBackground--dark u-verticalPadding">
        	<div class="Container Container--wide">
        		<div class="LiveStream">
        			<div class="LiveStream-video">
        				<div class="AspectRatio AspectRatio--full AspectRatio--16x9">
        					<iframe class="VideoPlayer AspectRatio-subject" frameborder="0" allowfullscreen src="https://www.youtube.com/embed/x8lQGmnbGIs?rel=0"></iframe>
        				</div>
        			</div>
        			<div class="LiveStream-info">
        				<div class="LiveStream-header">
        					<div class="LiveStream-header-indicators">
        						<span class="LiveStream-live-indicator">
                                    &#x25cf; Live Now
                                </span> |
        						<span class="LiveStream-game-indicator">
                                    Game 3 of 4
                                </span>
        					</div>
        					<div class="LiveStream-team-scores">
        						<div class="TeamScore TeamScore--box" style="background-color: #ff7606;">
        							<div class="TeamScore-team">
        								<div class="TeamScore-logo">
        									<div class="AspectRatio AspectRatio--full">
        										<svg xmlns="http://www.w3.org/2000/svg" class="Card-imgTop AspectRatio-subject">
                                                    <use xlink:href="#icon-team-fallback"/>
                                                </svg>
        									</div>
        								</div>
        								<div class="TeamScore-name">Team Name</div>
        							</div>
        							<div class="TeamScore-score">
        								<svg xmlns="http://www.w3.org/2000/svg" class="TeamScore-winnerIcon Icon">
                                            <use xlink:href="#icon-crown"/>
                                        </svg>
        								<span class="TeamScore-scoreValue">0</span>
        							</div>
        						</div>
        						<div class="TeamScore TeamScore--box TeamScore--reverse" style="background-color: #426c25;">
        							<div class="TeamScore-team">
        								<div class="TeamScore-logo">
        									<div class="AspectRatio AspectRatio--full">
        										<svg xmlns="http://www.w3.org/2000/svg" class="Card-imgTop AspectRatio-subject">
                                                    <use xlink:href="#icon-team-fallback"/>
                                                </svg>
        									</div>
        								</div>
        								<div class="TeamScore-name">Team Name</div>
        							</div>
        							<div class="TeamScore-score">
        								<svg xmlns="http://www.w3.org/2000/svg" class="TeamScore-winnerIcon Icon">
                                            <use xlink:href="#icon-crown"/>
                                        </svg>
        								<span class="TeamScore-scoreValue">0</span>
        							</div>
        						</div>
        					</div>
        				</div>
        				<div class="LiveStream-results">
        					<div class="LiveStream-results-title">
        						Results
        					</div>
        					<div class="GameScores">
        						<table>
        							<thead>
        								<tr>
        									<th></th>
        									<th>
        										<svg xmlns="http://www.w3.org/2000/svg" class="Icon Icon--whiteFill">
                                                    <use xlink:href="#map-assault"/>
                                                </svg>
        									</th>
        									<th>
        										<svg xmlns="http://www.w3.org/2000/svg" class="Icon Icon--whiteFill">
                                                    <use xlink:href="#map-control"/>
                                                </svg>
        									</th>
        									<th>
        										<svg xmlns="http://www.w3.org/2000/svg" class="Icon Icon--whiteFill">
                                                    <use xlink:href="#map-escort"/>
                                                </svg>
        									</th>
        									<th>
        										<svg xmlns="http://www.w3.org/2000/svg" class="Icon Icon--whiteFill">
                                                    <use xlink:href="#map-hybrid"/>
                                                </svg>
        									</th>
        									<th class="GameScores-spacer"></th>
        									<th></th>
        								</tr>
        							</thead>
        							<tbody>
        								<tr>
        									<td style="background-color: #ff7606;">
        										<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" style="border-color: #ff7606;">1</td>
        								</tr>
        								<tr>
        									<td style="background-color: #426c25;">
        										<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" style="border-color: #426c25;">1</td>
        								</tr>
        							</tbody>
        						</table>
        					</div>
        					<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>
        			</div>
        		</div>
        	</div>
        </div>

Match Overview

Default Overview

01
23
45
<section class="MatchOverview" style="background-image: linear-gradient(to right, red 50%, blue 50%);">
                	<div class="container">
                		<div class="MatchOverview-score TeamScore TeamScore--compact TeamScore--invert u-flex-grow-only">
                			<div class="TeamScore-team">
                				<div class="TeamScore-logo">
                					<div class="AspectRatio AspectRatio--full">
                						<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>
                				<div class="TeamScore-name">
                					<span class="hidden-sm hidden-md hidden-lg hidden-xl">TMN</span>
                					<span class="hidden-xs">Team Name</span>
                				</div>
                			</div>
                		</div>
                		<div class="MatchOverview-status u-flex u-horizontalMargin--small">
                			<div class="MatchStatus MatchStatus--solid u-center">
                				<div class="Countdown">
                					<div class="Countdown-segment" data-unit="days">01</div>
                					<div class="Countdown-segment" data-unit="hrs">23</div>
                					<div class="Countdown-segment" data-unit="min">45</div>
                				</div>
                			</div>
                		</div>
                		<div class="MatchOverview-score TeamScore TeamScore--compact TeamScore--reverse TeamScore--invert u-flex-grow-only">
                			<div class="TeamScore-team">
                				<div class="TeamScore-logo">
                					<div class="AspectRatio AspectRatio--full">
                						<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>
                				<div class="TeamScore-name">
                					<span class="hidden-sm hidden-md hidden-lg hidden-xl">TMN</span>
                					<span class="hidden-xs">Team Name</span>
                				</div>
                			</div>
                		</div>
                	</div>
                </section>

Finished Overview

4
Final
0
<section class="MatchOverview" style="background-image: linear-gradient(to right, red 50%, blue 50%);">
                	<div class="container">
                		<div class="MatchOverview-score TeamScore TeamScore--compact TeamScore--invert TeamScore--winner">
                			<div class="TeamScore-team">
                				<div class="TeamScore-logo">
                					<div class="AspectRatio AspectRatio--full">
                						<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>
                				<div class="TeamScore-name">
                					<span class="hidden-sm hidden-md hidden-lg hidden-xl">TMN</span>
                					<span class="hidden-xs">Team Name</span>
                				</div>
                			</div>
                			<div class="TeamScore-score">
                				<svg xmlns="http://www.w3.org/2000/svg" class="TeamScore-winnerIcon Icon">
                                    <use xlink:href="#icon-crown"/>
                                </svg>
                				<span class="TeamScore-scoreValue">4</span>
                			</div>
                		</div>
                		<div class="MatchOverview-status">
                			<div class="MatchStatus MatchStatus--solid u-center">
                				Final
                			</div>
                		</div>
                		<div class="MatchOverview-score TeamScore TeamScore--compact TeamScore--reverse TeamScore--invert">
                			<div class="TeamScore-team">
                				<div class="TeamScore-logo">
                					<div class="AspectRatio AspectRatio--full">
                						<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>
                				<div class="TeamScore-name">
                					<span class="hidden-sm hidden-md hidden-lg hidden-xl">TMN</span>
                					<span class="hidden-xs">Team Name</span>
                				</div>
                			</div>
                			<div class="TeamScore-score">
                				<svg xmlns="http://www.w3.org/2000/svg" class="TeamScore-winnerIcon Icon">
                                    <use xlink:href="#icon-crown"/>
                                </svg>
                				<span class="TeamScore-scoreValue">0</span>
                			</div>
                		</div>
                	</div>
                </section>

Match Schedule

Upcoming

Displays a week of matches. Each match is grouped by day and ordered by start time. File location: src/assets/toolkit/styles/organism/_match-schedule.scss.

Wednesday December 7
Stage 1 Title Matches Prize Pool: $100,000,000 USD
5:00 pm
5:00 pm
<div class="MatchSchedule">
                	<div class="MatchRow MatchRow-header Date">
                		<span class="Date-dayOfWeek">Wednesday</span>
                		<span class="Date-monthAndDay">December 7</span>
                	</div>
                	<div class="MatchRow MatchRow-match">
                		<a href="javascript:void(0)" class="MatchRow-contentWrapper">
                			<div class="MatchRow-team">
                				<div class="TeamLabel TeamLabel--reverse">
                					<div class="TeamLabel-block">
                						<svg xmlns="http://www.w3.org/2000/svg" class="TeamLabel-logo">
                                            <use xlink:href="#icon-team-fallback" />
                                        </svg>
                					</div>
                					<div class="TeamLabel-info TeamLabel-info--noScore">
                						<div class="TeamLabel-name 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'>12:00 pm</span>
                				</span>
                			</div>
                			<div class="MatchRow-team">
                				<div class="TeamLabel">
                					<div class="TeamLabel-block">
                						<svg xmlns="http://www.w3.org/2000/svg" class="TeamLabel-logo">
                                            <use xlink:href="#icon-team-fallback" />
                                        </svg>
                					</div>
                					<div class="TeamLabel-info TeamLabel-info--noScore">
                						<div class="TeamLabel-name hidden-sm hidden-xs">Super Long 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>
                	<div class="MatchRow MatchRow-match">
                		<a href="javascript:void(0)" class="MatchRow-contentWrapper">
                			<div class="MatchRow-team">
                				<div class="TeamLabel TeamLabel--reverse">
                					<div class="TeamLabel-block">
                						<svg xmlns="http://www.w3.org/2000/svg" class="TeamLabel-logo">
                                            <use xlink:href="#icon-team-fallback" />
                                        </svg>
                					</div>
                					<div class="TeamLabel-info TeamLabel-info--noScore">
                						<div class="TeamLabel-name 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'>12:00 pm</span>
                				</span>
                			</div>
                			<div class="MatchRow-team">
                				<div class="TeamLabel">
                					<div class="TeamLabel-block">
                						<svg xmlns="http://www.w3.org/2000/svg" class="TeamLabel-logo">
                                            <use xlink:href="#icon-team-fallback" />
                                        </svg>
                					</div>
                					<div class="TeamLabel-info TeamLabel-info--noScore">
                						<div class="TeamLabel-name hidden-sm hidden-xs">Super Long 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>
                	<div class="MatchRow MatchRow-match">
                		<a href="javascript:void(0)" class="MatchRow-contentWrapper">
                			<div class="MatchRow-team">
                				<div class="TeamLabel TeamLabel--reverse">
                					<div class="TeamLabel-block">
                						<svg xmlns="http://www.w3.org/2000/svg" class="TeamLabel-logo">
                                            <use xlink:href="#icon-team-fallback" />
                                        </svg>
                					</div>
                					<div class="TeamLabel-info TeamLabel-info--noScore">
                						<div class="TeamLabel-name 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'>12:00 pm</span>
                				</span>
                			</div>
                			<div class="MatchRow-team">
                				<div class="TeamLabel">
                					<div class="TeamLabel-block">
                						<svg xmlns="http://www.w3.org/2000/svg" class="TeamLabel-logo">
                                            <use xlink:href="#icon-team-fallback" />
                                        </svg>
                					</div>
                					<div class="TeamLabel-info TeamLabel-info--noScore">
                						<div class="TeamLabel-name hidden-sm hidden-xs">Super Long 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>
                	<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">$100,000,000 USD</span>
                		</span>
                	</div>
                	<div class="MatchRow MatchRow-match MatchRow-match--tbd">
                		<div class="MatchRow-contentWrapper">
                			<div class="MatchRow-team">
                				<div class="TeamLabel TeamLabel--reverse">
                					<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">Super Long 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">
                						<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>
                	</div>
                	<div class="MatchRow MatchRow-match MatchRow-match--tbd">
                		<div class="MatchRow-contentWrapper">
                			<div class="MatchRow-team">
                				<div class="TeamLabel TeamLabel--reverse">
                					<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">Super Long 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">
                						<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>
                	</div>
                </div>

Past

<div class="MatchSchedule">
                	<div class="MatchRow MatchRow-header Date">
                		<span class="Date-dayOfWeek">Wednesday</span>
                		<span class="Date-monthAndDay">December 6</span>
                	</div>
                	<div class="MatchRow MatchRow-match">
                		<a href="javascript:void(0)" class="MatchRow-contentWrapper">
                			<div class="MatchRow-team">
                				<div class="TeamLabel TeamLabel--reverse">
                					<div class="TeamLabel-block">
                						<svg xmlns="http://www.w3.org/2000/svg" class="TeamLabel-logo">
                                            <use xlink:href="#icon-team-fallback"/>
                                        </svg>
                					</div>
                					<div class="TeamLabel-info TeamLabel-info--noScore">
                						<div class="TeamLabel-name 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 MatchStatus--transparent">
                                    <span class="MatchStatus-score is-winner">4</span>
                				<span class="MatchStatus-score">-</span>
                				<span class="MatchStatus-score">0</span>
                				</span>
                			</div>
                			<div class="MatchRow-team">
                				<div class="TeamLabel">
                					<div class="TeamLabel-block">
                						<svg xmlns="http://www.w3.org/2000/svg" class="TeamLabel-logo">
                                            <use xlink:href="#icon-team-fallback"/>
                                        </svg>
                					</div>
                					<div class="TeamLabel-info TeamLabel-info--noScore">
                						<div class="TeamLabel-name 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>
                	<div class="MatchRow MatchRow-match">
                		<a href="javascript:void(0)" class="MatchRow-contentWrapper">
                			<div class="MatchRow-team">
                				<div class="TeamLabel TeamLabel--reverse">
                					<div class="TeamLabel-block">
                						<svg xmlns="http://www.w3.org/2000/svg" class="TeamLabel-logo">
                                            <use xlink:href="#icon-team-fallback"/>
                                        </svg>
                					</div>
                					<div class="TeamLabel-info TeamLabel-info--noScore">
                						<div class="TeamLabel-name 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 MatchStatus--transparent">
                                    <span class="MatchStatus-score is-winner">4</span>
                				<span class="MatchStatus-score">-</span>
                				<span class="MatchStatus-score">0</span>
                				</span>
                			</div>
                			<div class="MatchRow-team">
                				<div class="TeamLabel">
                					<div class="TeamLabel-block">
                						<svg xmlns="http://www.w3.org/2000/svg" class="TeamLabel-logo">
                                            <use xlink:href="#icon-team-fallback"/>
                                        </svg>
                					</div>
                					<div class="TeamLabel-info TeamLabel-info--noScore">
                						<div class="TeamLabel-name 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>
                	<div class="MatchRow MatchRow-match">
                		<a href="javascript:void(0)" class="MatchRow-contentWrapper">
                			<div class="MatchRow-team">
                				<div class="TeamLabel TeamLabel--reverse">
                					<div class="TeamLabel-block">
                						<svg xmlns="http://www.w3.org/2000/svg" class="TeamLabel-logo">
                                            <use xlink:href="#icon-team-fallback"/>
                                        </svg>
                					</div>
                					<div class="TeamLabel-info TeamLabel-info--noScore">
                						<div class="TeamLabel-name 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 MatchStatus--transparent">
                                    <span class="MatchStatus-score is-winner">4</span>
                				<span class="MatchStatus-score">-</span>
                				<span class="MatchStatus-score">0</span>
                				</span>
                			</div>
                			<div class="MatchRow-team">
                				<div class="TeamLabel">
                					<div class="TeamLabel-block">
                						<svg xmlns="http://www.w3.org/2000/svg" class="TeamLabel-logo">
                                            <use xlink:href="#icon-team-fallback"/>
                                        </svg>
                					</div>
                					<div class="TeamLabel-info TeamLabel-info--noScore">
                						<div class="TeamLabel-name 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>
                </div>

Today

<div class="MatchSchedule">
                	<div class="MatchRow MatchRow-header MatchRow-header--today Date">
                		<span class="MatchRow-day">Today</span>
                	</div>
                	<div class="MatchRow MatchRow-match">
                		<a href="javascript:void(0)" class="MatchRow-contentWrapper">
                			<div class="MatchRow-team">
                				<div class="TeamLabel TeamLabel--reverse">
                					<div class="TeamLabel-block">
                						<svg xmlns="http://www.w3.org/2000/svg" class="TeamLabel-logo">
                                            <use xlink:href="#icon-team-fallback"/>
                                        </svg>
                					</div>
                					<div class="TeamLabel-info TeamLabel-info--noScore">
                						<div class="TeamLabel-name 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 MatchStatus--transparent">
                                    <span class="MatchStatus-score is-winner">4</span>
                				<span class="MatchStatus-score">-</span>
                				<span class="MatchStatus-score">0</span>
                				</span>
                			</div>
                			<div class="MatchRow-team">
                				<div class="TeamLabel">
                					<div class="TeamLabel-block">
                						<svg xmlns="http://www.w3.org/2000/svg" class="TeamLabel-logo">
                                            <use xlink:href="#icon-team-fallback"/>
                                        </svg>
                					</div>
                					<div class="TeamLabel-info TeamLabel-info--noScore">
                						<div class="TeamLabel-name 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>
                	<div class="MatchRow MatchRow-match">
                		<a href="javascript:void(0)" class="MatchRow-contentWrapper">
                			<div class="MatchRow-team">
                				<div class="TeamLabel TeamLabel--reverse">
                					<div class="TeamLabel-block">
                						<svg xmlns="http://www.w3.org/2000/svg" class="TeamLabel-logo">
                                            <use xlink:href="#icon-team-fallback"/>
                                        </svg>
                					</div>
                					<div class="TeamLabel-info TeamLabel-info--noScore">
                						<div class="TeamLabel-name 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 MatchStatus--transparent">
                                    <span class="MatchStatus-score is-winner">4</span>
                				<span class="MatchStatus-score">-</span>
                				<span class="MatchStatus-score">0</span>
                				</span>
                			</div>
                			<div class="MatchRow-team">
                				<div class="TeamLabel">
                					<div class="TeamLabel-block">
                						<svg xmlns="http://www.w3.org/2000/svg" class="TeamLabel-logo">
                                            <use xlink:href="#icon-team-fallback"/>
                                        </svg>
                					</div>
                					<div class="TeamLabel-info TeamLabel-info--noScore">
                						<div class="TeamLabel-name 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>
                	<div class="MatchRow MatchRow-match">
                		<a href="javascript:void(0)" class="MatchRow-contentWrapper">
                			<div class="MatchRow-team">
                				<div class="TeamLabel TeamLabel--reverse">
                					<div class="TeamLabel-block">
                						<svg xmlns="http://www.w3.org/2000/svg" class="TeamLabel-logo">
                                            <use xlink:href="#icon-team-fallback"/>
                                        </svg>
                					</div>
                					<div class="TeamLabel-info TeamLabel-info--noScore">
                						<div class="TeamLabel-name 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 MatchStatus--live">
                                    <span class="MatchStatus-status">live</span>
                				</span>
                			</div>
                			<div class="MatchRow-team">
                				<div class="TeamLabel">
                					<div class="TeamLabel-block">
                						<svg xmlns="http://www.w3.org/2000/svg" class="TeamLabel-logo">
                                            <use xlink:href="#icon-team-fallback"/>
                                        </svg>
                					</div>
                					<div class="TeamLabel-info TeamLabel-info--noScore">
                						<div class="TeamLabel-name 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>
                </div>

Mobile Menu

Mobile nav panel. File location: src/assets/toolkit/styles/partials/organisms/_mobile-menu.scss.

Unused due to global navbar

<div class="MobileMenu js-mobile-menu">
        	<div class="MobileMenu-header">
        		<a href="javascript:void(0)" class="c-Header-logo">
                    <svg xmlns="http://www.w3.org/2000/svg" class="Icon c-Logo-owl">
                        <use xlink:href="#logo-owl"/>
                    </svg>
                </a>
        	</div>
        	<nav role="navigation" class="Nav Nav--mobile">
        		<ul class="Nav-list">
        			<li class="Nav-item">
        				<a href="javascript:void(0)" class="Nav-link is-active">Active Item</a>
        			</li>
        			<li class="Nav-item">
        				<a href="javascript:void(0)" class="Nav-link is-disabled">Disabled Item</a>
        			</li>
        			<li class="Nav-item">
        				<a href="javascript:void(0)" class="Nav-link">Item 0</a>
        			</li>
        			<li class="Nav-item">
        				<a href="javascript:void(0)" class="Nav-link">Item 1</a>
        			</li>
        			<li class="Nav-item">
        				<a href="javascript:void(0)" class="Nav-link">Item 2</a>
        			</li>
        			<li class="Nav-item">
        				<a href="javascript:void(0)" class="Nav-link">Item 3</a>
        			</li>
        			<li class="Nav-item">
        				<a href="javascript:void(0)" class="Nav-link">Item 4</a>
        			</li>
        		</ul>
        	</nav>
        	<div class="Search Search--thin Search--grey Search--left">
        		<form action="" class="Search-form">
        			<input type="text" class="Search-input">
        			<button type="submit" class="Search-submit">
                        <svg xmlns="http://www.w3.org/2000/svg" class="Icon Search-icon">
                            <use xlink:href="#icon-search"/>
                        </svg>
                    </button>
        		</form>
        	</div>
        	<button class="Button Button--primary MobileMenu-btn">Log In</button>
        </div>

Primary Navigation

Primary navigation component. Normally set to position: fixed.

File location: src/assets/toolkit/styles/partials/organisms/_header.scss.

Not shown here: Fixed position transition and state change on page scroll. Also the mobile menu is not functional here.

<div class="c-Header">
        	<div class="c-Header-main">
        		<div class="c-Header-inner">
        			<a href="javascript:void(0)" class="c-Header-block c-Header-block--mobileToggle js-toggle-mobile-menu">
                        <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 71.8 54.6" class="c-Icon c-Header-hamburger">
                            <title>Hamburger</title>
                            <path d="M0 0v8.6h71.8V0zm0 31.6h71.8V23H0zm0 23h71.8V46H0z"/>
                        </svg>
                    </a>
        			<div class="c-Header-block c-Header-block--logo">
        				<a href="javascript:void(0)" class="c-Header-logo">
                            <svg xmlns="http://www.w3.org/2000/svg" class="a-Icon c-Logo-owl">
                                <use xlink:href="#logo-owl"/>
                            </svg>
                        </a>
        			</div>
        			<div class="c-Header-block c-Header-block--nav">
        				<nav role="navigation" class="Nav">
        					<ul class="UnstyledList Nav-list">
        						<li class="Nav-item dropdown">
        							<a href="javascript:void(0)" class="Nav-link" data-toggle="dropdown">Dropdown
                                        <svg xmlns="http://www.w3.org/2000/svg" class="Icon Icon--sm Icon--transition">
                                            <use xlink:href="#icon-chevron-down"/>
                                        </svg>
                                    </a>
        							<ul class="Nav-dropdown-menu dropdown-menu">
        								<li class="Nav-item">
        									<a href="javascript:void(0)" class="Nav-link is-disabled">Disabled Item</a>
        								</li>
        								<li class="Nav-item">
        									<a href="javascript:void(0)" class="Nav-link">Item 0</a>
        								</li>
        								<li class="Nav-item">
        									<a href="javascript:void(0)" class="Nav-link">Item 1</a>
        								</li>
        								<li class="Nav-item">
        									<a href="javascript:void(0)" class="Nav-link">Item 2</a>
        								</li>
        							</ul>
        						</li>
        						<li class="Nav-item">
        							<a href="javascript:void(0)" class="Nav-link is-disabled">Disabled Item</a>
        						</li>
        						<li class="Nav-item">
        							<a href="javascript:void(0)" class="Nav-link">Item 0</a>
        						</li>
        						<li class="Nav-item">
        							<a href="javascript:void(0)" class="Nav-link">Item 1</a>
        						</li>
        						<li class="Nav-item">
        							<a href="javascript:void(0)" class="Nav-link">Item 2</a>
        						</li>
        					</ul>
        				</nav>
        			</div>
        			<div class="c-Header-block c-Header-block--fill hidden-xs">
        				<div class="Search Search--thin Search--stretch">
        					<form action="" class="Search-form">
        						<input type="text" class="Search-input">
        						<button type="button" class="Search-open">
                                    <svg xmlns="http://www.w3.org/2000/svg" class="Icon Icon--lightFill">
                                        <use xlink:href="#icon-search"/>
                                    </svg>
                                </button>
        						<button type="button" class="Search-close">
                                    <svg xmlns="http://www.w3.org/2000/svg" class="Icon Icon--lightFill">
                                        <use xlink:href="#icon-close"/>
                                    </svg>
                                </button>
        					</form>
        				</div>
        			</div>
        			<div class="c-Header-block">
        				<a href="javascript:void(0)" class="c-Header-loginBtn Button hidden-xs">Log In</a>
        			</div>
        		</div>
        	</div>
        </div>

Schedule Widget

Displays collection of WidgetDays, centering on the current WidgetDay when there is a live one happening.

File location: src/assets/toolkit/styles/materials/organisms/_schedule-widget.scss.

sun
1/5
5:00 pm
1/5
tea 0
tea 4
7:30 pm
1/5
tea 3
tea 2
10:00 pm
1/5
tea 4
tea 0
today
5:00 pm
1/6
tea 3
tea 2
live now
game 2
team name here 0
team name here 2
10:00 pm
1/6
tea --
tea --
fri
1/10
5:00 pm
1/10
tea --
tea --
7:30 pm
tea --
tea --
10:00 pm
1/10
tea --
tea --
<div class="ScheduleWidget">
        	<div class="ScheduleWidget-daysScrollWrapper">
        		<div class="ScheduleWidget-button ScheduleWidget-button--prev">
        			<svg class="Icon" xmlns="http://www.w3.org/2000/svg">
                        <use xlink:href="#icon-chevron-left"/>
                    </svg>
        		</div>
        		<div class="ScheduleWidget-days">
        			<div class="WidgetDay WidgetDay--past">
        				<div class="WidgetDay-wrapper">
        					<div class="WidgetDay-day ContentBox ContentBox--no-shadow FlexElement FlexElement--column">
        						<div class="WidgetDay-dayOfWeek text-center u-bold u-uppercase">
        							sun
        						</div>
        						<div class="WidgetDay-date text-center">
        							1/5
        						</div>
        					</div>
        					<div class="WidgetDay-matches ContentBox">
        						<div class="WidgetMatch WidgetMatch--completed">
        							<div class="WidgetMatch-header">
        								<div class="WidgetMatch-time u-uppercase">
        									5:00 pm
        								</div>
        								<div class="WidgetMatch-date">
        									1/5
        								</div>
        							</div>
        							<div class="WidgetMatch-team WidgetMatch-team-nonWinner 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 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>
        						<div class="WidgetMatch WidgetMatch--completed">
        							<div class="WidgetMatch-header">
        								<div class="WidgetMatch-time u-uppercase">
        									7:30 pm
        								</div>
        								<div class="WidgetMatch-date">
        									1/5
        								</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">3</span>
        								</div>
        							</div>
        							<div class="WidgetMatch-team WidgetMatch-team-nonWinner  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">2</span>
        								</div>
        							</div>
        						</div>
        						<div class="WidgetMatch WidgetMatch--completed">
        							<div class="WidgetMatch-header">
        								<div class="WidgetMatch-time u-uppercase">
        									10:00 pm
        								</div>
        								<div class="WidgetMatch-date">
        									1/5
        								</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 class="WidgetMatch-team WidgetMatch-team-nonWinner 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>
        					</div>
        				</div>
        			</div>
        			<div class="WidgetDay WidgetDay--live">
        				<div class="WidgetDay-wrapper">
        					<div class="WidgetDay-day ContentBox ContentBox--no-shadow FlexElement FlexElement--column">
        						<div class="WidgetDay-dayOfWeek text-center u-bold u-uppercase">
        							today
        						</div>
        					</div>
        					<div class="WidgetDay-matches">
        						<div class="WidgetMatch WidgetMatch--completed">
        							<div class="WidgetMatch-header">
        								<div class="WidgetMatch-time u-uppercase">
        									5:00 pm
        								</div>
        								<div class="WidgetMatch-date">
        									1/6
        								</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">
        									<span class="TeamLabel-name u-uppercase">tea</span>
        									<span class="TeamLabel-stat">3</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">2</span>
        								</div>
        							</div>
        						</div>
        						<div class="WidgetMatch WidgetMatch--live">
        							<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>
        						<div class="WidgetMatch">
        							<div class="WidgetMatch-header">
        								<div class="WidgetMatch-time u-uppercase">
        									10:00 pm
        								</div>
        								<div class="WidgetMatch-date">
        									1/6
        								</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>
        					</div>
        				</div>
        			</div>
        			<div class="WidgetDay">
        				<div class="WidgetDay-day ContentBox ContentBox--no-shadow FlexElement FlexElement--column">
        					<div class="WidgetDay-dayOfWeek text-center u-bold u-uppercase">
        						fri
        					</div>
        					<div class="WidgetDay-date text-center">
        						1/10
        					</div>
        				</div>
        				<div class="WidgetDay-matches">
        					<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">
        								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>
        					<div class="WidgetMatch ContentBox ContentBox--no-shadow">
        						<div class="WidgetMatch-time u-uppercase">
        							7:30 pm
        						</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>
        					<div class="WidgetMatch ContentBox ContentBox--no-shadow">
        						<div class="WidgetMatch-header">
        							<div class="WidgetMatch-time u-uppercase">
        								10:00 pm
        							</div>
        							<div class="WidgetMatch-date">
        								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>
        				</div>
        			</div>
        		</div>
        		<div class="ScheduleWidget-button ScheduleWidget-button--next">
        			<svg class="Icon" xmlns="http://www.w3.org/2000/svg">
                        <use xlink:href="#icon-chevron-right"/>
                    </svg>
        		</div>
        	</div>
        </div>

Standings

Default

Displays a table of ranked entities. File location: src/assets/toolkit/styles/materials/organisms/_standings.scss.

Win Loss
1
7 1
2
6 2
3
5 3
<div class="Standings">
                	<div class="table-responsive">
                		<table class="table table-striped table-condensed u-verticalPadding--x-small ScrollArea-content">
                			<thead class="Standings-head">
                				<tr>
                					<th></th>
                					<th class="Standings-header-team"></th>
                					<th class="Standings-header">Win</th>
                					<th class="Standings-header">Loss</th>
                				</tr>
                			</thead>
                			<tbody class="Standings-body">
                				<tr>
                					<td class="u-bold">
                						1
                					</td>
                					<td class="Standings-details-team">
                						<div class="IconLabel">
                							<span class="IconLabel-item">
                                                <svg xmlns="http://www.w3.org/2000/svg" class="Icon">
                                                    <use xlink:href="#icon-team-fallback"/>
                                                </svg>
                                            </span>
                							<span class="IconLabel-item hidden-xs">
                                                <div>Team Name Here</div>
                                            </span>
                							<span class="IconLabel-item hidden-sm hidden-md hidden-lg hidden-xl">
                                                <div>TEAM1</div>
                                            </span>
                						</div>
                					</td>
                					<td class="Standings-details">7</td>
                					<td class="Standings-details">1</td>
                				</tr>
                				<tr>
                					<td>
                						<b>2</b>
                					</td>
                					<td class="Standings-details-team">
                						<div class="IconLabel">
                							<span class="IconLabel-item">
                                                <svg xmlns="http://www.w3.org/2000/svg" class="Icon">
                                                    <use xlink:href="#icon-team-fallback"/>
                                                </svg>
                                            </span>
                							<span class="IconLabel-item hidden-xs">
                                                <div>Team Name Here</div>
                                            </span>
                							<span class="IconLabel-item hidden-sm hidden-md hidden-lg hidden-xl">
                                                <div>TEAM1</div>
                                            </span>
                						</div>
                					</td>
                					<td class="Standings-details">6</td>
                					<td class="Standings-details">2</td>
                				</tr>
                				<tr>
                					<td>
                						<b>3</b>
                					</td>
                					<td class="Standings-details-team">
                						<div class="IconLabel">
                							<span class="IconLabel-item">
                                                <svg xmlns="http://www.w3.org/2000/svg" class="Icon">
                                                    <use xlink:href="#icon-team-fallback"/>
                                                </svg>
                                            </span>
                							<span class="IconLabel-item hidden-xs">
                                                <div>Team Name Here</div>
                                            </span>
                							<span class="IconLabel-item hidden-sm hidden-md hidden-lg hidden-xl">
                                                <div>TEAM1</div>
                                            </span>
                						</div>
                					</td>
                					<td class="Standings-details">5</td>
                					<td class="Standings-details">3</td>
                				</tr>
                			</tbody>
                		</table>
                	</div>
                </div>

No Side Scrolling Modifier

A standings table built to hold less columns and not have a side-scrolling experience. File location: src/assets/toolkit/styles/materials/organisms/_standings.scss.

Rank Team Win Loss
1
Team Name Here
TEAM1
7 1
2
Team Name Here
TEAM1
6 2
3
Team Name Here
TEAM1
5 3
<div class="Standings Standings--noSideScroll">
                	<table class="table table-striped table-condensed">
                		<thead class="Standings-head">
                			<tr>
                				<th class="Standings-header Standings-header-rank">Rank</th>
                				<th class="Standings-header Standings-header-team">Team</th>
                				<th class="Standings-header">Win</th>
                				<th class="Standings-header">Loss</th>
                			</tr>
                			<tr class="Standings-transparentDivider"></tr>
                		</thead>
                		<tbody class="Standings-body">
                			<tr>
                				<td class="Standings-details u-bold">
                					1
                				</td>
                				<td class="Standings-details-team">
                					<div class="IconLabel">
                						<span class="IconLabel-item">
                                            <svg xmlns="http://www.w3.org/2000/svg" class="Icon">
                                                <use xlink:href="#icon-team-fallback"/>
                                            </svg>
                                        </span>
                						<span class="IconLabel-item">
                                            <div>Team Name Here</div>
                                        </span>
                						<span class="IconLabel-item">
                                            <div>TEAM1</div>
                                        </span>
                					</div>
                				</td>
                				<td class="Standings-details">7</td>
                				<td class="Standings-details">1</td>
                			</tr>
                			<tr>
                				<td class="Standings-details u-bold">
                					2
                				</td>
                				<td class="Standings-details-team">
                					<div class="IconLabel">
                						<span class="IconLabel-item">
                                            <svg xmlns="http://www.w3.org/2000/svg" class="Icon">
                                                <use xlink:href="#icon-team-fallback"/>
                                            </svg>
                                        </span>
                						<span class="IconLabel-item">
                                            <div>Team Name Here</div>
                                        </span>
                						<span class="IconLabel-item">
                                            <div>TEAM1</div>
                                        </span>
                					</div>
                				</td>
                				<td class="Standings-details">6</td>
                				<td class="Standings-details">2</td>
                			</tr>
                			<tr>
                				<td class="Standings-details u-bold">
                					3
                				</td>
                				<td class="Standings-details-team">
                					<div class="IconLabel">
                						<span class="IconLabel-item">
                                            <svg xmlns="http://www.w3.org/2000/svg" class="Icon">
                                                <use xlink:href="#icon-team-fallback"/>
                                            </svg>
                                        </span>
                						<span class="IconLabel-item">
                                            <div>Team Name Here</div>
                                        </span>
                						<span class="IconLabel-item">
                                            <div>TEAM1</div>
                                        </span>
                					</div>
                				</td>
                				<td class="Standings-details">5</td>
                				<td class="Standings-details">3</td>
                			</tr>
                		</tbody>
                	</table>
                </div>

Standings Group

Rank Team Win Loss
1
Team Name Here
TEAM1
7 1
2
Team Name Here
TEAM1
6 2
3
Team Name Here
TEAM1
5 3
Rank Team Win Loss
1
Team Name Here
TEAM1
7 1
2
Team Name Here
TEAM1
6 2
3
Team Name Here
TEAM1
5 3
Rank Team Win Loss
1
Team Name Here
TEAM1
7 1
2
Team Name Here
TEAM1
6 2
3
Team Name Here
TEAM1
5 3
<div class="StandingsGroup">
                	<div class="Standings Standings--noSideScroll">
                		<table class="table table-striped table-condensed u-verticalPadding--x-small">
                			<thead class="Standings-head">
                				<tr>
                					<th class="Standings-header Standings-rank">Rank</th>
                					<th class="Standings-header Standings-header-team">Team</th>
                					<th class="Standings-header">Win</th>
                					<th class="Standings-header">Loss</th>
                				</tr>
                				<tr class="Standings-transparentDivider"></tr>
                			</thead>
                			<tbody class="Standings-body">
                				<tr>
                					<td class="Standings-details">
                						<b>1</b>
                					</td>
                					<td class="Standings-details-team">
                						<div class="IconLabel">
                							<span class="IconLabel-item">
                                                <svg xmlns="http://www.w3.org/2000/svg" class="Icon">
                                                    <use xlink:href="#icon-team-fallback"/>
                                                </svg>
                                            </span>
                							<span class="IconLabel-item">
                                                <div>Team Name Here</div>
                                            </span>
                							<span class="IconLabel-item">
                                                <div>TEAM1</div>
                                            </span>
                						</div>
                					</td>
                					<td class="Standings-details">7</td>
                					<td class="Standings-details">1</td>
                				</tr>
                				<tr>
                					<td class="Standings-details">
                						<b>2</b>
                					</td>
                					<td class="Standings-details-team">
                						<div class="IconLabel">
                							<span class="IconLabel-item">
                                                <svg xmlns="http://www.w3.org/2000/svg" class="Icon">
                                                    <use xlink:href="#icon-team-fallback"/>
                                                </svg>
                                            </span>
                							<span class="IconLabel-item">
                                                <div>Team Name Here</div>
                                            </span>
                							<span class="IconLabel-item">
                                                <div>TEAM1</div>
                                            </span>
                						</div>
                					</td>
                					<td class="Standings-details">6</td>
                					<td class="Standings-details">2</td>
                				</tr>
                				<tr>
                					<td class="Standings-details">
                						<b>3</b>
                					</td>
                					<td class="Standings-details-team">
                						<div class="IconLabel">
                							<span class="IconLabel-item">
                                                <svg xmlns="http://www.w3.org/2000/svg" class="Icon">
                                                    <use xlink:href="#icon-team-fallback"/>
                                                </svg>
                                            </span>
                							<span class="IconLabel-item">
                                                <div>Team Name Here</div>
                                            </span>
                							<span class="IconLabel-item">
                                                <div>TEAM1</div>
                                            </span>
                						</div>
                					</td>
                					<td class="Standings-details">5</td>
                					<td class="Standings-details">3</td>
                				</tr>
                			</tbody>
                		</table>
                	</div>
                	<div class="Standings Standings--noSideScroll">
                		<table class="table table-striped table-condensed u-verticalPadding--x-small">
                			<thead class="Standings-head">
                				<tr>
                					<th class="Standings-header Standings-rank">Rank</th>
                					<th class="Standings-header Standings-header-team">Team</th>
                					<th class="Standings-header">Win</th>
                					<th class="Standings-header">Loss</th>
                				</tr>
                				<tr class="Standings-transparentDivider"></tr>
                			</thead>
                			<tbody class="Standings-body">
                				<tr>
                					<td class="Standings-details">
                						<b>1</b>
                					</td>
                					<td class="Standings-details-team">
                						<div class="IconLabel">
                							<span class="IconLabel-item">
                                                <svg xmlns="http://www.w3.org/2000/svg" class="Icon">
                                                    <use xlink:href="#icon-team-fallback"/>
                                                </svg>
                                            </span>
                							<span class="IconLabel-item">
                                                <div>Team Name Here</div>
                                            </span>
                							<span class="IconLabel-item">
                                                <div>TEAM1</div>
                                            </span>
                						</div>
                					</td>
                					<td class="Standings-details">7</td>
                					<td class="Standings-details">1</td>
                				</tr>
                				<tr>
                					<td class="Standings-details">
                						<b>2</b>
                					</td>
                					<td class="Standings-details-team">
                						<div class="IconLabel">
                							<span class="IconLabel-item">
                                                <svg xmlns="http://www.w3.org/2000/svg" class="Icon">
                                                    <use xlink:href="#icon-team-fallback"/>
                                                </svg>
                                            </span>
                							<span class="IconLabel-item">
                                                <div>Team Name Here</div>
                                            </span>
                							<span class="IconLabel-item">
                                                <div>TEAM1</div>
                                            </span>
                						</div>
                					</td>
                					<td class="Standings-details">6</td>
                					<td class="Standings-details">2</td>
                				</tr>
                				<tr>
                					<td class="Standings-details">
                						<b>3</b>
                					</td>
                					<td class="Standings-details-team">
                						<div class="IconLabel">
                							<span class="IconLabel-item">
                                                <svg xmlns="http://www.w3.org/2000/svg" class="Icon">
                                                    <use xlink:href="#icon-team-fallback"/>
                                                </svg>
                                            </span>
                							<span class="IconLabel-item">
                                                <div>Team Name Here</div>
                                            </span>
                							<span class="IconLabel-item">
                                                <div>TEAM1</div>
                                            </span>
                						</div>
                					</td>
                					<td class="Standings-details">5</td>
                					<td class="Standings-details">3</td>
                				</tr>
                			</tbody>
                		</table>
                	</div>
                	<div class="Standings Standings--noSideScroll">
                		<table class="table table-striped table-condensed u-verticalPadding--x-small">
                			<thead class="Standings-head">
                				<tr>
                					<th class="Standings-header Standings-rank">Rank</th>
                					<th class="Standings-header Standings-header-team">Team</th>
                					<th class="Standings-header">Win</th>
                					<th class="Standings-header">Loss</th>
                				</tr>
                				<tr class="Standings-transparentDivider"></tr>
                			</thead>
                			<tbody class="Standings-body">
                				<tr>
                					<td class="Standings-details">
                						<b>1</b>
                					</td>
                					<td class="Standings-details-team">
                						<div class="IconLabel">
                							<span class="IconLabel-item">
                                                <svg xmlns="http://www.w3.org/2000/svg" class="Icon">
                                                    <use xlink:href="#icon-team-fallback"/>
                                                </svg>
                                            </span>
                							<span class="IconLabel-item">
                                                <div>Team Name Here</div>
                                            </span>
                							<span class="IconLabel-item">
                                                <div>TEAM1</div>
                                            </span>
                						</div>
                					</td>
                					<td class="Standings-details">7</td>
                					<td class="Standings-details">1</td>
                				</tr>
                				<tr>
                					<td class="Standings-details">
                						<b>2</b>
                					</td>
                					<td class="Standings-details-team">
                						<div class="IconLabel">
                							<span class="IconLabel-item">
                                                <svg xmlns="http://www.w3.org/2000/svg" class="Icon">
                                                    <use xlink:href="#icon-team-fallback"/>
                                                </svg>
                                            </span>
                							<span class="IconLabel-item">
                                                <div>Team Name Here</div>
                                            </span>
                							<span class="IconLabel-item">
                                                <div>TEAM1</div>
                                            </span>
                						</div>
                					</td>
                					<td class="Standings-details">6</td>
                					<td class="Standings-details">2</td>
                				</tr>
                				<tr>
                					<td class="Standings-details">
                						<b>3</b>
                					</td>
                					<td class="Standings-details-team">
                						<div class="IconLabel">
                							<span class="IconLabel-item">
                                                <svg xmlns="http://www.w3.org/2000/svg" class="Icon">
                                                    <use xlink:href="#icon-team-fallback"/>
                                                </svg>
                                            </span>
                							<span class="IconLabel-item">
                                                <div>Team Name Here</div>
                                            </span>
                							<span class="IconLabel-item">
                                                <div>TEAM1</div>
                                            </span>
                						</div>
                					</td>
                					<td class="Standings-details">5</td>
                					<td class="Standings-details">3</td>
                				</tr>
                			</tbody>
                		</table>
                	</div>
                </div>

Standings Round Robin

Displays a table of ranked entities with match details File location: src/assets/toolkit/styles/materials/organisms/_standings.scss.

Team
GR
MR
 
Team 1 TM1
12 - 0
3 - 2
Last Match: 12/30/2018
A Longer Team Name TML
12 - 0
3 - 2
Last Match: 12/30/2018
Team 3 TM3
12 - 0
3 - 2
Last Match: 12/30/2018
Team
GR
MR
 
Another Long Team Name TML2
12 - 0
3 - 2
Last Match: 12/30/2018
Team 5 TM5
12 - 0
3 - 2
Last Match: 12/30/2018
Team 6 TM6
12 - 0
3 - 2
Last Match: 12/30/2018
<div class="RoundRobin RoundRobin-group">
                	<div class="RoundRobin-teamsList">
                		<div class="RoundRobin-head">
                			<div class="RoundRobin-header RoundRobin-header-team">Team</div>
                			<div class="RoundRobin-header">GR</div>
                			<div class="RoundRobin-header">MR</div>
                			<div class="RoundRobin-header RoundRobin-header-spacer">&nbsp;</div>
                		</div>
                		<div class="RoundRobin-team">
                			<div class="RoundRobin-team-standing">
                				<div class="RoundRobin-team-item RoundRobin-team-label">
                					<div class="IconLabel">
                						<span class="IconLabel-item">
                                        <svg xmlns="http://www.w3.org/2000/svg" class="Icon">
                                            <use xlink:href="#icon-team-fallback"/>
                                        </svg>
                                    </span>
                						<span class="RoundRobin-team-label-full">
                                        Team 1
                                    </span>
                						<span class="RoundRobin-team-label-abbr">
                                        TM1
                                    </span>
                					</div>
                				</div>
                				<div class="RoundRobin-team-item RoundRobin-team-gr">12 - <span class="RoundRobin-team--highlight">0</span></div>
                				<div class="RoundRobin-team-item RoundRobin-team-mr">3 - <span class="RoundRobin-team--highlight">2</span></div>
                				<div class="RoundRobin-team-item RoundRobin-team-date">
                					Last Match: 12/30/2018
                				</div>
                			</div>
                			<a href="javascript:void(0)" class="RoundRobin-team-item RoundRobin-team-vod">
                                <svg class="Icon" xmlns="http://www.w3.org/2000/svg">
                                    <use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#icon-video"></use>
                                </svg>
                            </a>
                		</div>
                		<div class="RoundRobin-team">
                			<div class="RoundRobin-team-standing">
                				<div class="RoundRobin-team-item RoundRobin-team-label">
                					<div class="IconLabel">
                						<span class="IconLabel-item">
                                            <svg xmlns="http://www.w3.org/2000/svg" class="Icon">
                                                <use xlink:href="#icon-team-fallback"/>
                                            </svg>
                                        </span>
                						<span class="RoundRobin-team-label-full">
                                            A Longer Team Name
                                        </span>
                						<span class="RoundRobin-team-label-abbr">
                                            TML
                                        </span>
                					</div>
                				</div>
                				<div class="RoundRobin-team-item RoundRobin-team-gr">12 - <span class="RoundRobin-team--highlight">0</span></div>
                				<div class="RoundRobin-team-item RoundRobin-team-mr">3 - <span class="RoundRobin-team--highlight">2</span></div>
                				<div class="RoundRobin-team-item RoundRobin-team-date">
                					Last Match: 12/30/2018
                				</div>
                			</div>
                			<a href="javascript:void(0)" class="RoundRobin-team-item RoundRobin-team-vod">
                                <svg class="Icon" xmlns="http://www.w3.org/2000/svg">
                                    <use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#icon-video"></use>
                                </svg>
                            </a>
                		</div>
                		<div class="RoundRobin-team">
                			<div class="RoundRobin-team-standing">
                				<div class="RoundRobin-team-item RoundRobin-team-label">
                					<div class="IconLabel">
                						<span class="IconLabel-item">
                                                <svg xmlns="http://www.w3.org/2000/svg" class="Icon">
                                                    <use xlink:href="#icon-team-fallback"/>
                                                </svg>
                                            </span>
                						<span class="RoundRobin-team-label-full">
                                                Team 3
                                            </span>
                						<span class="RoundRobin-team-label-abbr">
                                                TM3
                                            </span>
                					</div>
                				</div>
                				<div class="RoundRobin-team-item RoundRobin-team-gr">12 - <span class="RoundRobin-team--highlight">0</span></div>
                				<div class="RoundRobin-team-item RoundRobin-team-mr">3 - <span class="RoundRobin-team--highlight">2</span></div>
                				<div class="RoundRobin-team-item RoundRobin-team-date">
                					Last Match: 12/30/2018
                				</div>
                			</div>
                			<a href="javascript:void(0)" class="RoundRobin-team-item RoundRobin-team-vod">
                                <svg class="Icon" xmlns="http://www.w3.org/2000/svg">
                                    <use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#icon-video"></use>
                                </svg>
                            </a>
                		</div>
                	</div>
                	<div class="RoundRobin-teamsList">
                		<div class="RoundRobin-head">
                			<div class="RoundRobin-header RoundRobin-header-team">Team</div>
                			<div class="RoundRobin-header">GR</div>
                			<div class="RoundRobin-header">MR</div>
                			<div class="RoundRobin-header RoundRobin-header-spacer">&nbsp;</div>
                		</div>
                		<div class="RoundRobin-team">
                			<div class="RoundRobin-team-standing">
                				<div class="RoundRobin-team-item RoundRobin-team-label">
                					<div class="IconLabel">
                						<span class="IconLabel-item">
                                            <svg xmlns="http://www.w3.org/2000/svg" class="Icon">
                                                <use xlink:href="#icon-team-fallback"/>
                                            </svg>
                                        </span>
                						<span class="RoundRobin-team-label-full">
                                            Another Long Team Name
                                        </span>
                						<span class="RoundRobin-team-label-abbr">
                                            TML2
                                        </span>
                					</div>
                				</div>
                				<div class="RoundRobin-team-item RoundRobin-team-gr">12 - <span class="RoundRobin-team--highlight">0</span></div>
                				<div class="RoundRobin-team-item RoundRobin-team-mr">3 - <span class="RoundRobin-team--highlight">2</span></div>
                				<div class="RoundRobin-team-item RoundRobin-team-date">
                					Last Match: 12/30/2018
                				</div>
                			</div>
                			<a href="javascript:void(0)" class="RoundRobin-team-item RoundRobin-team-vod RoundRobin-team-vod--disabled">
                                <svg class="Icon" xmlns="http://www.w3.org/2000/svg">
                                    <use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#icon-video"></use>
                                </svg>
                            </a>
                		</div>
                		<div class="RoundRobin-team">
                			<div class="RoundRobin-team-standing">
                				<div class="RoundRobin-team-item RoundRobin-team-label">
                					<div class="IconLabel">
                						<span class="IconLabel-item">
                                            <svg xmlns="http://www.w3.org/2000/svg" class="Icon">
                                                <use xlink:href="#icon-team-fallback"/>
                                            </svg>
                                        </span>
                						<span class="RoundRobin-team-label-full">
                                            Team 5
                                        </span>
                						<span class="RoundRobin-team-label-abbr">
                                            TM5
                                        </span>
                					</div>
                				</div>
                				<div class="RoundRobin-team-item RoundRobin-team-gr">12 - <span class="RoundRobin-team--highlight">0</span></div>
                				<div class="RoundRobin-team-item RoundRobin-team-mr">3 - <span class="RoundRobin-team--highlight">2</span></div>
                				<div class="RoundRobin-team-item RoundRobin-team-date">
                					Last Match: 12/30/2018
                				</div>
                			</div>
                			<a href="javascript:void(0)" class="RoundRobin-team-item RoundRobin-team-vod RoundRobin-team-vod--disabled">
                                <svg class="Icon" xmlns="http://www.w3.org/2000/svg">
                                    <use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#icon-video"></use>
                                </svg>
                            </a>
                		</div>
                		<div class="RoundRobin-team">
                			<div class="RoundRobin-team-standing">
                				<div class="RoundRobin-team-item RoundRobin-team-label">
                					<div class="IconLabel">
                						<span class="IconLabel-item">
                                            <svg xmlns="http://www.w3.org/2000/svg" class="Icon">
                                                <use xlink:href="#icon-team-fallback"/>
                                            </svg>
                                        </span>
                						<span class="RoundRobin-team-label-full">
                                            Team 6
                                        </span>
                						<span class="RoundRobin-team-label-abbr">
                                            TM6
                                        </span>
                					</div>
                				</div>
                				<div class="RoundRobin-team-item RoundRobin-team-gr">12 - <span class="RoundRobin-team--highlight">0</span></div>
                				<div class="RoundRobin-team-item RoundRobin-team-mr">3 - <span class="RoundRobin-team--highlight">2</span></div>
                				<div class="RoundRobin-team-item RoundRobin-team-date">
                					Last Match: 12/30/2018
                				</div>
                			</div>
                			<a href="javascript:void(0)" class="RoundRobin-team-item RoundRobin-team-vod RoundRobin-team-vod--disabled">
                                <svg class="Icon" xmlns="http://www.w3.org/2000/svg">
                                    <use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#icon-video"></use>
                                </svg>
                            </a>
                		</div>
                	</div>
                </div>
                <div class="RoundRobin-matchDetails"></div>

Team Header

Displays team header

Division
Atlantic
League Standing
#4
Location
Houston, TX
Match Record
4W-2L
<div class="TeamHeader-wrapper" style="background-color: rgb(255, 130, 0);">
        	<div class="TeamHeader u-bottomPadding--small u-verticalNavPadding">
        		<div class="TeamHeader-logo">
        			<div class="AspectRatio u-grid-align-end">
        				<img src="https://jira.blizzard.com/secure/attachment/319187/Team_Logos_Text_London.svg" alt="Houston Outlaws" class="AspectRatio-subject">
        			</div>
        		</div>
        		<div class="TeamHeader-info">
        			<div class="TeamHeader-item TeamHeader-item--1-1">
        				<div class="TeamHeader-info-label">Division</div>
        				<div class="TeamHeader-info-text">Atlantic</div>
        			</div>
        			<div class="TeamHeader-item TeamHeader-item--2-1">
        				<div class="TeamHeader-info-label">League Standing</div>
        				<div class="TeamHeader-info-text">#4</div>
        			</div>
        			<div class="TeamHeader-item TeamHeader-item--1-2">
        				<div class="TeamHeader-info-label">Location</div>
        				<div class="TeamHeader-info-text">Houston, TX</div>
        			</div>
        			<div class="TeamHeader-item TeamHeader-item--2-2">
        				<div class="TeamHeader-info-label">Match Record</div>
        				<div class="TeamHeader-info-text">4W-2L</div>
        			</div>
        		</div>
        		<div class="TeamHeader-links">
        			<div class="TeamHeader-item TeamHeader-item--1-1">
        				<div class="TeamHeader-links-label">Social</div>
        				<svg class="Icon" xmlns="http://www.w3.org/2000/svg">
                            <use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#social-twitch"></use>
                        </svg>
        				<svg class="Icon" xmlns="http://www.w3.org/2000/svg">
                            <use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#social-twitch"></use>
                        </svg>
        				<svg class="Icon" xmlns="http://www.w3.org/2000/svg">
                            <use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#social-twitch"></use>
                        </svg>
        				<svg class="Icon" xmlns="http://www.w3.org/2000/svg">
                            <use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#social-twitch"></use>
                        </svg>
        				<svg class="Icon" xmlns="http://www.w3.org/2000/svg">
                            <use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#social-twitch"></use>
                        </svg>
        			</div>
        			<div class="TeamHeader-item TeamHeader-item--1-2">
        				<button class="Button Button--primary-light Button--icon">
                            <span class="Button-text js-truncate" style="">Team Website</span>
                            <svg class="Icon" xmlns="http://www.w3.org/2000/svg">
                                <use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#icon-external-url"></use>
                            </svg>
                        </button>
        			</div>
        		</div>
        	</div>
        	<div class="TeamHeader-divider"></div>
        </div>

Team Roster

Displays team roster

Team Name

Location

Pacific Division
Team Website
Player Handle
Player First and Last Name
Player Handle
Player First and Last Name
Player Handle
Player First and Last Name
Player Handle
Player First and Last Name
Player Handle
Player First and Last Name
Player Handle
Player First and Last Name
<section class="TeamRoster">
        	<div class="TeamRoster-teamInfo">
        		<svg xmlns="http://www.w3.org/2000/svg" class="TeamRoster-logo">
                    <use xlink:href="#icon-team-fallback"/>
                </svg>
        		<div class="TeamRoster-infoWrapper">
        			<div class="TeamRoster-info">
        				<h2 class="TeamRoster-name">Team Name</h2>
        				<p class="TeamRoster-content">Location</p>
        				<div class="TeamRoster-division">Pacific Division</div>
        			</div>
        			<a href="javascript:void(0)" class="TeamRoster-link">Team Website<svg class="Icon" xmlns="http://www.w3.org/2000/svg">
                            <use xlink:href="#icon-external-url"/>
                        </svg>
                    </a>
        		</div>
        	</div>
        	<div class="TeamRoster-playerList">
        		<div class="PlayerHandle PlayerHandle--aligned TeamRoster-player">
        			<svg class="Icon Icon--lightFill PlayerHandle-teamIcon">
                        <use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#role_support"/>
                    </svg>
        			<div class="PlayerHandle-handleWrapper">
        				<div class="PlayerHandle-handle">Player Handle</div>
        				<div class="PlayerHandle-name">Player First and Last Name</div>
        			</div>
        		</div>
        		<div class="PlayerHandle PlayerHandle--aligned TeamRoster-player">
        			<svg class="Icon Icon--lightFill PlayerHandle-teamIcon">
                        <use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#role_support"/>
                    </svg>
        			<div class="PlayerHandle-handleWrapper">
        				<div class="PlayerHandle-handle">Player Handle</div>
        				<div class="PlayerHandle-name">Player First and Last Name</div>
        			</div>
        		</div>
        		<div class="PlayerHandle PlayerHandle--aligned TeamRoster-player">
        			<svg class="Icon Icon--lightFill PlayerHandle-teamIcon">
                        <use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#role_support"/>
                    </svg>
        			<div class="PlayerHandle-handleWrapper">
        				<div class="PlayerHandle-handle">Player Handle</div>
        				<div class="PlayerHandle-name">Player First and Last Name</div>
        			</div>
        		</div>
        		<div class="PlayerHandle PlayerHandle--aligned TeamRoster-player">
        			<svg class="Icon Icon--lightFill PlayerHandle-teamIcon">
                        <use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#role_support"/>
                    </svg>
        			<div class="PlayerHandle-handleWrapper">
        				<div class="PlayerHandle-handle">Player Handle</div>
        				<div class="PlayerHandle-name">Player First and Last Name</div>
        			</div>
        		</div>
        		<div class="PlayerHandle PlayerHandle--aligned TeamRoster-player">
        			<svg class="Icon Icon--lightFill PlayerHandle-teamIcon">
                        <use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#role_support"/>
                    </svg>
        			<div class="PlayerHandle-handleWrapper">
        				<div class="PlayerHandle-handle">Player Handle</div>
        				<div class="PlayerHandle-name">Player First and Last Name</div>
        			</div>
        		</div>
        		<div class="PlayerHandle PlayerHandle--aligned TeamRoster-player">
        			<svg class="Icon Icon--lightFill PlayerHandle-teamIcon">
                        <use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#role_support"/>
                    </svg>
        			<div class="PlayerHandle-handleWrapper">
        				<div class="PlayerHandle-handle">Player Handle</div>
        				<div class="PlayerHandle-name">Player First and Last Name</div>
        			</div>
        		</div>
        	</div>
        	<a class="TeamRoster-close Button Button--stripped hidden-sm hidden-md hidden-lg hidden-xl u-flex-justify-center" href="javascript:void(0)">Close</a>
        </section>

Team Score

Default

-
<div class="TeamScore">
                	<div class="TeamScore-team">
                		<div class="TeamScore-logo">
                			<div class="AspectRatio AspectRatio--full">
                				<svg xmlns="http://www.w3.org/2000/svg" class="AspectRatio-subject u-transparent--heavy">
                                    <use xlink:href="#icon-team-fallback"/>
                                </svg>
                			</div>
                		</div>
                		<div class="TeamScore-name hidden-sm hidden-md hidden-lg">TMN</div>
                		<div class="TeamScore-name hidden-xs">Team Name</div>
                	</div>
                	<div class="TeamScore-score">
                		<svg xmlns="http://www.w3.org/2000/svg" class="TeamScore-winnerIcon Icon">
                            <use xlink:href="#icon-crown"/>
                        </svg>
                		<span class="TeamScore-scoreValue">-</span>
                	</div>
                </div>

Without Score

A .TeamScore may have a state without a score (a bit incongruent, for sure).

<div class="TeamScore">
                	<div class="TeamScore-team">
                		<div class="TeamScore-logo">
                			<div class="AspectRatio AspectRatio--full">
                				<svg xmlns="http://www.w3.org/2000/svg" class="AspectRatio-subject u-transparent--heavy">
                                    <use xlink:href="#icon-team-fallback"/>
                                </svg>
                			</div>
                		</div>
                		<div class="TeamScore-name hidden-sm hidden-md hidden-lg">TMN</div>
                		<div class="TeamScore-name hidden-xs">Team Name</div>
                	</div>
                	<div class="TeamScore-score">
                		<svg xmlns="http://www.w3.org/2000/svg" class="TeamScore-winnerIcon Icon">
                            <use xlink:href="#icon-crown"/>
                        </svg>
                		<span class="TeamScore-scoreValue"> </span>
                	</div>
                </div>

Inverted

A .TeamScore may be switched to use white for the text. This is useful for when the contrast is needed.

0
<div style="background-color: black">
                	<div class="TeamScore TeamScore--invert">
                		<div class="TeamScore-team">
                			<div class="TeamScore-logo">
                				<div class="AspectRatio AspectRatio--full">
                					<svg xmlns="http://www.w3.org/2000/svg" class="AspectRatio-subject u-transparent--heavy">
                                        <use xlink:href="#icon-team-fallback"/>
                                    </svg>
                				</div>
                			</div>
                			<div class="TeamScore-name hidden-sm hidden-md hidden-lg">TMN</div>
                			<div class="TeamScore-name hidden-xs">Team Name</div>
                		</div>
                		<div class="TeamScore-score">
                			<svg xmlns="http://www.w3.org/2000/svg" class="TeamScore-winnerIcon Icon">
                                <use xlink:href="#icon-crown"/>
                            </svg>
                			<span class="TeamScore-scoreValue">0</span>
                		</div>
                	</div>
                </div>

Winner

4
<div class="TeamScore TeamScore--winner">
                	<div class="TeamScore-team">
                		<div class="TeamScore-logo">
                			<div class="AspectRatio AspectRatio--full">
                				<svg xmlns="http://www.w3.org/2000/svg" class="AspectRatio-subject u-transparent--heavy">
                                    <use xlink:href="#icon-team-fallback"/>
                                </svg>
                			</div>
                		</div>
                		<div class="TeamScore-name hidden-sm hidden-md hidden-lg">TMN</div>
                		<div class="TeamScore-name hidden-xs">Team Name</div>
                	</div>
                	<div class="TeamScore-score">
                		<svg xmlns="http://www.w3.org/2000/svg" class="TeamScore-winnerIcon Icon">
                            <use xlink:href="#icon-crown"/>
                        </svg>
                		<span class="TeamScore-scoreValue">4</span>
                	</div>
                </div>

Reverse

0
<div class="TeamScore TeamScore--reverse">
                	<div class="TeamScore-team">
                		<div class="TeamScore-logo">
                			<div class="AspectRatio AspectRatio--full">
                				<svg xmlns="http://www.w3.org/2000/svg" class="AspectRatio-subject u-transparent--heavy">
                                    <use xlink:href="#icon-team-fallback"/>
                                </svg>
                			</div>
                		</div>
                		<div class="TeamScore-name hidden-sm hidden-md hidden-lg">TMN</div>
                		<div class="TeamScore-name hidden-xs">Team Name</div>
                	</div>
                	<div class="TeamScore-score">
                		<svg xmlns="http://www.w3.org/2000/svg" class="TeamScore-winnerIcon Icon">
                            <use xlink:href="#icon-crown"/>
                        </svg>
                		<span class="TeamScore-scoreValue">0</span>
                	</div>
                </div>

Compact

A .TeamScore--compact works better when you need a .TeamScore to be in a smaller space and have a larger score font size on a large screen. This is shown most prominently in the OWL Match Detail pages in the header while on a mobile device.

0
<div class="TeamScore TeamScore--compact">
                	<div class="TeamScore-team">
                		<div class="TeamScore-logo">
                			<div class="AspectRatio AspectRatio--full">
                				<svg xmlns="http://www.w3.org/2000/svg" class="AspectRatio-subject u-transparent--heavy">
                                    <use xlink:href="#icon-team-fallback"/>
                                </svg>
                			</div>
                		</div>
                		<div class="TeamScore-name hidden-sm hidden-md hidden-lg">TMN</div>
                		<div class="TeamScore-name hidden-xs">Team Name</div>
                	</div>
                	<div class="TeamScore-score">
                		<svg xmlns="http://www.w3.org/2000/svg" class="TeamScore-winnerIcon Icon">
                            <use xlink:href="#icon-crown"/>
                        </svg>
                		<span class="TeamScore-scoreValue">0</span>
                	</div>
                </div>

No Transform

<div class="TeamScore TeamScore--noTransform">
                	<div class="TeamScore-team">
                		<div class="TeamScore-logo">
                			<div class="AspectRatio AspectRatio--full">
                				<svg xmlns="http://www.w3.org/2000/svg" class="AspectRatio-subject u-transparent--heavy">
                                    <use xlink:href="#icon-team-fallback"/>
                                </svg>
                			</div>
                		</div>
                		<div class="TeamScore-name hidden-sm hidden-md hidden-lg">TMN</div>
                		<div class="TeamScore-name hidden-xs">Team Name</div>
                	</div>
                	<div class="TeamScore-score">
                		<svg xmlns="http://www.w3.org/2000/svg" class="TeamScore-winnerIcon Icon">
                            <use xlink:href="#icon-crown"/>
                        </svg>
                		<span class="TeamScore-scoreValue"> </span>
                	</div>
                </div>

Box Team Score

0
<div class="TeamScore TeamScore--box">
                	<div class="TeamScore-team">
                		<div class="TeamScore-logo">
                			<div class="AspectRatio AspectRatio--full">
                				<svg xmlns="http://www.w3.org/2000/svg" class="AspectRatio-subject u-transparent--heavy">
                                    <use xlink:href="#icon-team-fallback"/>
                                </svg>
                			</div>
                		</div>
                		<div class="TeamScore-name hidden-sm hidden-md hidden-lg">TMN</div>
                		<div class="TeamScore-name hidden-xs">Team Name</div>
                	</div>
                	<div class="TeamScore-score">
                		<svg xmlns="http://www.w3.org/2000/svg" class="TeamScore-winnerIcon Icon">
                            <use xlink:href="#icon-crown"/>
                        </svg>
                		<span class="TeamScore-scoreValue">0</span>
                	</div>
                </div>

Timeline

Timeline

A .Timeline is used mostly for the Overview page to denote a time-based set of data.

Default Timeline

Timeline!

First Item

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.

Second Item

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.

Third Item

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.

Fourth Item

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.

<section class="Timeline">
                	<h1 class="Timeline-title">Timeline!</h1>
                	<div class="Timeline-item">
                		<h2 class="Timeline-itemTitle">First Item
                			<time class="Timeline-itemDates">Start Date</time>
                		</h2>
                		<p class="Timeline-content">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 class="Timeline-item">
                		<h2 class="Timeline-itemTitle">Second Item
                			<time class="Timeline-itemDates">Start Date</time>
                		</h2>
                		<p class="Timeline-content">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 class="Timeline-item">
                		<h2 class="Timeline-itemTitle">Third Item
                			<time class="Timeline-itemDates">Start Date</time>
                		</h2>
                		<p class="Timeline-content">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 class="Timeline-item">
                		<h2 class="Timeline-itemTitle">Fourth Item
                			<time class="Timeline-itemDates">Start Date</time>
                		</h2>
                		<p class="Timeline-content">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>
                </section>

Video Playlist

Video player with a playlist as seen on the videos page of the OWL site

File locations:

Base: src/assets/toolkit/styles/partials/organisms/_o-video-playlist.scss

<div class="TexturedBackground TexturedBackground--dark u-verticalPadding">
        	<div class="Container">
        		<div class="VideoPlaylist">
        			<div class="VideoPlaylist-player">
        				<iframe src="https://www.youtube.com/embed/x8lQGmnbGIs?rel=0" frameborder="0" allowfullscreen></iframe>
        			</div>
        			<div class="VideoPlaylist-aside">
        				<div class="VideoPlaylist-title-bar">
        					<div class="VideoPlaylist-title">
        						Featured Videos
        					</div>
        					<div class="VideoPlaylist-video-count">
        						13 Videos
        					</div>
        				</div>
        				<div class="VideoPlaylist-list">
        					<a href="javascript:void(0)" class="VideoPlaylist-item active">
        						<div class="VideoPlaylist-thumb" data-length="13:56">
        							<img src="/assets/toolkit/images/static/post-teaser-thumb-c.jpg" />
        						</div>
        						<div class="VideoPlaylist-details">
        							<div class="VideoPlaylist-video-title">
        								即將到來的視頻 - 保持調整 即將到來的視頻 來的視頻
        							</div>
        						</div>
        					</a>
        					<a href="javascript:void(0)" class="VideoPlaylist-item">
        						<div class="VideoPlaylist-thumb" data-length="00:42">
        							<img src="/assets/toolkit/images/static/post-teaser-thumb-c.jpg" />
        						</div>
        						<div class="VideoPlaylist-details">
        							<div class="VideoPlaylist-video-title">
        								Video title goes here
        							</div>
        						</div>
        					</a>
        					<a href="javascript:void(0)" class="VideoPlaylist-item">
        						<div class="VideoPlaylist-thumb" data-length="00:42">
        							<img src="/assets/toolkit/images/static/post-teaser-thumb-c.jpg" />
        						</div>
        						<div class="VideoPlaylist-details">
        							<div class="VideoPlaylist-video-title">
        								Video title goes here
        							</div>
        						</div>
        					</a>
        					<a href="javascript:void(0)" class="VideoPlaylist-item">
        						<div class="VideoPlaylist-thumb" data-length="00:42">
        							<img src="/assets/toolkit/images/static/post-teaser-thumb-c.jpg" />
        						</div>
        						<div class="VideoPlaylist-details">
        							<div class="VideoPlaylist-video-title">
        								Video title goes here
        							</div>
        						</div>
        					</a>
        					<a href="javascript:void(0)" class="VideoPlaylist-item">
        						<div class="VideoPlaylist-thumb" data-length="00:42">
        							<img src="/assets/toolkit/images/static/post-teaser-thumb-c.jpg" />
        						</div>
        						<div class="VideoPlaylist-details">
        							<div class="VideoPlaylist-video-title">
        								Video title goes here
        							</div>
        						</div>
        					</a>
        					<a href="javascript:void(0)" class="VideoPlaylist-item">
        						<div class="VideoPlaylist-thumb" data-length="00:42">
        							<img src="/assets/toolkit/images/static/post-teaser-thumb-c.jpg" />
        						</div>
        						<div class="VideoPlaylist-details">
        							<div class="VideoPlaylist-video-title">
        								Video title goes here
        							</div>
        						</div>
        					</a>
        					<a href="javascript:void(0)" class="VideoPlaylist-item">
        						<div class="VideoPlaylist-thumb" data-length="00:42">
        							<img src="/assets/toolkit/images/static/post-teaser-thumb-c.jpg" />
        						</div>
        						<div class="VideoPlaylist-details">
        							<div class="VideoPlaylist-video-title">
        								Video title goes here
        							</div>
        						</div>
        					</a>
        					<a href="javascript:void(0)" class="VideoPlaylist-item">
        						<div class="VideoPlaylist-thumb" data-length="00:42">
        							<img src="/assets/toolkit/images/static/post-teaser-thumb-c.jpg" />
        						</div>
        						<div class="VideoPlaylist-details">
        							<div class="VideoPlaylist-video-title">
        								Video title goes here
        							</div>
        						</div>
        					</a>
        					<a href="javascript:void(0)" class="VideoPlaylist-item">
        						<div class="VideoPlaylist-thumb" data-length="00:42">
        							<img src="/assets/toolkit/images/static/post-teaser-thumb-c.jpg" />
        						</div>
        						<div class="VideoPlaylist-details">
        							<div class="VideoPlaylist-video-title">
        								Video title goes here
        							</div>
        						</div>
        					</a>
        					<a href="javascript:void(0)" class="VideoPlaylist-item">
        						<div class="VideoPlaylist-thumb" data-length="00:42">
        							<img src="/assets/toolkit/images/static/post-teaser-thumb-c.jpg" />
        						</div>
        						<div class="VideoPlaylist-details">
        							<div class="VideoPlaylist-video-title">
        								Video title goes here
        							</div>
        						</div>
        					</a>
        					<a href="javascript:void(0)" class="VideoPlaylist-item">
        						<div class="VideoPlaylist-thumb" data-length="00:42">
        							<img src="/assets/toolkit/images/static/post-teaser-thumb-c.jpg" />
        						</div>
        						<div class="VideoPlaylist-details">
        							<div class="VideoPlaylist-video-title">
        								Video title goes here
        							</div>
        						</div>
        					</a>
        					<a href="javascript:void(0)" class="VideoPlaylist-item">
        						<div class="VideoPlaylist-thumb" data-length="00:42">
        							<img src="/assets/toolkit/images/static/post-teaser-thumb-c.jpg" />
        						</div>
        						<div class="VideoPlaylist-details">
        							<div class="VideoPlaylist-video-title">
        								Video title goes here
        							</div>
        						</div>
        					</a>
        					<a href="javascript:void(0)" class="VideoPlaylist-item">
        						<div class="VideoPlaylist-thumb" data-length="00:42">
        							<img src="/assets/toolkit/images/static/post-teaser-thumb-c.jpg" />
        						</div>
        						<div class="VideoPlaylist-details">
        							<div class="VideoPlaylist-video-title">
        								Video title goes here
        							</div>
        						</div>
        					</a>
        				</div>
        			</div>
        		</div>
        	</div>
        </div>

Widget Day

Widget Day

Displays collection of Widget Matches.

File location: src/assets/toolkit/styles/materials/organisms/_widget-day.scss.

Default Upcoming Match

fri
1/10
5:00 pm
1/10
tea --
tea --
7:30 pm
1/10
tea --
tea --
10:00 pm
1/10
tea --
tea --
<div class="WidgetDay">
                	<div class="WidgetDay-day ContentBox ContentBox--no-shadow FlexElement FlexElement--column">
                		<div class="WidgetDay-dayOfWeek text-center u-bold u-uppercase">
                			fri
                		</div>
                		<div class="WidgetDay-date text-center">
                			1/10
                		</div>
                	</div>
                	<div class="WidgetDay-matches">
                		<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>
                		<div class="WidgetMatch ContentBox ContentBox--no-shadow">
                			<div class="WidgetMatch-header">
                				<div class="WidgetMatch-time u-uppercase">
                					7:30 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>
                		<div class="WidgetMatch ContentBox ContentBox--no-shadow">
                			<div class="WidgetMatch-header">
                				<div class="WidgetMatch-time u-uppercase">
                					10: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>
                	</div>
                </div>

Live Modifier

today
5:00 pm
1/10
tea 3
tea 2
live now
game 2
team name here 0
team name here 2
10:00 pm
1/10
tea --
tea --
<div class="WidgetDay WidgetDay--live">
                	<div class="WidgetDay-wrapper">
                		<div class="WidgetDay-day ContentBox ContentBox--no-shadow FlexElement FlexElement--column">
                			<div class="WidgetDay-dayOfWeek text-center u-bold u-uppercase">
                				today
                			</div>
                		</div>
                		<div class="WidgetDay-matches">
                			<div class="WidgetMatch WidgetMatch--completed">
                				<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 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">3</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">2</span>
                					</div>
                				</div>
                			</div>
                			<div class="WidgetMatch WidgetMatch--live">
                				<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>
                			<div class="WidgetMatch">
                				<div class="WidgetMatch-header">
                					<div class="WidgetMatch-time u-uppercase">
                						10: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>
                		</div>
                	</div>
                </div>

Past Modifier

sun
1/5
5:00 pm
1/5
tea 0
tea 4
7:30 pm
1/5
tea 3
tea 2
10:00 pm
1/5
tea 4
tea 0
<div class="WidgetDay WidgetDay--past">
                	<div class="WidgetDay-wrapper">
                		<div class="WidgetDay-day ContentBox ContentBox--no-shadow FlexElement FlexElement--column">
                			<div class="WidgetDay-dayOfWeek text-center u-bold u-uppercase">
                				sun
                			</div>
                			<div class="WidgetDay-date text-center">
                				1/5
                			</div>
                		</div>
                		<div class="WidgetDay-matches ContentBox ContentBox--no-shadow">
                			<div class="WidgetMatch WidgetMatch--completed">
                				<div class="WidgetMatch-header">
                					<div class="WidgetMatch-time u-uppercase">
                						5:00 pm
                					</div>
                					<div class="WidgetMatch-date u-uppercase">
                						1/5
                					</div>
                				</div>
                				<div class="WidgetMatch-team WidgetMatch-team-nonWinner 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>
                			<div class="WidgetMatch WidgetMatch--completed">
                				<div class="WidgetMatch-header">
                					<div class="WidgetMatch-time u-uppercase">
                						7:30 pm
                					</div>
                					<div class="WidgetMatch-date u-uppercase">
                						1/5
                					</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">3</span>
                					</div>
                				</div>
                				<div class="WidgetMatch-team WidgetMatch-team-nonWinner  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">2</span>
                					</div>
                				</div>
                			</div>
                			<div class="WidgetMatch WidgetMatch--completed">
                				<div class="WidgetMatch-header">
                					<div class="WidgetMatch-time u-uppercase">
                						10:00 pm
                					</div>
                					<div class="WidgetMatch-date u-uppercase">
                						1/5
                					</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 class="WidgetMatch-team WidgetMatch-team-nonWinner 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>
                		</div>
                	</div>
                </div>