Organisms



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>

Brackets

Brackets

Brackets organism: src/assets/toolkit/styles/partials/organisms/_brackets.scss.

Top 8

3
1
3
1
3
1
3
1

Top 4

3
1
3
1

Championship Match

---
---
<div class="Brackets">
                	<div class="Brackets-column">
                		<h3 class="Brackets-columnTitle">Top 8</h3>
                		<section class="Brackets-match MatchStacked">
                			<div class="MatchStacked-teams">
                				<div class="TeamLabel is-winner">
                					<div class="TeamLabel-block">
                						<img src="../assets/toolkit/images/static/team-badge-a.png" alt="" class="TeamLabel-logo">
                					</div>
                					<div class="TeamLabel-info">
                						<div class="TeamLabel-name hidden-md hidden-sm hidden-xs">Team Name</div>
                						<div class="TeamLabel-name hidden-lg">TMN</div>
                					</div>
                					<div class="TeamLabel-stat">3</div>
                				</div>
                				<div class="TeamLabel">
                					<div class="TeamLabel-block">
                						<img src="../assets/toolkit/images/static/team-badge-b.png" alt="" class="TeamLabel-logo">
                					</div>
                					<div class="TeamLabel-info">
                						<div class="TeamLabel-name hidden-md hidden-sm hidden-xs">Team Name</div>
                						<div class="TeamLabel-name hidden-lg">TMN</div>
                					</div>
                					<div class="TeamLabel-stat">1</div>
                				</div>
                			</div>
                			<a href="javascript:void(0)" class="MatchStacked-vod Button Button--iconOnly">
                                <svg class="Icon" xmlns="http://www.w3.org/2000/svg">
                                    <use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#icon-video"/>
                                </svg>
                            </a>
                		</section>
                		<div class="Brackets-arrow">
                			<svg xmlns="http://www.w3.org/2000/svg" class="Icon Icon--sm">
                                <use xlink:href="#icon-arrow-right"/>
                            </svg>
                		</div>
                		<section class="Brackets-match MatchStacked">
                			<div class="MatchStacked-teams">
                				<div class="TeamLabel is-winner">
                					<div class="TeamLabel-block">
                						<img src="../assets/toolkit/images/static/team-badge-a.png" alt="" class="TeamLabel-logo">
                					</div>
                					<div class="TeamLabel-info">
                						<div class="TeamLabel-name hidden-md hidden-sm hidden-xs">Team Name</div>
                						<div class="TeamLabel-name hidden-lg">TMN</div>
                					</div>
                					<div class="TeamLabel-stat">3</div>
                				</div>
                				<div class="TeamLabel">
                					<div class="TeamLabel-block">
                						<img src="../assets/toolkit/images/static/team-badge-b.png" alt="" class="TeamLabel-logo">
                					</div>
                					<div class="TeamLabel-info">
                						<div class="TeamLabel-name hidden-md hidden-sm hidden-xs">Team Name</div>
                						<div class="TeamLabel-name hidden-lg">TMN</div>
                					</div>
                					<div class="TeamLabel-stat">1</div>
                				</div>
                			</div>
                			<a href="javascript:void(0)" class="MatchStacked-vod Button Button--iconOnly">
                                <svg class="Icon" xmlns="http://www.w3.org/2000/svg">
                                    <use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#icon-video"/>
                                </svg>
                            </a>
                		</section>
                		<div class="Brackets-spacer"></div>
                		<section class="Brackets-match MatchStacked">
                			<div class="MatchStacked-teams">
                				<div class="TeamLabel is-winner">
                					<div class="TeamLabel-block">
                						<img src="../assets/toolkit/images/static/team-badge-a.png" alt="" class="TeamLabel-logo">
                					</div>
                					<div class="TeamLabel-info">
                						<div class="TeamLabel-name hidden-md hidden-sm hidden-xs">Team Name</div>
                						<div class="TeamLabel-name hidden-lg">TMN</div>
                					</div>
                					<div class="TeamLabel-stat">3</div>
                				</div>
                				<div class="TeamLabel">
                					<div class="TeamLabel-block">
                						<img src="../assets/toolkit/images/static/team-badge-b.png" alt="" class="TeamLabel-logo">
                					</div>
                					<div class="TeamLabel-info">
                						<div class="TeamLabel-name hidden-md hidden-sm hidden-xs">Team Name</div>
                						<div class="TeamLabel-name hidden-lg">TMN</div>
                					</div>
                					<div class="TeamLabel-stat">1</div>
                				</div>
                			</div>
                			<a href="javascript:void(0)" class="MatchStacked-vod Button Button--iconOnly">
                                <svg class="Icon" xmlns="http://www.w3.org/2000/svg">
                                    <use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#icon-video"/>
                                </svg>
                            </a>
                		</section>
                		<div class="Brackets-arrow">
                			<svg xmlns="http://www.w3.org/2000/svg" class="Icon">
                                <use xlink:href="#icon-arrow-right"/>
                            </svg>
                		</div>
                		<section class="Brackets-match MatchStacked">
                			<div class="MatchStacked-teams">
                				<div class="TeamLabel is-winner">
                					<div class="TeamLabel-block">
                						<img src="../assets/toolkit/images/static/team-badge-a.png" alt="" class="TeamLabel-logo">
                					</div>
                					<div class="TeamLabel-info">
                						<div class="TeamLabel-name hidden-md hidden-sm hidden-xs">Team Name</div>
                						<div class="TeamLabel-name hidden-lg">TMN</div>
                					</div>
                					<div class="TeamLabel-stat">3</div>
                				</div>
                				<div class="TeamLabel">
                					<div class="TeamLabel-block">
                						<img src="../assets/toolkit/images/static/team-badge-b.png" alt="" class="TeamLabel-logo">
                					</div>
                					<div class="TeamLabel-info">
                						<div class="TeamLabel-name hidden-md hidden-sm hidden-xs">Team Name</div>
                						<div class="TeamLabel-name hidden-lg">TMN</div>
                					</div>
                					<div class="TeamLabel-stat">1</div>
                				</div>
                			</div>
                			<a href="javascript:void(0)" class="MatchStacked-vod Button Button--iconOnly">
                                <svg class="Icon" xmlns="http://www.w3.org/2000/svg">
                                    <use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#icon-video"/>
                                </svg>
                            </a>
                		</section>
                	</div>
                
                	<div class="Brackets-column">
                		<div class="Brackets-spacer"></div>
                		<h3 class="Brackets-columnTitle">Top 4</h3>
                		<section class="Brackets-match MatchStacked">
                			<div class="MatchStacked-teams">
                				<div class="TeamLabel is-winner">
                					<div class="TeamLabel-block">
                						<img src="../assets/toolkit/images/static/team-badge-a.png" alt="" class="TeamLabel-logo">
                					</div>
                					<div class="TeamLabel-info">
                						<div class="TeamLabel-name hidden-md hidden-sm hidden-xs">Team Name</div>
                						<div class="TeamLabel-name hidden-lg">TMN</div>
                					</div>
                					<div class="TeamLabel-stat">3</div>
                				</div>
                				<div class="TeamLabel">
                					<div class="TeamLabel-block">
                						<img src="../assets/toolkit/images/static/team-badge-b.png" alt="" class="TeamLabel-logo">
                					</div>
                					<div class="TeamLabel-info">
                						<div class="TeamLabel-name hidden-md hidden-sm hidden-xs">Team Name</div>
                						<div class="TeamLabel-name hidden-lg">TMN</div>
                					</div>
                					<div class="TeamLabel-stat">1</div>
                				</div>
                			</div>
                			<a href="javascript:void(0)" class="MatchStacked-vod Button Button--iconOnly">
                                <svg class="Icon" xmlns="http://www.w3.org/2000/svg">
                                    <use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#icon-video"/>
                                </svg>
                            </a>
                		</section>
                		<div class="Brackets-arrow">
                			<svg xmlns="http://www.w3.org/2000/svg" class="Icon">
                                <use xlink:href="#icon-arrow-right"/>
                            </svg>
                		</div>
                		<section class="Brackets-match MatchStacked">
                			<div class="MatchStacked-teams">
                				<div class="TeamLabel is-winner">
                					<div class="TeamLabel-block">
                						<img src="../assets/toolkit/images/static/team-badge-a.png" alt="" class="TeamLabel-logo">
                					</div>
                					<div class="TeamLabel-info">
                						<div class="TeamLabel-name hidden-md hidden-sm hidden-xs">Team Name</div>
                						<div class="TeamLabel-name hidden-lg">TMN</div>
                					</div>
                					<div class="TeamLabel-stat">3</div>
                				</div>
                				<div class="TeamLabel">
                					<div class="TeamLabel-block">
                						<img src="../assets/toolkit/images/static/team-badge-b.png" alt="" class="TeamLabel-logo">
                					</div>
                					<div class="TeamLabel-info">
                						<div class="TeamLabel-name hidden-md hidden-sm hidden-xs">Team Name</div>
                						<div class="TeamLabel-name hidden-lg">TMN</div>
                					</div>
                					<div class="TeamLabel-stat">1</div>
                				</div>
                			</div>
                			<a href="javascript:void(0)" class="MatchStacked-vod Button Button--iconOnly">
                                <svg class="Icon" xmlns="http://www.w3.org/2000/svg">
                                    <use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#icon-video"/>
                                </svg>
                            </a>
                		</section>
                		<div class="Brackets-spacer"></div>
                	</div>
                
                	<div class="Brackets-column">
                		<div class="Brackets-spacer"></div>
                		<div class="Brackets-spacer"></div>
                		<div class="Brackets-spacer"></div>
                		<h3 class="Brackets-columnTitle">Championship Match</h3>
                		<section class="Brackets-match MatchStacked">
                			<div class="MatchStacked-teams">
                				<div class="TeamLabel is-empty">
                					---
                				</div>
                				<div class="TeamLabel is-empty">
                					---
                				</div>
                			</div>
                			<a href="javascript:void(0)" class="MatchStacked-vod Button Button--iconOnly is-disabled
                ">
                            <svg class="Icon" xmlns="http://www.w3.org/2000/svg">
                                <use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#icon-video"/>
                            </svg>
                        </a>
                		</section>
                		<div class="Brackets-spacer"></div>
                		<div class="Brackets-spacer"></div>
                		<div class="Brackets-spacer"></div>
                	</div>
                </div>

Brackets With Match Details

Brackets with Match Detail molecule: src/assets/toolkit/styles/partials/organisms/_brackets.scss.

Top 8

3
1
3
1
3
1
3
1

Top 4

3
1
0
Hanamura
3
5
Ilos
2
2
Horizon Lunar Colony
0
3
1

Championship Match

