Organisms



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>

Mobile Menu

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

Unused due to global navbar

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

Primary Navigation

Primary navigation component. Normally set to position: fixed.

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

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

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

Timeline

Timeline

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

Example

Default Timeline

Example

Timeline!

First Item

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

Second Item

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

Third Item

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

Fourth Item

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

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

Video Playlist

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

File locations:

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

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