---
---
<div class="Brackets Brackets--matchDetails dragscroll">
                	<div class="Brackets-column">
                		<h3 class="Brackets-columnTitle">Top 8</h3>
                		<section class="Brackets-match MatchStacked">
                			<div class="MatchStacked-teams">
                				<div class="TeamLabel is-winner">
                					<div class="TeamLabel-block">
                						<img src="../assets/toolkit/images/static/team-badge-a.png" alt="" class="TeamLabel-logo">
                					</div>
                					<div class="TeamLabel-info">
                						<div class="TeamLabel-name hidden-md hidden-sm hidden-xs">Team Name</div>
                						<div class="TeamLabel-name hidden-lg">TMN</div>
                					</div>
                					<div class="TeamLabel-stat">3</div>
                				</div>
                				<div class="TeamLabel">
                					<div class="TeamLabel-block">
                						<img src="../assets/toolkit/images/static/team-badge-b.png" alt="" class="TeamLabel-logo">
                					</div>
                					<div class="TeamLabel-info">
                						<div class="TeamLabel-name hidden-md hidden-sm hidden-xs">Team Name</div>
                						<div class="TeamLabel-name hidden-lg">TMN</div>
                					</div>
                					<div class="TeamLabel-stat">1</div>
                				</div>
                			</div>
                			<a href="javascript:void(0)" class="MatchStacked-vod Button Button--iconOnly">
                                <svg class="Icon" xmlns="http://www.w3.org/2000/svg">
                                    <use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#icon-video"/>
                                </svg>
                            </a>
                			<div class="MatchStacked-details MatchDetail">
                				<div class="MatchDetail-selector">
                					<button class="MatchDetail-selector-expand Card-link--withUnderlineAnimation">
                                        Match Details
                                        <svg xmlns="http://www.w3.org/2000/svg" class="Icon Icon--xs">
                                            <use xlink:href="#icon-chevron-down"/>
                                        </svg>
                                    </button>
                				</div>
                			</div>
                		</section>
                		<div class="Brackets-arrow">
                			<svg xmlns="http://www.w3.org/2000/svg" class="Icon Icon--sm">
                                <use xlink:href="#icon-arrow-right"/>
                            </svg>
                		</div>
                		<section class="Brackets-match MatchStacked">
                			<div class="MatchStacked-teams">
                				<div class="TeamLabel is-winner">
                					<div class="TeamLabel-block">
                						<img src="../assets/toolkit/images/static/team-badge-a.png" alt="" class="TeamLabel-logo">
                					</div>
                					<div class="TeamLabel-info">
                						<div class="TeamLabel-name hidden-md hidden-sm hidden-xs">Team Name</div>
                						<div class="TeamLabel-name hidden-lg">TMN</div>
                					</div>
                					<div class="TeamLabel-stat">3</div>
                				</div>
                				<div class="TeamLabel">
                					<div class="TeamLabel-block">
                						<img src="../assets/toolkit/images/static/team-badge-b.png" alt="" class="TeamLabel-logo">
                					</div>
                					<div class="TeamLabel-info">
                						<div class="TeamLabel-name hidden-md hidden-sm hidden-xs">Team Name</div>
                						<div class="TeamLabel-name hidden-lg">TMN</div>
                					</div>
                					<div class="TeamLabel-stat">1</div>
                				</div>
                			</div>
                			<a href="javascript:void(0)" class="MatchStacked-vod Button Button--iconOnly">
                                <svg class="Icon" xmlns="http://www.w3.org/2000/svg">
                                    <use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#icon-video"/>
                                </svg>
                            </a>
                			<div class="MatchStacked-details MatchDetail">
                				<div class="MatchDetail-selector">
                					<button class="MatchDetail-selector-expand Card-link--withUnderlineAnimation">
                                        Match Details
                                        <svg xmlns="http://www.w3.org/2000/svg" class="Icon Icon--xs">
                                            <use xlink:href="#icon-chevron-down"/>
                                        </svg>
                                    </button>
                				</div>
                			</div>
                		</section>
                		<div class="Brackets-spacer"></div>
                		<section class="Brackets-match MatchStacked">
                			<div class="MatchStacked-teams">
                				<div class="TeamLabel is-winner">
                					<div class="TeamLabel-block">
                						<img src="../assets/toolkit/images/static/team-badge-a.png" alt="" class="TeamLabel-logo">
                					</div>
                					<div class="TeamLabel-info">
                						<div class="TeamLabel-name hidden-md hidden-sm hidden-xs">Team Name</div>
                						<div class="TeamLabel-name hidden-lg">TMN</div>
                					</div>
                					<div class="TeamLabel-stat">3</div>
                				</div>
                				<div class="TeamLabel">
                					<div class="TeamLabel-block">
                						<img src="../assets/toolkit/images/static/team-badge-b.png" alt="" class="TeamLabel-logo">
                					</div>
                					<div class="TeamLabel-info">
                						<div class="TeamLabel-name hidden-md hidden-sm hidden-xs">Team Name</div>
                						<div class="TeamLabel-name hidden-lg">TMN</div>
                					</div>
                					<div class="TeamLabel-stat">1</div>
                				</div>
                			</div>
                			<a href="javascript:void(0)" class="MatchStacked-vod Button Button--iconOnly">
                                <svg class="Icon" xmlns="http://www.w3.org/2000/svg">
                                    <use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#icon-video"/>
                                </svg>
                            </a>
                			<div class="MatchStacked-details MatchDetail">
                				<div class="MatchDetail-selector">
                					<button class="MatchDetail-selector-expand Card-link--withUnderlineAnimation">
                                        Match Details
                                        <svg xmlns="http://www.w3.org/2000/svg" class="Icon Icon--xs">
                                            <use xlink:href="#icon-chevron-down"/>
                                        </svg>
                                    </button>
                				</div>
                			</div>
                		</section>
                		<div class="Brackets-arrow">
                			<svg xmlns="http://www.w3.org/2000/svg" class="Icon">
                                <use xlink:href="#icon-arrow-right"/>
                            </svg>
                		</div>
                		<section class="Brackets-match MatchStacked">
                			<div class="MatchStacked-teams">
                				<div class="TeamLabel is-winner">
                					<div class="TeamLabel-block">
                						<img src="../assets/toolkit/images/static/team-badge-a.png" alt="" class="TeamLabel-logo">
                					</div>
                					<div class="TeamLabel-info">
                						<div class="TeamLabel-name hidden-md hidden-sm hidden-xs">Team Name</div>
                						<div class="TeamLabel-name hidden-lg">TMN</div>
                					</div>
                					<div class="TeamLabel-stat">3</div>
                				</div>
                				<div class="TeamLabel">
                					<div class="TeamLabel-block">
                						<img src="../assets/toolkit/images/static/team-badge-b.png" alt="" class="TeamLabel-logo">
                					</div>
                					<div class="TeamLabel-info">
                						<div class="TeamLabel-name hidden-md hidden-sm hidden-xs">Team Name</div>
                						<div class="TeamLabel-name hidden-lg">TMN</div>
                					</div>
                					<div class="TeamLabel-stat">1</div>
                				</div>
                			</div>
                			<a href="javascript:void(0)" class="MatchStacked-vod Button Button--iconOnly">
                                <svg class="Icon" xmlns="http://www.w3.org/2000/svg">
                                    <use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#icon-video"/>
                                </svg>
                            </a>
                			<div class="MatchStacked-details MatchDetail">
                				<div class="MatchDetail-selector">
                					<button class="MatchDetail-selector-expand Card-link--withUnderlineAnimation">
                                        Match Details
                                        <svg xmlns="http://www.w3.org/2000/svg" class="Icon Icon--xs">
                                            <use xlink:href="#icon-chevron-down"/>
                                        </svg>
                                    </button>
                				</div>
                			</div>
                		</section>
                	</div>
                
                	<div class="Brackets-column">
                		<div class="Brackets-spacer"></div>
                		<h3 class="Brackets-columnTitle">Top 4</h3>
                		<section class="Brackets-match MatchStacked">
                			<div class="MatchStacked-teams">
                				<div class="TeamLabel is-winner">
                					<div class="TeamLabel-block">
                						<img src="../assets/toolkit/images/static/team-badge-a.png" alt="" class="TeamLabel-logo">
                					</div>
                					<div class="TeamLabel-info">
                						<div class="TeamLabel-name hidden-md hidden-sm hidden-xs">Team Name</div>
                						<div class="TeamLabel-name hidden-lg">TMN</div>
                					</div>
                					<div class="TeamLabel-stat">3</div>
                				</div>
                				<div class="TeamLabel">
                					<div class="TeamLabel-block">
                						<img src="../assets/toolkit/images/static/team-badge-b.png" alt="" class="TeamLabel-logo">
                					</div>
                					<div class="TeamLabel-info">
                						<div class="TeamLabel-name hidden-md hidden-sm hidden-xs">Team Name</div>
                						<div class="TeamLabel-name hidden-lg">TMN</div>
                					</div>
                					<div class="TeamLabel-stat">1</div>
                				</div>
                			</div>
                			<a href="javascript:void(0)" class="MatchStacked-vod Button Button--iconOnly">
                                <svg class="Icon" xmlns="http://www.w3.org/2000/svg">
                                    <use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#icon-video"/>
                                </svg>
                            </a>
                			<div class="MatchStacked-details MatchDetail">
                				<div class="MatchDetail-selector">
                					<button class="MatchDetail-selector-expand Card-link--withUnderlineAnimation is-active">
                                        Match Details
                                        <svg xmlns="http://www.w3.org/2000/svg" class="Icon Icon--xs">
                                            <use xlink:href="#icon-chevron-down"/>
                                        </svg>
                                    </button>
                				</div>
                				<div class="MatchDetail-matchList">
                					<div class="MatchDetail-mapList">
                						<div class="MatchDetail-map">
                							<div class="MatchDetail-mapScore">0</div>
                							<div class="MatchDetail-mapName">Hanamura</div>
                							<div class="MatchDetail-mapScore is-winner">3</div>
                						</div>
                						<div class="MatchDetail-map">
                							<div class="MatchDetail-mapScore is-winner">5</div>
                							<div class="MatchDetail-mapName">Ilos</div>
                							<div class="MatchDetail-mapScore">2</div>
                						</div>
                						<div class="MatchDetail-map">
                							<div class="MatchDetail-mapScore is-winner">2</div>
                							<div class="MatchDetail-mapName">Horizon Lunar Colony</div>
                							<div class="MatchDetail-mapScore">0</div>
                						</div>
                
                					</div>
                				</div>
                			</div>
                		</section>
                		<div class="Brackets-arrow">
                			<svg xmlns="http://www.w3.org/2000/svg" class="Icon">
                                <use xlink:href="#icon-arrow-right"/>
                            </svg>
                		</div>
                		<section class="Brackets-match MatchStacked">
                			<div class="MatchStacked-teams">
                				<div class="TeamLabel is-winner">
                					<div class="TeamLabel-block">
                						<img src="../assets/toolkit/images/static/team-badge-a.png" alt="" class="TeamLabel-logo">
                					</div>
                					<div class="TeamLabel-info">
                						<div class="TeamLabel-name hidden-md hidden-sm hidden-xs">Team Name</div>
                						<div class="TeamLabel-name hidden-lg">TMN</div>
                					</div>
                					<div class="TeamLabel-stat">3</div>
                				</div>
                				<div class="TeamLabel">
                					<div class="TeamLabel-block">
                						<img src="../assets/toolkit/images/static/team-badge-b.png" alt="" class="TeamLabel-logo">
                					</div>
                					<div class="TeamLabel-info">
                						<div class="TeamLabel-name hidden-md hidden-sm hidden-xs">Team Name</div>
                						<div class="TeamLabel-name hidden-lg">TMN</div>
                					</div>
                					<div class="TeamLabel-stat">1</div>
                				</div>
                			</div>
                			<a href="javascript:void(0)" class="MatchStacked-vod Button Button--iconOnly">
                                <svg class="Icon" xmlns="http://www.w3.org/2000/svg">
                                    <use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#icon-video"/>
                                </svg>
                            </a>
                			<div class="MatchStacked-details MatchDetail">
                				<div class="MatchDetail-selector">
                					<button class="MatchDetail-selector-expand Card-link--withUnderlineAnimation">
                                        Match Details
                                        <svg xmlns="http://www.w3.org/2000/svg" class="Icon Icon--xs">
                                            <use xlink:href="#icon-chevron-down"/>
                                        </svg>
                                    </button>
                				</div>
                			</div>
                		</section>
                		<div class="Brackets-spacer"></div>
                	</div>
                
                	<div class="Brackets-column">
                		<div class="Brackets-spacer"></div>
                		<div class="Brackets-spacer"></div>
                		<div class="Brackets-spacer"></div>
                		<h3 class="Brackets-columnTitle">Championship Match</h3>
                		<section class="Brackets-match MatchStacked">
                			<div class="MatchStacked-teams">
                				<div class="TeamLabel is-empty">
                					---
                				</div>
                				<div class="TeamLabel is-empty">
                					---
                				</div>
                			</div>
                			<a href="javascript:void(0)" class="MatchStacked-vod Button Button--iconOnly is-disabled
                    ">
                                <svg class="Icon" xmlns="http://www.w3.org/2000/svg">
                                    <use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#icon-video"/>
                                </svg>
                            </a>
                			<div class="MatchStacked-details MatchDetail">
                				<div class="MatchDetail-selector">
                					<button class="MatchDetail-selector-expand Card-link--withUnderlineAnimation is-disabled">
                                            Match Details
                                            <svg xmlns="http://www.w3.org/2000/svg" class="Icon Icon--xs">
                                                <use xlink:href="#icon-chevron-down"/>
                                            </svg>
                                        </button>
                				</div>
                			</div>
                		</section>
                		<div class="Brackets-spacer"></div>
                		<div class="Brackets-spacer"></div>
                		<div class="Brackets-spacer"></div>
                	</div>
                </div>

Bracket Playoffs

Playoff Brackets have a hoverable more-info section. It is responsive and doesn't have a drag-scroll. Brackets for playoffs molecule: src/assets/toolkit/styles/partials/organisms/_brackets-playoffs.scss.

quarterfinal series

Best of 3 Matches

quarterfinal 1
final
3
Team Name
3
5
Team Name
1
quarterfinal 2
next: match 3
3
Team Name
3
5
Team Name
1

semifinal series

Best of 3 Matches

semifinal 1
3
Team Name (additional info in parens)
3
5
Team Name (additional info in parens)
1
semifinal 2
3
Team Name (additional info in parens)
3
5
Team Name (additional info in parens)
1

grand finals

Best of 3 Matches

grand finals
3
Team Name
3
5
Team Name
1
<div class="Brackets Brackets--playoffs">
                	<div class="Brackets-column">
                		<h4 class="u-uppercase u-verticalMargin--xxx-small">quarterfinal series</h4>
                		<div>Best of 3 Matches</div>
                		<hr class="Rule Rule--orange" />
                		<div class="Brackets-match MatchStacked MatchStacked--hoverableDetails MatchStacked--withoutVOD">
                			<div class="FlexElement">
                				<div class="SubHeader SubHeader--left">quarterfinal 1</div>
                				<div class="SubHeader SubHeader--right">final</div>
                			</div>
                			<div class="MatchStacked-teams">
                				<div class="TeamLabel TeamLabel--horizontalStat is-winner">
                					<div class="TeamLabel-block" style="background-color:yellow;">
                						<img src="../assets/toolkit/images/static/team-badge-a.png" alt="" class="TeamLabel-logo">
                					</div>
                					<div class="TeamLabel-stat">
                						3
                					</div>
                					<div class="TeamLabel-info">
                						<div class="TeamLabel-name u-uppercase">Team Name</div>
                					</div>
                					<div class="TeamLabel-stat">3</div>
                				</div>
                				<div class="TeamLabel TeamLabel--horizontalStat">
                					<div class="TeamLabel-block" style="background-color:orange;">
                						<img src="../assets/toolkit/images/static/team-badge-b.png" alt="" class="TeamLabel-logo">
                					</div>
                					<div class="TeamLabel-stat">
                						5
                					</div>
                					<div class="TeamLabel-info">
                						<div class="TeamLabel-name u-uppercase">Team Name</div>
                					</div>
                					<div class="TeamLabel-stat">1</div>
                				</div>
                			</div>
                			<div class="MatchStacked-details MatchDetail">
                				<div class="MatchDetail-selector">
                					<button class="MatchDetail-selector-expand">
                                        Series Detail
                                        <svg xmlns="http://www.w3.org/2000/svg" class="Icon Icon--xs">
                                            <use xlink:href="#icon-chevron-down"/>
                                        </svg>
                                    </button>
                				</div>
                			</div>
                		</div>
                		<div class="Brackets-match MatchStacked MatchStacked--hoverableDetails MatchStacked--withoutVOD">
                			<div class="FlexElement">
                				<div class="SubHeader SubHeader--left">quarterfinal 2</div>
                				<div class="SubHeader SubHeader--right">next: match 3</div>
                			</div>
                			<div class="MatchStacked-teams">
                				<div class="TeamLabel TeamLabel--horizontalStat is-winner">
                					<div class="TeamLabel-block" style="background-color:yellow;">
                						<img src="../assets/toolkit/images/static/team-badge-a.png" alt="" class="TeamLabel-logo">
                					</div>
                					<div class="TeamLabel-stat">
                						3
                					</div>
                					<div class="TeamLabel-info">
                						<div class="TeamLabel-name u-uppercase">Team Name</div>
                					</div>
                					<div class="TeamLabel-stat">3</div>
                				</div>
                				<div class="TeamLabel TeamLabel--horizontalStat">
                					<div class="TeamLabel-block" style="background-color:orange;">
                						<img src="../assets/toolkit/images/static/team-badge-b.png" alt="" class="TeamLabel-logo">
                					</div>
                					<div class="TeamLabel-stat">
                						5
                					</div>
                					<div class="TeamLabel-info">
                						<div class="TeamLabel-name u-uppercase">Team Name</div>
                					</div>
                					<div class="TeamLabel-stat">1</div>
                				</div>
                			</div>
                			<div class="MatchStacked-details MatchDetail">
                				<div class="MatchDetail-selector">
                					<button class="MatchDetail-selector-expand is-active">
                                        Series Detail
                                        <svg xmlns="http://www.w3.org/2000/svg" class="Icon Icon--xs">
                                            <use xlink:href="#icon-chevron-up"/>
                                        </svg>
                                    </button>
                				</div>
                				<div class="MatchSchedule is-selected">
                					<div class="MatchRow MatchRow-header Date">
                						<span class="Date-dayOfWeek">Wednesday</span>
                						<span class="Date-monthAndDay">December 6</span>
                					</div>
                					<div class="MatchRow MatchRow-match">
                						<a href="javascript:void(0)" class="MatchRow-contentWrapper">
                							<div class="MatchRow-team">
                								<div class="TeamLabel TeamLabel--reverse">
                									<div class="TeamLabel-block">
                										<svg xmlns="http://www.w3.org/2000/svg" class="TeamLabel-logo">
                                                            <use xlink:href="#icon-team-fallback"/>
                                                        </svg>
                									</div>
                									<div class="TeamLabel-info TeamLabel-info--noScore">
                										<div class="TeamLabel-name">TMN</div>
                									</div>
                								</div>
                							</div>
                							<div class="MatchRow-status">
                								<span class="MatchStatus MatchStatus--transparent">
                                                    <span class="MatchStatus-score is-winner">4</span>
                								<span class="MatchStatus-score">-</span>
                								<span class="MatchStatus-score">0</span>
                								</span>
                							</div>
                							<div class="MatchRow-team">
                								<div class="TeamLabel">
                									<div class="TeamLabel-block">
                										<svg xmlns="http://www.w3.org/2000/svg" class="TeamLabel-logo">
                                                            <use xlink:href="#icon-team-fallback"/>
                                                        </svg>
                									</div>
                									<div class="TeamLabel-info TeamLabel-info--noScore">
                										<div class="TeamLabel-name">TMN</div>
                									</div>
                								</div>
                							</div>
                						</a>
                					</div>
                					<div class="MatchRow MatchRow-header Date">
                						<span class="Date-dayOfWeek">Wednesday</span>
                						<span class="Date-monthAndDay">December 6</span>
                					</div>
                					<div class="MatchRow MatchRow-match">
                						<a href="javascript:void(0)" class="MatchRow-contentWrapper">
                							<div class="MatchRow-team">
                								<div class="TeamLabel TeamLabel--reverse">
                									<div class="TeamLabel-block">
                										<svg xmlns="http://www.w3.org/2000/svg" class="TeamLabel-logo">
                                                            <use xlink:href="#icon-team-fallback"/>
                                                        </svg>
                									</div>
                									<div class="TeamLabel-info TeamLabel-info--noScore">
                										<div class="TeamLabel-name">TMN</div>
                									</div>
                								</div>
                							</div>
                							<div class="MatchRow-status">
                								<span class="MatchStatus MatchStatus--transparent">
                                                    <span class="MatchStatus-score is-winner">4</span>
                								<span class="MatchStatus-score">-</span>
                								<span class="MatchStatus-score">0</span>
                								</span>
                							</div>
                							<div class="MatchRow-team">
                								<div class="TeamLabel">
                									<div class="TeamLabel-block">
                										<svg xmlns="http://www.w3.org/2000/svg" class="TeamLabel-logo">
                                                            <use xlink:href="#icon-team-fallback"/>
                                                        </svg>
                									</div>
                									<div class="TeamLabel-info TeamLabel-info--noScore">
                										<div class="TeamLabel-name">TMN</div>
                									</div>
                								</div>
                							</div>
                						</a>
                					</div>
                					<div class="MatchRow MatchRow-match">
                						<a href="javascript:void(0)" class="MatchRow-contentWrapper">
                							<div class="MatchRow-team">
                								<div class="TeamLabel TeamLabel--reverse">
                									<div class="TeamLabel-block">
                										<svg xmlns="http://www.w3.org/2000/svg" class="TeamLabel-logo">
                                                            <use xlink:href="#icon-team-fallback"/>
                                                        </svg>
                									</div>
                									<div class="TeamLabel-info TeamLabel-info--noScore">
                										<div class="TeamLabel-name">TMN</div>
                									</div>
                								</div>
                							</div>
                							<div class="MatchRow-status">
                								<span class="MatchStatus MatchStatus--transparent">
                                                    <span class="MatchStatus-score is-winner">4</span>
                								<span class="MatchStatus-score">-</span>
                								<span class="MatchStatus-score">0</span>
                								</span>
                							</div>
                							<div class="MatchRow-team">
                								<div class="TeamLabel">
                									<div class="TeamLabel-block">
                										<svg xmlns="http://www.w3.org/2000/svg" class="TeamLabel-logo">
                                                            <use xlink:href="#icon-team-fallback"/>
                                                        </svg>
                									</div>
                									<div class="TeamLabel-info TeamLabel-info--noScore">
                										<div class="TeamLabel-name">TMN</div>
                									</div>
                								</div>
                							</div>
                						</a>
                					</div>
                					<div class="MatchRow MatchRow-match">
                						<a href="javascript:void(0)" class="MatchRow-contentWrapper">
                							<div class="MatchRow-team">
                								<div class="TeamLabel TeamLabel--reverse">
                									<div class="TeamLabel-block">
                										<svg xmlns="http://www.w3.org/2000/svg" class="TeamLabel-logo">
                                                            <use xlink:href="#icon-team-fallback"/>
                                                        </svg>
                									</div>
                									<div class="TeamLabel-info TeamLabel-info--noScore">
                										<div class="TeamLabel-name">TMN</div>
                									</div>
                								</div>
                							</div>
                							<div class="MatchRow-status">
                								<span class="MatchStatus MatchStatus--transparent">
                                                    <span class="MatchStatus-score is-winner">4</span>
                								<span class="MatchStatus-score">-</span>
                								<span class="MatchStatus-score">0</span>
                								</span>
                							</div>
                							<div class="MatchRow-team">
                								<div class="TeamLabel">
                									<div class="TeamLabel-block">
                										<svg xmlns="http://www.w3.org/2000/svg" class="TeamLabel-logo">
                                                            <use xlink:href="#icon-team-fallback"/>
                                                        </svg>
                									</div>
                									<div class="TeamLabel-info TeamLabel-info--noScore">
                										<div class="TeamLabel-name">TMN</div>
                									</div>
                								</div>
                							</div>
                						</a>
                					</div>
                				</div>
                			</div>
                		</div>
                	</div>
                	<div class="Brackets-divider">
                	</div>
                
                	<div class="Brackets-column">
                		<h4 class="u-uppercase u-verticalMargin--xxx-small">semifinal series</h4>
                		<div>Best of 3 Matches</div>
                		<hr class="Rule Rule--orange" />
                		<div class="Brackets-match MatchStacked MatchStacked--hoverableDetails MatchStacked--withoutVOD">
                			<div class="FlexElement">
                				<div class="SubHeader SubHeader--left">semifinal 1</div>
                				<div class="SubHeader SubHeader--right"></div>
                			</div>
                			<div class="MatchStacked-teams">
                				<div class="TeamLabel TeamLabel--horizontalStat is-winner">
                					<div class="TeamLabel-block" style="background-color:yellow;">
                						<img src="../assets/toolkit/images/static/team-badge-a.png" alt="" class="TeamLabel-logo">
                					</div>
                					<div class="TeamLabel-stat">
                						3
                					</div>
                					<div class="TeamLabel-info">
                						<div class="TeamLabel-name u-uppercase">Team Name (additional info in parens)</div>
                					</div>
                					<div class="TeamLabel-stat">3</div>
                				</div>
                				<div class="TeamLabel TeamLabel--horizontalStat">
                					<div class="TeamLabel-block" style="background-color:orange;">
                						<img src="../assets/toolkit/images/static/team-badge-b.png" alt="" class="TeamLabel-logo">
                					</div>
                					<div class="TeamLabel-stat">
                						5
                					</div>
                					<div class="TeamLabel-info">
                						<div class="TeamLabel-name u-uppercase">Team Name (additional info in parens)</div>
                					</div>
                					<div class="TeamLabel-stat">1</div>
                				</div>
                			</div>
                			<div class="MatchStacked-details MatchDetail">
                				<div class="MatchDetail-selector">
                					<button class="MatchDetail-selector-expand">
                                        Series Detail
                                        <svg xmlns="http://www.w3.org/2000/svg" class="Icon Icon--xs">
                                            <use xlink:href="#icon-chevron-down"/>
                                        </svg>
                                    </button>
                				</div>
                				<div 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">TMN</div>
                									</div>
                								</div>
                							</div>
                							<div class="MatchRow-status">
                								<span class="MatchStatus MatchStatus--transparent">
                                                    <span class="MatchStatus-score is-winner">4</span>
                								<span class="MatchStatus-score">-</span>
                								<span class="MatchStatus-score">0</span>
                								</span>
                							</div>
                							<div class="MatchRow-team">
                								<div class="TeamLabel">
                									<div class="TeamLabel-block">
                										<svg xmlns="http://www.w3.org/2000/svg" class="TeamLabel-logo">
                                                            <use xlink:href="#icon-team-fallback"/>
                                                        </svg>
                									</div>
                									<div class="TeamLabel-info TeamLabel-info--noScore">
                										<div class="TeamLabel-name">TMN</div>
                									</div>
                								</div>
                							</div>
                						</a>
                					</div>
                					<div class="MatchRow MatchRow-header Date">
                						<span class="Date-dayOfWeek">Wednesday</span>
                						<span class="Date-monthAndDay">December 6</span>
                					</div>
                					<div class="MatchRow MatchRow-match">
                						<a href="javascript:void(0)" class="MatchRow-contentWrapper">
                							<div class="MatchRow-team">
                								<div class="TeamLabel TeamLabel--reverse">
                									<div class="TeamLabel-block">
                										<svg xmlns="http://www.w3.org/2000/svg" class="TeamLabel-logo">
                                                            <use xlink:href="#icon-team-fallback"/>
                                                        </svg>
                									</div>
                									<div class="TeamLabel-info TeamLabel-info--noScore">
                										<div class="TeamLabel-name">TMN</div>
                									</div>
                								</div>
                							</div>
                							<div class="MatchRow-status">
                								<span class="MatchStatus MatchStatus--transparent">
                                                    <span class="MatchStatus-score is-winner">4</span>
                								<span class="MatchStatus-score">-</span>
                								<span class="MatchStatus-score">0</span>
                								</span>
                							</div>
                							<div class="MatchRow-team">
                								<div class="TeamLabel">
                									<div class="TeamLabel-block">
                										<svg xmlns="http://www.w3.org/2000/svg" class="TeamLabel-logo">
                                                            <use xlink:href="#icon-team-fallback"/>
                                                        </svg>
                									</div>
                									<div class="TeamLabel-info TeamLabel-info--noScore">
                										<div class="TeamLabel-name">TMN</div>
                									</div>
                								</div>
                							</div>
                						</a>
                					</div>
                					<div class="MatchRow MatchRow-match">
                						<a href="javascript:void(0)" class="MatchRow-contentWrapper">
                							<div class="MatchRow-team">
                								<div class="TeamLabel TeamLabel--reverse">
                									<div class="TeamLabel-block">
                										<svg xmlns="http://www.w3.org/2000/svg" class="TeamLabel-logo">
                                                            <use xlink:href="#icon-team-fallback"/>
                                                        </svg>
                									</div>
                									<div class="TeamLabel-info TeamLabel-info--noScore">
                										<div class="TeamLabel-name">TMN</div>
                									</div>
                								</div>
                							</div>
                							<div class="MatchRow-status">
                								<span class="MatchStatus MatchStatus--transparent">
                                                    <span class="MatchStatus-score is-winner">4</span>
                								<span class="MatchStatus-score">-</span>
                								<span class="MatchStatus-score">0</span>
                								</span>
                							</div>
                							<div class="MatchRow-team">
                								<div class="TeamLabel">
                									<div class="TeamLabel-block">
                										<svg xmlns="http://www.w3.org/2000/svg" class="TeamLabel-logo">
                                                            <use xlink:href="#icon-team-fallback"/>
                                                        </svg>
                									</div>
                									<div class="TeamLabel-info TeamLabel-info--noScore">
                										<div class="TeamLabel-name">TMN</div>
                									</div>
                								</div>
                							</div>
                						</a>
                					</div>
                					<div class="MatchRow MatchRow-match">
                						<a href="javascript:void(0)" class="MatchRow-contentWrapper">
                							<div class="MatchRow-team">
                								<div class="TeamLabel TeamLabel--reverse">
                									<div class="TeamLabel-block">
                										<svg xmlns="http://www.w3.org/2000/svg" class="TeamLabel-logo">
                                                            <use xlink:href="#icon-team-fallback"/>
                                                        </svg>
                									</div>
                									<div class="TeamLabel-info TeamLabel-info--noScore">
                										<div class="TeamLabel-name">TMN</div>
                									</div>
                								</div>
                							</div>
                							<div class="MatchRow-status">
                								<span class="MatchStatus MatchStatus--transparent">
                                                    <span class="MatchStatus-score is-winner">4</span>
                								<span class="MatchStatus-score">-</span>
                								<span class="MatchStatus-score">0</span>
                								</span>
                							</div>
                							<div class="MatchRow-team">
                								<div class="TeamLabel">
                									<div class="TeamLabel-block">
                										<svg xmlns="http://www.w3.org/2000/svg" class="TeamLabel-logo">
                                                            <use xlink:href="#icon-team-fallback"/>
                                                        </svg>
                									</div>
                									<div class="TeamLabel-info TeamLabel-info--noScore">
                										<div class="TeamLabel-name">TMN</div>
                									</div>
                								</div>
                							</div>
                						</a>
                					</div>
                				</div>
                			</div>
                		</div>
                		<div class="Brackets-match MatchStacked MatchStacked--hoverableDetails MatchStacked--withoutVOD">
                			<div class="FlexElement">
                				<div class="SubHeader SubHeader--left">semifinal 2</div>
                				<div class="SubHeader SubHeader--right"></div>
                			</div>
                			<div class="MatchStacked-teams">
                				<div class="TeamLabel TeamLabel--horizontalStat is-winner">
                					<div class="TeamLabel-block" style="background-color:yellow;">
                						<img src="../assets/toolkit/images/static/team-badge-a.png" alt="" class="TeamLabel-logo">
                					</div>
                					<div class="TeamLabel-stat">
                						3
                					</div>
                					<div class="TeamLabel-info">
                						<div class="TeamLabel-name u-uppercase">Team Name (additional info in parens)</div>
                					</div>
                					<div class="TeamLabel-stat">3</div>
                				</div>
                				<div class="TeamLabel TeamLabel--horizontalStat">
                					<div class="TeamLabel-block" style="background-color:orange;">
                						<img src="../assets/toolkit/images/static/team-badge-b.png" alt="" class="TeamLabel-logo">
                					</div>
                					<div class="TeamLabel-stat">
                						5
                					</div>
                					<div class="TeamLabel-info">
                						<div class="TeamLabel-name u-uppercase">Team Name (additional info in parens)</div>
                					</div>
                					<div class="TeamLabel-stat">1</div>
                				</div>
                			</div>
                			<div class="MatchStacked-details MatchDetail">
                				<div class="MatchDetail-selector">
                					<button class="MatchDetail-selector-expand">
                                        Series Detail
                                        <svg xmlns="http://www.w3.org/2000/svg" class="Icon Icon--xs">
                                            <use xlink:href="#icon-chevron-down"/>
                                        </svg>
                                    </button>
                				</div>
                			</div>
                		</div>
                	</div>
                	<div class="Brackets-arrow">
                		<div class="Brackets-connectingLine">
                		</div>
                		<div class="Brackets-connectingLine">
                		</div>
                	</div>
                	<div class="Brackets-column">
                		<h4 class="u-uppercase u-verticalMargin--xxx-small">grand finals</h4>
                		<div>Best of 3 Matches</div>
                		<hr class="Rule Rule--orange" />
                		<div class="Brackets-match MatchStacked MatchStacked--hoverableDetails MatchStacked--withoutVOD">
                			<div class="FlexElement">
                				<div class="SubHeader SubHeader--left">grand finals</div>
                				<div class="SubHeader SubHeader--right"></div>
                			</div>
                			<div class="MatchStacked-teams">
                				<div class="TeamLabel TeamLabel--horizontalStat is-winner">
                					<div class="TeamLabel-block" style="background-color:yellow;">
                						<img src="../assets/toolkit/images/static/team-badge-a.png" alt="" class="TeamLabel-logo">
                					</div>
                					<div class="TeamLabel-stat">
                						3
                					</div>
                					<div class="TeamLabel-info">
                						<div class="TeamLabel-name u-uppercase">Team Name</div>
                					</div>
                					<div class="TeamLabel-stat">3</div>
                				</div>
                				<div class="TeamLabel TeamLabel--horizontalStat">
                					<div class="TeamLabel-block" style="background-color:orange;">
                						<img src="../assets/toolkit/images/static/team-badge-b.png" alt="" class="TeamLabel-logo">
                					</div>
                					<div class="TeamLabel-stat">
                						5
                					</div>
                					<div class="TeamLabel-info">
                						<div class="TeamLabel-name u-uppercase">Team Name</div>
                					</div>
                					<div class="TeamLabel-stat">1</div>
                				</div>
                			</div>
                			<div class="MatchStacked-details MatchDetail">
                				<div class="MatchDetail-selector">
                					<button class="MatchDetail-selector-expand">
                                        View Grand Finals
                                        <svg xmlns="http://www.w3.org/2000/svg" class="Icon Icon--xs">
                                            <use xlink:href="#icon-chevron-down"/>
                                        </svg>
                                    </button>
                				</div>
                			</div>
                		</div>
                	</div>
                </div>

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>

Two Column Cta

CTA that switches to two even columns at media query small or larger. Content inside of the inner divs is completely customizable. (In the example, the .u-flex-grow-only divs.) This is an organism simply to sit with all of the other CTAs.

Custom Dates
Custom Location
<div class="Background Background--centered Background--dark Background--coverMobile" style="background-color: rgb(31, 33, 35); background-image: url(http://placehold.it/1120x300/1f2123);">
                	<div class="container u-verticalPadding FlexElement FlexElement--responsive FlexElement--centeredVertical FlexElement--responsive-twoColumn">
                		<div class="u-flex-grow-only">
                			<img src="http://placehold.it/300x150/ff9800" class="img-responsive u-center">
                		</div>
                		<div class="u-flex-grow-only">
                			<div class="u-text-center u-secondary-font u-bold u-uppercase">
                				<div class="u-ui1 u-bottomMargin--xx-small">Custom Dates</div>
                				<div class="u-ui3 u-bottomMargin--x-small">Custom Location</div>
                				<button type="button" class="Button Button--primary">Custom CTA</button>
                			</div>
                		</div>
                	</div>
                </div>

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>

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

Rosters can be displayed side-by-side, or full width. Rosters can display a title. Rosters can display a team score on mobile. Rosters can display a list of numbers for ordered ranking.

File location: src/assets/toolkit/styles/materials/organisms/_game-roster.scss.

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>

Numbered List

  1. Player Name

    Player Handle

    Role
  2. Player Name

    Player Handle

    Role
  3. Player Name

    Player Handle

    Role
  4. Player Name

    Player Handle

    Role
  5. Player Name

    Player Handle

    Role
  6. Player Name

    Player Handle

    Role
<div class="GameRoster">
                	<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>
                		<ol class="GameRoster-awayRoster GameRoster-numberedList">
                			<li>
                				<div 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>
                				</div>
                			</li>
                			<li>
                				<div 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>
                				</div>
                			</li>
                			<li>
                				<div 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>
                				</div>
                			</li>
                			<li>
                				<div 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>
                				</div>
                			</li>
                			<li>
                				<div 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>
                				</div>
                			</li>
                			<li>
                				<div 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>
                				</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 LiveMatch-liveLink--live-soon">
                    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 LiveMatch-liveLink--live-now">
                    <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 LiveMatch-liveLink--live-now">
                        <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>

Match Detail

Selector

File location: src/assets/toolkit/styles/organism/_match-detail.scss.

Week 1
<div class="MatchDetail">
                	<div class="MatchDetail-selector">
                		<button class="MatchDetail-selector-expand Card-link--withUnderlineAnimation">
                            Match Details
                            <svg xmlns="http://www.w3.org/2000/svg" class="Icon Icon--xs">
                                <use xlink:href="#icon-chevron-down"/>
                            </svg>
                        </button>
                		<div class="MatchDetail-selector-week">
                			<a href="javascript:void(0)" class="MatchWeek-controls MatchWeek-controls--prev">
                                <svg xmlns="http://www.w3.org/2000/svg" class="Icon Icon--xs">
                                    <use xlink:href="#icon-chevron-left"/>
                                </svg>
                            </a>
                			<span class="MatchWeek-label">
                                Week 1
                            </span>
                			<a href="javascript:void(0)" class="MatchWeek-controls MatchWeek-controls--next">
                                <svg xmlns="http://www.w3.org/2000/svg" class="Icon Icon--xs">
                                    <use xlink:href="#icon-chevron-right"/>
                                </svg>
                            </a>
                		</div>
                	</div>
                </div>

Match List

Shows a listing of matches played in selected week

File location: src/assets/toolkit/styles/organism/_match-detail.scss.

<div class="MatchDetail">
                	<div class="MatchDetail-matchList">
                		<div class="MatchDetail-match">
                			<div class="MatchSchedule">
                				<div class="MatchRow MatchRow-header Date">
                					10/31/2018 | 11:00PM
                				</div>
                				<a href="javascript:void(0)" class="MatchRow MatchRow-match">
                					<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>
                					<div class="MatchRow-status">
                						<div class="MatchStatus MatchStatus--transparent is-homeWinner">
                							<div class="MatchStatus-score is-winner">4</div>
                							<div class="MatchRow-matchDetail">
                								<button class="Button Button--primary">
                                                <svg class="Icon" xmlns="http://www.w3.org/2000/svg">
                                                    <use xlink:href="#icon-plus"/>
                                                </svg>
                                            </button>
                							</div>
                							<div class="MatchStatus-score">0</div>
                						</div>
                					</div>
                					<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>
                				</a>
                			</div>
                			<a href="javascript:void(0)" class="MatchDetail-vod Button Button--iconOnly">
                                <svg class="Icon" xmlns="http://www.w3.org/2000/svg">
                                    <use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#icon-video"/>
                                </svg>
                            </a>
                		</div>
                		<div class="MatchDetail-match">
                			<div class="MatchSchedule">
                				<div class="MatchRow MatchRow-header Date">
                					10/31/2018 | 11:00PM
                				</div>
                				<a href="javascript:void(0)" class="MatchRow MatchRow-match">
                					<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>
                					<div class="MatchRow-status">
                						<div class="MatchStatus MatchStatus--transparent is-homeWinner">
                							<div class="MatchStatus-score is-winner">4</div>
                							<div class="MatchRow-matchDetail">
                								<button class="Button Button--primary">
                                                <svg class="Icon" xmlns="http://www.w3.org/2000/svg">
                                                    <use xlink:href="#icon-plus"/>
                                                </svg>
                                            </button>
                							</div>
                							<div class="MatchStatus-score">0</div>
                						</div>
                					</div>
                					<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>
                				</a>
                			</div>
                			<a href="javascript:void(0)" class="MatchDetail-vod Button Button--iconOnly">
                                <svg class="Icon" xmlns="http://www.w3.org/2000/svg">
                                    <use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#icon-video"/>
                                </svg>
                            </a>
                		</div>
                		<div class="MatchDetail-match">
                			<div class="MatchSchedule">
                				<div class="MatchRow MatchRow-header Date">
                					10/31/2018 | 11:00PM
                				</div>
                				<a href="javascript:void(0)" class="MatchRow MatchRow-match">
                					<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>
                					<div class="MatchRow-status">
                						<div class="MatchStatus MatchStatus--transparent is-homeWinner">
                							<div class="MatchStatus-score is-winner">4</div>
                							<div class="MatchRow-matchDetail">
                								<button class="Button Button--primary">
                                                <svg class="Icon" xmlns="http://www.w3.org/2000/svg">
                                                    <use xlink:href="#icon-plus"/>
                                                </svg>
                                            </button>
                							</div>
                							<div class="MatchStatus-score">0</div>
                						</div>
                					</div>
                					<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>
                				</a>
                			</div>
                			<a href="javascript:void(0)" class="MatchDetail-vod Button Button--iconOnly">
                                <svg class="Icon" xmlns="http://www.w3.org/2000/svg">
                                    <use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#icon-video"/>
                                </svg>
                            </a>
                		</div>
                		<div class="MatchDetail-match">
                			<div class="MatchSchedule">
                				<div class="MatchRow MatchRow-header Date">
                					10/31/2018 | 11:00PM
                				</div>
                				<a href="javascript:void(0)" class="MatchRow MatchRow-match">
                					<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>
                					<div class="MatchRow-status">
                						<div class="MatchStatus MatchStatus--transparent is-homeWinner">
                							<div class="MatchStatus-score is-winner">4</div>
                							<div class="MatchRow-matchDetail">
                								<button class="Button Button--primary">
                                                <svg class="Icon" xmlns="http://www.w3.org/2000/svg">
                                                    <use xlink:href="#icon-plus"/>
                                                </svg>
                                            </button>
                							</div>
                							<div class="MatchStatus-score">0</div>
                						</div>
                					</div>
                					<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>
                				</a>
                			</div>
                			<a href="javascript:void(0)" class="MatchDetail-vod Button Button--iconOnly">
                                <svg class="Icon" xmlns="http://www.w3.org/2000/svg">
                                    <use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#icon-video"/>
                                </svg>
                            </a>
                		</div>
                	</div>
                </div>

Map List

Shows a listing of maps played in selected match

File location: src/assets/toolkit/styles/organism/_match-detail.scss.

10/31/2018 | 11:00PM
4
0
0
Hanamura
3
5
Ilos
2
<div class="MatchDetail">
                	<div class="MatchDetail-matchList">
                		<div class="MatchDetail-match is-active">
                			<div class="MatchSchedule">
                				<div class="MatchRow MatchRow-header Date">
                					<span class="Date-date">10/31/2018</span> |
                					<span class="Date-time">11:00PM</span>
                				</div>
                				<div class="MatchRow MatchRow-match">
                					<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>
                					<div class="MatchRow-status">
                						<div class="MatchStatus MatchStatus--transparent">
                							<div class="MatchStatus-score is-winner">4</div>
                							<div class="MatchRow-matchDetail">
                								<button class="Button Button--primary">
                                                    <svg class="Icon" xmlns="http://www.w3.org/2000/svg">
                                                        <use xlink:href="#icon-plus"/>
                                                    </svg>
                                                </button>
                							</div>
                							<div class="MatchStatus-score">0</div>
                						</div>
                					</div>
                					<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>
                			</div>
                			<a href="javascript:void(0)" class="MatchDetail-vod Button Button--iconOnly">
                                <svg class="Icon" xmlns="http://www.w3.org/2000/svg">
                                    <use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#icon-video"/>
                                </svg>
                            </a>
                			<div class="MatchDetail-mapList">
                				<div class="MatchDetail-map">
                					<div class="MatchDetail-mapScore">0</div>
                					<div class="MatchDetail-mapName">Hanamura</div>
                					<div class="MatchDetail-mapScore is-winner">3</div>
                				</div>
                				<div class="MatchDetail-map">
                					<div class="MatchDetail-mapScore is-winner">5</div>
                					<div class="MatchDetail-mapName">Ilos</div>
                					<div class="MatchDetail-mapScore">2</div>
                				</div>
                			</div>
                		</div>
                
                	</div>
                </div>

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>

Player Header

Player header

Player Name

Player Handle
1

Hometown

Hometown


Player Name

Player Handle

Hometown

Hometown

<div class="PlayerHeader-wrapper PlayerHeader-wrapper--darkBackground" style="background-color: #222222">
        	<div class="PlayerHeader u-bottomPadding--small u-verticalNavPadding">
        		<div class="PlayerHeader-portrait">
        			<img class="PlayerHeader-portraitImage" src="https://bnetcmsus-a.akamaihd.net/cms/page_media/S02042JXNHF81515718127993.png" />
        		</div>
        
        		<div class="PlayerHeader-info">
        			<div class="PlayerHandle PlayerHandle--stack-sm PlayerHandle--verticalCentered">
        				<img src="https://placehold.it/50x50" class="PlayerHandle-teamBadge PlayerHandle-teamBadge--sm PlayerHandle-teamBadge--alwaysVisible">
        				<h4 class="PlayerHandle-name">Player Name</h4>
        				<div class="PlayerHandle-handleWrapper">
        					<span class="PlayerHandle-handle">Player Handle</span>
        					<div class="PlayerHandle-badgeGroup">
        						<span class="PlayerHandle-badge PlayerHandle-badge--light">1</span><span class="PlayerHandle-badge">
                                    <svg class="Icon" xmlns="http://www.w3.org/2000/svg">
                                        <use xlink:href="#role_tank"/>
                                    </svg>
                                </span>
        					</div>
        				</div>
        			</div>
        
        			<div class="PlayerHeader-social">
        				<div class="PlayerHeader-socialItem">
        					<ul class="SocialList">
        						<li class="SocialList-item">
        							<a href="javascript:void(0)">
                                        <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>
                                    </a>
        						</li>
        						<li class="SocialList-item">
        							<a href="javascript:void(0)">
                                        <svg class="Icon" xmlns="http://www.w3.org/2000/svg">
                                            <use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#social-twitter"></use>
                                        </svg>
                                    </a>
        						</li>
        					</ul>
        				</div>
        				<div class="PlayerHeader-socialItem">
        					<svg class="Icon Icon--sm" xmlns="http://www.w3.org/2000/svg">
                                <use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#icon-home"></use>
                            </svg>
        					<h4 class="PlayerHeader-cor">Hometown</h4>
        				</div>
        			</div>
        		</div>
        	</div>
        	<div class="PlayerHeader-socialMobile" style="background-color: #494949">
        		<div class="PlayerHeader-socialMobileItem">
        			<svg class="Icon Icon--sm" xmlns="http://www.w3.org/2000/svg">
                        <use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#icon-home"></use>
                    </svg>
        			<h4 class="PlayerHeader-cor">Hometown</h4>
        		</div>
        		<div class="PlayerHeader-socialMobileItem">
        			<ul class="SocialList">
        				<li class="SocialList-item">
        					<a href="javascript:void(0)">
                                <svg class="Icon Icon" xmlns="http://www.w3.org/2000/svg">
                                    <use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#social-twitch"></use>
                                </svg>
                            </a>
        				</li>
        				<li class="SocialList-item">
        					<a href="javascript:void(0)">
                                <svg class="Icon Icon" xmlns="http://www.w3.org/2000/svg">
                                    <use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#social-twitter"></use>
                                </svg>
                            </a>
        				</li>
        			</ul>
        		</div>
        	</div>
        </div>
        
        <br />
        
        <div class="PlayerHeader-wrapper" style="background-color: #ff1458">
        	<div class="PlayerHeader u-bottomPadding--small u-verticalNavPadding">
        		<div class="PlayerHeader-portrait">
        			<img class="PlayerHeader-portraitImage" src="https://bnetcmsus-a.akamaihd.net/cms/page_media/S02042JXNHF81515718127993.png" />
        		</div>
        
        		<div class="PlayerHeader-info">
        			<div class="PlayerHandle PlayerHandle--stack-sm PlayerHandle--verticalCentered">
        				<img src="https://placehold.it/50x50" class="PlayerHandle-teamBadge PlayerHandle-teamBadge--sm PlayerHandle-teamBadge--alwaysVisible">
        				<h4 class="PlayerHandle-name">Player Name</h4>
        				<div class="PlayerHandle-handleWrapper">
        					<span class="PlayerHandle-handle">Player Handle</span>
        					<div class="PlayerHandle-badgeGroup">
        						<span class="PlayerHandle-badge PlayerHandle-badge">
                                    <svg class="Icon" xmlns="http://www.w3.org/2000/svg">
                                        <use xlink:href="#role_offense"/>
                                    </svg>
                                </span>
        					</div>
        				</div>
        			</div>
        
        			<div class="PlayerHeader-social">
        				<div class="PlayerHeader-socialItem">
        					<ul class="SocialList">
        						<li class="SocialList-item">
        							<a href="javascript:void(0)">
                                        <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>
                                    </a>
        						</li>
        						<li class="SocialList-item">
        							<a href="javascript:void(0)">
                                        <svg class="Icon" xmlns="http://www.w3.org/2000/svg">
                                            <use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#social-twitter"></use>
                                        </svg>
                                    </a>
        						</li>
        					</ul>
        				</div>
        				<div class="PlayerHeader-socialItem">
        					<svg class="Icon Icon--sm" xmlns="http://www.w3.org/2000/svg">
                                <use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#icon-home"></use>
                            </svg>
        					<h4 class="PlayerHeader-cor">Hometown</h4>
        				</div>
        			</div>
        		</div>
        	</div>
        	<div class="PlayerHeader-socialMobile" style="background-color: #ff3b74">
        		<div class="PlayerHeader-socialMobileItem">
        			<svg class="Icon Icon--sm" xmlns="http://www.w3.org/2000/svg">
                        <use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#icon-home"></use>
                    </svg>
        			<h4 class="PlayerHeader-cor">Hometown</h4>
        		</div>
        		<div class="PlayerHeader-socialMobileItem">
        			<ul class="SocialList">
        				<li class="SocialList-item">
        					<a href="javascript:void(0)">
                                <svg class="Icon Icon" xmlns="http://www.w3.org/2000/svg">
                                    <use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#social-twitch"></use>
                                </svg>
                            </a>
        				</li>
        				<li class="SocialList-item">
        					<a href="javascript:void(0)">
                                <svg class="Icon Icon" xmlns="http://www.w3.org/2000/svg">
                                    <use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#social-twitter"></use>
                                </svg>
                            </a>
        				</li>
        			</ul>
        		</div>
        	</div>
        </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>

Recent Matches

Displays a list of MatchResults in a Sidebar.

<div class="Sidebar">
        	<h1 class="Sidebar-title">
        		Recent Matches
        	</h1>
        	<ul class="Sidebar-list">
        		<li class="Sidebar-listItem">
        
        			<div class="MatchResult">
        				<span class="MatchResult-item">
                            <span class="MatchResult-vs">vs</span>
        				</span>
        
        				<span class="MatchResult-item">
                            <span class="MatchResult-teamIcon" style="background-color: rgba(51, 51, 51, 0.06)">
                                <svg xmlns="http://www.w3.org/2000/svg" class="Icon Icon--lg">
                                    <use xlink:href="#icon-team-fallback"></use>
                                </svg>
                            </span>
        				</span>
        
        				<span class="MatchResult-item MatchResult-item--expanded">
                            <h3 class="MatchResult-infoDate">01/01/1991</h3>
                            <h2 class="MatchResult-infoTeam">Team Name Here</h2>
                        </span>
        
        				<span class="MatchResult-item">
                            <span class="MatchStatus MatchStatus--small MatchStatus--win">
                                <span class="MatchStatus-status">win</span>
        				</span>
        				</span>
        			</div>
        
        		</li>
        
        		<li class="Sidebar-listItem">
        
        			<div class="MatchResult">
        				<span class="MatchResult-item">
                            <span class="MatchResult-vs">vs</span>
        				</span>
        
        				<span class="MatchResult-item">
                            <span class="MatchResult-teamIcon" style="background-color: rgba(51, 51, 51, 0.06)">
                                <svg xmlns="http://www.w3.org/2000/svg" class="Icon Icon--lg">
                                    <use xlink:href="#icon-team-fallback"></use>
                                </svg>
                            </span>
        				</span>
        
        				<span class="MatchResult-item MatchResult-item--expanded">
                            <h3 class="MatchResult-infoDate">01/01/1991</h3>
                            <h2 class="MatchResult-infoTeam">Team Name Here</h2>
                        </span>
        
        				<span class="MatchResult-item">
                            <span class="MatchStatus MatchStatus--small MatchStatus--loss">
                                <span class="MatchStatus-status">loss</span>
        				</span>
        				</span>
        			</div>
        
        		</li>
        	</ul>
        </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
 
1
Team 1 TM1
12 - 0
3 - 2
Last Match: 12/30/2018
2
A Longer Team Name TML
12 - 0
3 - 2
Last Match: 12/30/2018
3
Team 3 TM3
12 - 0
3 - 2
Last Match: 12/30/2018
Team
GR
MR
 
1
Another Long Team Name TML2
12 - 0
3 - 2
Last Match: 12/30/2018
2
Team 5 TM5
12 - 0
3 - 2
Last Match: 12/30/2018
3
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-ranking">1</div>
                			<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-ranking">2</div>
                			<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-ranking">3</div>
                			<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-ranking">1</div>
                			<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-ranking">2</div>
                			<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-ranking">3</div>
                			<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>

Standings Divider

Win Loss
1
7 1
Stage Playoffs Cutoff
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 class="Standings-divider-wrapper" colSpan="4">
                						<div class="Standings-divider">Stage Playoffs Cutoff</div>
                					</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>

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>

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>

Winner Announce

Displays a banner of the winning team

Region

Team Name

Team Details
Player Handle
Player Handle
Player Handle
Player Handle
Player Handle
Player Handle
Player Handle
Player Handle
Player Handle
Smaller Winner Announce
Region

Team Name

Team Details
Player Handle
Player Handle
Player Handle
Player Handle
Player Handle
Player Handle
Player Handle
Player Handle
Player Handle
Region

Team Name

Team Details
Player Handle
Player Handle
Player Handle
Player Handle
Player Handle
Player Handle
Player Handle
Player Handle
Player Handle
Region

Team Name

Team Details
Player Handle
Player Handle
Player Handle
Player Handle
Player Handle
Player Handle
Player Handle
Player Handle
Player Handle
Region

Team Name

Team Details
Player Handle
Player Handle
Player Handle
Player Handle
Player Handle
Player Handle
Player Handle
Player Handle
Player Handle
Region

Team Name

Team Details
Player Handle
Player Handle
Player Handle
Player Handle
Player Handle
Player Handle
Player Handle
Player Handle
Player Handle
Region

Team Name

Team Details
Player Handle
Player Handle
Player Handle
Player Handle
Player Handle
Player Handle
Player Handle
Player Handle
Player Handle
Region

Team Name

Team Details
Player Handle
Player Handle
Player Handle
Player Handle
Player Handle
Player Handle
Player Handle
Player Handle
Player Handle
<div class="Container">
        	<div class="WinnerAnnounce">
        		<div class="WinnerAnnounce-logo">
        			<img src="../assets/toolkit/images/static/team-badge-a.png" alt="" class="Logo">
        		</div>
        		<div class="WinnerAnnounce-content">
        			<div class="WinnerAnnounce-team">
        				<span class="WinnerAnnounce-teamRegion">Region</span>
        				<h2 class="WinnerAnnounce-teamTitle">Team Name</h2>
        				<a href="#" class="WinnerAnnounce-teamLink">
                            Team Details
                            <svg class="Icon Icon--xs">
                                <use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#icon-chevron-right"/>
                            </svg>
                        </a>
        				<div class="WinnerAnnounce-playerList TeamRoster-playerList">
        					<div class="PlayerHandle PlayerHandle--aligned TeamRoster-player">
        						<svg class="Icon Icon--sm 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>
        					</div>
        					<div class="PlayerHandle PlayerHandle--aligned TeamRoster-player">
        						<svg class="Icon Icon--sm 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>
        					</div>
        					<div class="PlayerHandle PlayerHandle--aligned TeamRoster-player">
        						<svg class="Icon Icon--sm 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>
        					</div>
        					<div class="PlayerHandle PlayerHandle--aligned TeamRoster-player">
        						<svg class="Icon Icon--sm 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>
        					</div>
        					<div class="PlayerHandle PlayerHandle--aligned TeamRoster-player">
        						<svg class="Icon Icon--sm 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>
        					</div>
        					<div class="PlayerHandle PlayerHandle--aligned TeamRoster-player">
        						<svg class="Icon Icon--sm 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>
        					</div>
        					<div class="PlayerHandle PlayerHandle--aligned TeamRoster-player">
        						<svg class="Icon Icon--sm 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>
        					</div>
        					<div class="PlayerHandle PlayerHandle--aligned TeamRoster-player">
        						<svg class="Icon Icon--sm 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>
        					</div>
        					<div class="PlayerHandle PlayerHandle--aligned TeamRoster-player">
        						<svg class="Icon Icon--sm 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>
        					</div>
        				</div>
        			</div>
        		</div>
        		<div class="WinnerAnnounce-photo">
        			<img src="https://d1u1mce87gyfbn.cloudfront.net/media/thumbnail/thumb-winter-wonderland.jpg" />
        		</div>
        	</div>
        </div>
        
        <h6>Smaller Winner Announce</h6>
        <div class="WinnerAnnounce-container">
        	<div class="WinnerAnnounce WinnerAnnounce--small">
        		<div class="WinnerAnnounce-logo">
        			<img src="/assets/toolkit/images/static/team-badge-a.png" alt="" class="Logo">
        		</div>
        		<div class="WinnerAnnounce-content">
        			<div class="WinnerAnnounce-team">
        				<span class="WinnerAnnounce-teamRegion">Region</span>
        				<h2 class="WinnerAnnounce-teamTitle">Team Name</h2>
        				<a href="#" class="WinnerAnnounce-teamLink">
                            Team Details
                            <svg class="Icon Icon--xs">
                                <use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#icon-chevron-right"/>
                            </svg>
                        </a>
        				<div class="WinnerAnnounce-playerList TeamRoster-playerList">
        					<div class="PlayerHandle PlayerHandle--aligned TeamRoster-player">
        						<svg class="Icon Icon--sm 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>
        					</div>
        					<div class="PlayerHandle PlayerHandle--aligned TeamRoster-player">
        						<svg class="Icon Icon--sm 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>
        					</div>
        					<div class="PlayerHandle PlayerHandle--aligned TeamRoster-player">
        						<svg class="Icon Icon--sm 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>
        					</div>
        					<div class="PlayerHandle PlayerHandle--aligned TeamRoster-player">
        						<svg class="Icon Icon--sm 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>
        					</div>
        					<div class="PlayerHandle PlayerHandle--aligned TeamRoster-player">
        						<svg class="Icon Icon--sm 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>
        					</div>
        					<div class="PlayerHandle PlayerHandle--aligned TeamRoster-player">
        						<svg class="Icon Icon--sm 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>
        					</div>
        					<div class="PlayerHandle PlayerHandle--aligned TeamRoster-player">
        						<svg class="Icon Icon--sm 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>
        					</div>
        					<div class="PlayerHandle PlayerHandle--aligned TeamRoster-player">
        						<svg class="Icon Icon--sm 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>
        					</div>
        					<div class="PlayerHandle PlayerHandle--aligned TeamRoster-player">
        						<svg class="Icon Icon--sm 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>
        					</div>
        				</div>
        			</div>
        		</div>
        		<div class="WinnerAnnounce-photo">
        			<img src="https://d1u1mce87gyfbn.cloudfront.net/media/thumbnail/thumb-winter-wonderland.jpg" />
        		</div>
        	</div>
        	<div class="WinnerAnnounce WinnerAnnounce--small">
        		<div class="WinnerAnnounce-logo">
        			<img src="/assets/toolkit/images/static/team-badge-a.png" alt="" class="Logo">
        		</div>
        		<div class="WinnerAnnounce-content">
        			<div class="WinnerAnnounce-team">
        				<span class="WinnerAnnounce-teamRegion">Region</span>
        				<h2 class="WinnerAnnounce-teamTitle">Team Name</h2>
        				<a href="#" class="WinnerAnnounce-teamLink">
                            Team Details
                            <svg class="Icon Icon--xs">
                                <use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#icon-chevron-right"/>
                            </svg>
                        </a>
        				<div class="WinnerAnnounce-playerList TeamRoster-playerList">
        					<div class="PlayerHandle PlayerHandle--aligned TeamRoster-player">
        						<svg class="Icon Icon--sm 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>
        					</div>
        					<div class="PlayerHandle PlayerHandle--aligned TeamRoster-player">
        						<svg class="Icon Icon--sm 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>
        					</div>
        					<div class="PlayerHandle PlayerHandle--aligned TeamRoster-player">
        						<svg class="Icon Icon--sm 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>
        					</div>
        					<div class="PlayerHandle PlayerHandle--aligned TeamRoster-player">
        						<svg class="Icon Icon--sm 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>
        					</div>
        					<div class="PlayerHandle PlayerHandle--aligned TeamRoster-player">
        						<svg class="Icon Icon--sm 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>
        					</div>
        					<div class="PlayerHandle PlayerHandle--aligned TeamRoster-player">
        						<svg class="Icon Icon--sm 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>
        					</div>
        					<div class="PlayerHandle PlayerHandle--aligned TeamRoster-player">
        						<svg class="Icon Icon--sm 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>
        					</div>
        					<div class="PlayerHandle PlayerHandle--aligned TeamRoster-player">
        						<svg class="Icon Icon--sm 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>
        					</div>
        					<div class="PlayerHandle PlayerHandle--aligned TeamRoster-player">
        						<svg class="Icon Icon--sm 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>
        					</div>
        				</div>
        			</div>
        		</div>
        		<div class="WinnerAnnounce-photo">
        			<img src="https://d1u1mce87gyfbn.cloudfront.net/media/thumbnail/thumb-winter-wonderland.jpg" />
        		</div>
        	</div>
        	<div class="WinnerAnnounce WinnerAnnounce--small">
        		<div class="WinnerAnnounce-logo">
        			<img src="/assets/toolkit/images/static/team-badge-a.png" alt="" class="Logo">
        		</div>
        		<div class="WinnerAnnounce-content">
        			<div class="WinnerAnnounce-team">
        				<span class="WinnerAnnounce-teamRegion">Region</span>
        				<h2 class="WinnerAnnounce-teamTitle">Team Name</h2>
        				<a href="#" class="WinnerAnnounce-teamLink">
                            Team Details
                            <svg class="Icon Icon--xs">
                                <use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#icon-chevron-right"/>
                            </svg>
                        </a>
        				<div class="WinnerAnnounce-playerList TeamRoster-playerList">
        					<div class="PlayerHandle PlayerHandle--aligned TeamRoster-player">
        						<svg class="Icon Icon--sm 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>
        					</div>
        					<div class="PlayerHandle PlayerHandle--aligned TeamRoster-player">
        						<svg class="Icon Icon--sm 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>
        					</div>
        					<div class="PlayerHandle PlayerHandle--aligned TeamRoster-player">
        						<svg class="Icon Icon--sm 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>
        					</div>
        					<div class="PlayerHandle PlayerHandle--aligned TeamRoster-player">
        						<svg class="Icon Icon--sm 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>
        					</div>
        					<div class="PlayerHandle PlayerHandle--aligned TeamRoster-player">
        						<svg class="Icon Icon--sm 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>
        					</div>
        					<div class="PlayerHandle PlayerHandle--aligned TeamRoster-player">
        						<svg class="Icon Icon--sm 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>
        					</div>
        					<div class="PlayerHandle PlayerHandle--aligned TeamRoster-player">
        						<svg class="Icon Icon--sm 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>
        					</div>
        					<div class="PlayerHandle PlayerHandle--aligned TeamRoster-player">
        						<svg class="Icon Icon--sm 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>
        					</div>
        					<div class="PlayerHandle PlayerHandle--aligned TeamRoster-player">
        						<svg class="Icon Icon--sm 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>
        					</div>
        				</div>
        			</div>
        		</div>
        		<div class="WinnerAnnounce-photo">
        			<img src="https://d1u1mce87gyfbn.cloudfront.net/media/thumbnail/thumb-winter-wonderland.jpg" />
        		</div>
        	</div>
        	<div class="WinnerAnnounce WinnerAnnounce--small">
        		<div class="WinnerAnnounce-logo">
        			<img src="/assets/toolkit/images/static/team-badge-a.png" alt="" class="Logo">
        		</div>
        		<div class="WinnerAnnounce-content">
        			<div class="WinnerAnnounce-team">
        				<span class="WinnerAnnounce-teamRegion">Region</span>
        				<h2 class="WinnerAnnounce-teamTitle">Team Name</h2>
        				<a href="#" class="WinnerAnnounce-teamLink">
                            Team Details
                            <svg class="Icon Icon--xs">
                                <use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#icon-chevron-right"/>
                            </svg>
                        </a>
        				<div class="WinnerAnnounce-playerList TeamRoster-playerList">
        					<div class="PlayerHandle PlayerHandle--aligned TeamRoster-player">
        						<svg class="Icon Icon--sm 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>
        					</div>
        					<div class="PlayerHandle PlayerHandle--aligned TeamRoster-player">
        						<svg class="Icon Icon--sm 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>
        					</div>
        					<div class="PlayerHandle PlayerHandle--aligned TeamRoster-player">
        						<svg class="Icon Icon--sm 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>
        					</div>
        					<div class="PlayerHandle PlayerHandle--aligned TeamRoster-player">
        						<svg class="Icon Icon--sm 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>
        					</div>
        					<div class="PlayerHandle PlayerHandle--aligned TeamRoster-player">
        						<svg class="Icon Icon--sm 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>
        					</div>
        					<div class="PlayerHandle PlayerHandle--aligned TeamRoster-player">
        						<svg class="Icon Icon--sm 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>
        					</div>
        					<div class="PlayerHandle PlayerHandle--aligned TeamRoster-player">
        						<svg class="Icon Icon--sm 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>
        					</div>
        					<div class="PlayerHandle PlayerHandle--aligned TeamRoster-player">
        						<svg class="Icon Icon--sm 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>
        					</div>
        					<div class="PlayerHandle PlayerHandle--aligned TeamRoster-player">
        						<svg class="Icon Icon--sm 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>
        					</div>
        				</div>
        			</div>
        		</div>
        		<div class="WinnerAnnounce-photo">
        			<img src="https://d1u1mce87gyfbn.cloudfront.net/media/thumbnail/thumb-winter-wonderland.jpg" />
        		</div>
        	</div>
        	<div class="WinnerAnnounce WinnerAnnounce--small">
        		<div class="WinnerAnnounce-logo">
        			<img src="/assets/toolkit/images/static/team-badge-a.png" alt="" class="Logo">
        		</div>
        		<div class="WinnerAnnounce-content">
        			<div class="WinnerAnnounce-team">
        				<span class="WinnerAnnounce-teamRegion">Region</span>
        				<h2 class="WinnerAnnounce-teamTitle">Team Name</h2>
        				<a href="#" class="WinnerAnnounce-teamLink">
                            Team Details
                            <svg class="Icon Icon--xs">
                                <use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#icon-chevron-right"/>
                            </svg>
                        </a>
        				<div class="WinnerAnnounce-playerList TeamRoster-playerList">
        					<div class="PlayerHandle PlayerHandle--aligned TeamRoster-player">
        						<svg class="Icon Icon--sm 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>
        					</div>
        					<div class="PlayerHandle PlayerHandle--aligned TeamRoster-player">
        						<svg class="Icon Icon--sm 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>
        					</div>
        					<div class="PlayerHandle PlayerHandle--aligned TeamRoster-player">
        						<svg class="Icon Icon--sm 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>
        					</div>
        					<div class="PlayerHandle PlayerHandle--aligned TeamRoster-player">
        						<svg class="Icon Icon--sm 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>
        					</div>
        					<div class="PlayerHandle PlayerHandle--aligned TeamRoster-player">
        						<svg class="Icon Icon--sm 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>
        					</div>
        					<div class="PlayerHandle PlayerHandle--aligned TeamRoster-player">
        						<svg class="Icon Icon--sm 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>
        					</div>
        					<div class="PlayerHandle PlayerHandle--aligned TeamRoster-player">
        						<svg class="Icon Icon--sm 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>
        					</div>
        					<div class="PlayerHandle PlayerHandle--aligned TeamRoster-player">
        						<svg class="Icon Icon--sm 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>
        					</div>
        					<div class="PlayerHandle PlayerHandle--aligned TeamRoster-player">
        						<svg class="Icon Icon--sm 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>
        					</div>
        				</div>
        			</div>
        		</div>
        		<div class="WinnerAnnounce-photo">
        			<img src="https://d1u1mce87gyfbn.cloudfront.net/media/thumbnail/thumb-winter-wonderland.jpg" />
        		</div>
        	</div>
        	<div class="WinnerAnnounce WinnerAnnounce--small">
        		<div class="WinnerAnnounce-logo">
        			<img src="/assets/toolkit/images/static/team-badge-a.png" alt="" class="Logo">
        		</div>
        		<div class="WinnerAnnounce-content">
        			<div class="WinnerAnnounce-team">
        				<span class="WinnerAnnounce-teamRegion">Region</span>
        				<h2 class="WinnerAnnounce-teamTitle">Team Name</h2>
        				<a href="#" class="WinnerAnnounce-teamLink">
                            Team Details
                            <svg class="Icon Icon--xs">
                                <use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#icon-chevron-right"/>
                            </svg>
                        </a>
        				<div class="WinnerAnnounce-playerList TeamRoster-playerList">
        					<div class="PlayerHandle PlayerHandle--aligned TeamRoster-player">
        						<svg class="Icon Icon--sm 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>
        					</div>
        					<div class="PlayerHandle PlayerHandle--aligned TeamRoster-player">
        						<svg class="Icon Icon--sm 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>
        					</div>
        					<div class="PlayerHandle PlayerHandle--aligned TeamRoster-player">
        						<svg class="Icon Icon--sm 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>
        					</div>
        					<div class="PlayerHandle PlayerHandle--aligned TeamRoster-player">
        						<svg class="Icon Icon--sm 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>
        					</div>
        					<div class="PlayerHandle PlayerHandle--aligned TeamRoster-player">
        						<svg class="Icon Icon--sm 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>
        					</div>
        					<div class="PlayerHandle PlayerHandle--aligned TeamRoster-player">
        						<svg class="Icon Icon--sm 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>
        					</div>
        					<div class="PlayerHandle PlayerHandle--aligned TeamRoster-player">
        						<svg class="Icon Icon--sm 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>
        					</div>
        					<div class="PlayerHandle PlayerHandle--aligned TeamRoster-player">
        						<svg class="Icon Icon--sm 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>
        					</div>
        					<div class="PlayerHandle PlayerHandle--aligned TeamRoster-player">
        						<svg class="Icon Icon--sm 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>
        					</div>
        				</div>
        			</div>
        		</div>
        		<div class="WinnerAnnounce-photo">
        			<img src="https://d1u1mce87gyfbn.cloudfront.net/media/thumbnail/thumb-winter-wonderland.jpg" />
        		</div>
        	</div>
        	<div class="WinnerAnnounce WinnerAnnounce--small">
        		<div class="WinnerAnnounce-logo">
        			<img src="/assets/toolkit/images/static/team-badge-a.png" alt="" class="Logo">
        		</div>
        		<div class="WinnerAnnounce-content">
        			<div class="WinnerAnnounce-team">
        				<span class="WinnerAnnounce-teamRegion">Region</span>
        				<h2 class="WinnerAnnounce-teamTitle">Team Name</h2>
        				<a href="#" class="WinnerAnnounce-teamLink">
                            Team Details
                            <svg class="Icon Icon--xs">
                                <use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#icon-chevron-right"/>
                            </svg>
                        </a>
        				<div class="WinnerAnnounce-playerList TeamRoster-playerList">
        					<div class="PlayerHandle PlayerHandle--aligned TeamRoster-player">
        						<svg class="Icon Icon--sm 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>
        					</div>
        					<div class="PlayerHandle PlayerHandle--aligned TeamRoster-player">
        						<svg class="Icon Icon--sm 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>
        					</div>
        					<div class="PlayerHandle PlayerHandle--aligned TeamRoster-player">
        						<svg class="Icon Icon--sm 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>
        					</div>
        					<div class="PlayerHandle PlayerHandle--aligned TeamRoster-player">
        						<svg class="Icon Icon--sm 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>
        					</div>
        					<div class="PlayerHandle PlayerHandle--aligned TeamRoster-player">
        						<svg class="Icon Icon--sm 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>
        					</div>
        					<div class="PlayerHandle PlayerHandle--aligned TeamRoster-player">
        						<svg class="Icon Icon--sm 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>
        					</div>
        					<div class="PlayerHandle PlayerHandle--aligned TeamRoster-player">
        						<svg class="Icon Icon--sm 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>
        					</div>
        					<div class="PlayerHandle PlayerHandle--aligned TeamRoster-player">
        						<svg class="Icon Icon--sm 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>
        					</div>
        					<div class="PlayerHandle PlayerHandle--aligned TeamRoster-player">
        						<svg class="Icon Icon--sm 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>
        					</div>
        				</div>
        			</div>
        		</div>
        		<div class="WinnerAnnounce-photo">
        			<img src="https://d1u1mce87gyfbn.cloudfront.net/media/thumbnail/thumb-winter-wonderland.jpg" />
        		</div>
        	</div>
        </div>