Global News Style Guide

c-link--large

Large style

c-link--xlarge

Extra large style

c-link--dark

Dark bkg version

10:00 AM - 1:00 PM | CJOB0

<a class="c-link [modifier class]" href="/toronto/">
	<span class="c-link__label">More Local Stories</span>
	<span class="c-link__icon"></span>
</a>

Source: assets/src/css/5-components/_c-list.scss, line 1

5.37 List

Bullet point list with accent red bullets

Example

Suspect is in custody
Victim is in hospital in stable condition
Prime Minister to make statement shortly

<ul class="c-list">
<li class="c-list__item">Suspect is in custody</li>
<li class="c-list__item">Victim is in hospital in stable condition</li>
<li class="c-list__item">Prime Minister to make statement shortly</li>
</ul>

Source: assets/src/css/5-components/_c-listenLive.scss, line 1

5.38 Listen Live

Listen live is found in the sidebar Displays on tablet, desktop and mobile

Example

► LISTEN LIVE

Geoff Currier

<div class="c-listenLive">
 <a class="c-listenLive__link" href="#">
   <img class="c-listenLive__image" width="80" height="80" src="https://shawglobalnews.files.wordpress.com/2017/12/680cjob_tile.png?w=80&h=80&crop=1">
   <div class="c-listenLive__info">
      <div class="c-listenLive__play">
         <span class="c-listenLive__play__icon">►</span>
         <span class="c-listenLive__play__text">LISTEN LIVE</span>
      </div>
      <h3 class="c-listenLive__title">Geoff Currier</h3>
      <div class="c-listenLive__time">10:00 AM - 1:00 PM | CJOB0</div>
  </div>
</a>
</div>

Source: assets/src/css/5-components/_c-loader.scss, line 1

5.39 Loader

Displays a spinning icon indicating loading state

Examples

Default styling

.c-loader--dark

dark loading animation to display against a light background

<div class="c-loader [modifier class]">
</div>

Source: assets/src/css/5-components/_c-logo--black.scss, line 6

5.40 Global News Logo

Display the mobile / tablet-portrait logo as an image. In tablet-landscape / desktop override with bigger logo via CSS.

Example

<a class="c-logo" href="#">
  <img class="c-logo__image" src="../assets/dist/images/logo-mobile.svg" alt="" />
</a>

Source: assets/src/css/5-components/_c-logo--header.scss, line 6

5.40 Global News Logo

Display the mobile / tablet-portrait logo as an image. In tablet-landscape / desktop override with bigger logo via CSS.

Example

<a class="c-logo" href="#">
  <img class="c-logo__image" src="../assets/dist/images/logo-mobile.svg" alt="" />
</a>

Source: assets/src/css/5-components/_c-logo.scss, line 1

5.40 Global News Logo

Display the mobile / tablet-portrait logo as an image. In tablet-landscape / desktop override with bigger logo via CSS.

Example

<a class="c-logo" href="#">
  <img class="c-logo__image" src="../assets/dist/images/logo-mobile.svg" alt="" />
</a>

Source: assets/src/css/5-components/_c-logoCorus.scss, line 1

5.41 Logo - Corus

Display in site corus footer.

Example

<a class="c-logoCorus" href="#">
  <img class="c-logoCorus__image" src="../assets/dist/images/logo-corus.svg" alt="" />
</a>

Source: assets/src/css/5-components/_c-logo--shortHeader.scss, line 6

5.42 This logo appears on short header on custom templates. Initially shows white GlobalNews logo When menu opens, black GloablNews logo is shown for contrast

Example

@todo: markup

@todo: markup

Source: assets/src/css/5-components/longform/blockquote.scss, line 5

5.43 Longform Blockquote

Blockquote Text

Example

markup:

markup:

Source: assets/src/css/5-components/longform/tweet-button.scss, line 1

5.44 Longform Tweet Button

Tweet button on longform template, with a class applied to to blockquote component

Example

Tweet This

<blockquote class="c-longform-tweet-button" >
	<div>
		<div class="c-longform-tweet-button__buttonContainer">
			<a href="" target="_blank" title="Tweet This"
				class="c-longform-tweet-button__button"
				data-trackable="true"
				data-trackaction="social share | quote"
				data-trackdata="{'content.share':'quote'}">
				<svg class="c-social__icon c-social__icon--twitter c-icon c-longform-tweet-button__icon" focusable="false">
					<use xlink:href="" />
				</svg>
				<span class="c-longform-tweet-button__buttonLabel">Tweet This</span>
			</a>
		</div>
	</div>
</blockquote>

Source: assets/src/css/5-components/_c-nav.scss, line 1

5.45 Navigation

Source: assets/src/css/5-components/_c-nav--subnav.scss, line 6

5.45.1 Subnav is used on regional homepages. Used together with c-nav and c-nav--main On 'tablet-portrait' or larger its styled like main nav, minus z-index and sticky behavior On smaller screens it turns into a dropdown-style-menu

Source: assets/src/css/5-components/_c-nav--main.scss, line 6

5.45.2 Main Navigation

Main topics navigation found on the desktop / tablet navigation bar.

Example

<ul class="c-nav c-nav--main">
	<li class="c-nav__item">
		<a href="#" class="c-nav__link">World</a>
	</li>
	<li class="c-nav__item">
		<a href="#" class="c-nav__link">Canada</a>
	</li>
	<li class="c-nav__item">
		<a href="#" class="c-nav__link">
			<div class="c-nav__local">
				Local <span class="c-nav__icon c-nav__icon--chevronDown"></span>
			</div>
		</a>
	</li>
	<li class="c-nav__item">
		<a href="#" class="c-nav__link">Politics</a>
	</li>
	<li class="c-nav__item">
		<a href="#" class="c-nav__link">Business</a>
	</li>
</ul>

Source: assets/src/css/5-components/_c-nav--buttons.scss, line 6

5.45.3 Navigation Buttons

Line up a series of SVG buttons with optional text. Currently used in the mobile sticky navigation.

Example

<nav class="c-nav c-nav--buttons">
	<button class="c-nav__item">
		<svg class="c-nav__icon c-nav__icon--latest c-icon">
			<use xlink:href="../assets/dist/icons/out/symbol/svg/sprite.symbol.svg#latest" />
		</svg>
		<div class="c-nav__label">Latest</div>
	</button>
	<button class="c-nav__item">
		<svg class="c-nav__icon c-nav__icon--trending c-icon">
			<use xlink:href="../assets/dist/icons/out/symbol/svg/sprite.symbol.svg#trending" />
		</svg>
		<div class="c-nav__label">Trending</div>
	</button>
	<button class="c-nav__item">
		<svg class="c-nav__icon c-nav__icon--watch c-icon">
			<use xlink:href="../assets/dist/icons/out/symbol/svg/sprite.symbol.svg#watch" />
		</svg>
		<div class="c-nav__label">Watch</div>
	</button>
	<button class="c-nav__item">
		<svg class="c-nav__icon c-nav__icon--local c-icon">
			<use xlink:href="../assets/dist/icons/out/symbol/svg/sprite.symbol.svg#local" />
		</svg>
		<div class="c-nav__label">Local</div>
	</button>
	<button class="c-nav__item">
		<svg class="c-nav__icon c-nav__icon--menu c-icon">
			<use xlink:href="../assets/dist/icons/out/symbol/svg/sprite.symbol.svg#menu-blue" />
		</svg>
		<div class="c-nav__label">Menu</div>
	</button>
</nav>

Source: assets/src/css/5-components/_c-nav--dropdown.scss, line 6

5.45.4 Dropdown Navigation

Navigation pattern found in dropdown submenus

Examples

Default styling

Links

.c-nav--dropdown--topics

A 2 column list of links

Links

.c-nav--dropdown--generic

A 1 column list of links

Links

<h3 class="c-heading c-heading--secondary">Links</h3>
<ul class="c-nav c-nav--dropdown [modifier class]">
	<li class="c-nav__item">
		<a href="#" class="c-nav__link">World</a>
	</li>
	<li class="c-nav__item">
		<a href="#" class="c-nav__link">Canada</a>
	</li>
	<li class="c-nav__item">
		<a href="#" class="c-nav__link">Lethbridge</a>
	</li>
	<li class="c-nav__item">
		<a href="#" class="c-nav__link">Politics</a>
	</li>
	<li class="c-nav__item">
		<a href="#" class="c-nav__link">Business</a>
	</li>
	<li class="c-nav__item">
		<a href="#" class="c-nav__link">Health</a>
	</li>
</ul>

Source: assets/src/css/5-components/_c-nav--footer.scss, line 6

5.45.5 Footer Navigation

Footer navigation found in footer above the copyright. It uses same styling at 'c-nav--main' with few extra styles outlined in 'c-nav--footer'

Example

<ul class="c-nav c-nav--main c-nav--footer">
	<li class="c-nav__item">
		<a href="#" class="c-nav__link">About</a>
	</li>
	<li class="c-nav__item">
		<a href="#" class="c-nav__link">Principles & Practices</a>
	</li>
	<li class="c-nav__item">
		<a href="#" class="c-nav__link">Branded Content</a>
	</li>
	<li class="c-nav__item">
		<a href="#" class="c-nav__link">Contact Us</a>
	</li>
	<li class="c-nav__item">
		<a href="#" class="c-nav__link">RSS</a>
	</li>
</ul>

Source: assets/src/css/5-components/_c-nav--corus.scss, line 6

5.45.6 Corus Footer Navigation

Corus navigation found at the bottom of the footer

Example

<ul class="c-nav c-nav--corus">
	<li class="c-nav__item">
		<a href="#" class="c-nav__link">Privacy Policy</a>
	</li>
	<li class="c-nav__item">
		<a href="#" class="c-nav__link">Copyright</a>
	</li>
	<li class="c-nav__item">
		<a href="#" class="c-nav__link">Terms of Use</a>
	</li>
	<li class="c-nav__item">
		<a href="#" class="c-nav__link">Advertise</a>
	</li>
	<li class="c-nav__item">
		<a href="#" class="c-nav__link">Corus Entertainment</a>
	</li>
</ul>

Source: assets/src/css/5-components/_c-newsletterSignup.scss, line 1

5.46 Newsletter Sign Up

In-article newsletter sign up widget.

Example

Stay in the loop

Get a roundtrip of the most important and intriguing stories from Lethbridge, delivered to your inbox ever weekday.

<div class="c-newsletterSignup">
	<img class="c-newsletterSignup__image c-newsletterSignup__image--desktop" width="170" height="225" loading="lazy" data-src="https://s2.wp.com/wp-content/themes/shaw-globalnews/images/skyline/winnipeg.jpg" alt="lethbridge skyline" data-always-observe="true" src="https://s2.wp.com/wp-content/themes/shaw-globalnews/images/skyline/winnipeg.jpg">
	<img class="c-newsletterSignup__image c-newsletterSignup__image--mobile" width="382" height="150" loading="lazy" data-src="https://s2.wp.com/wp-content/themes/shaw-globalnews/images/skyline/mobile/winnipeg.jpg" alt="lethbridge skyline" data-always-observe="true" src="https://s2.wp.com/wp-content/themes/shaw-globalnews/images/skyline/mobile/winnipeg.jpg">
	<div class="c-newsletterSignup__form">
		<div class="c-newsletterSignup__container c-newsletterSignup__container--column">
			<h3 class="c-newsletterSignup__title">Stay in the loop</h3>
			<p class="c-newsletterSignup__tagline">Get a roundtrip of the most important and intriguing stories from Lethbridge, delivered to your inbox ever weekday.</p>
		</div>
		<div class="c-newsletterSignup__container">
			<input type="text" class="c-newsletterSignup__input" placeholder="Email address">
			<button class="c-button c-newsletterSignup__signupButton">Sign Up</button>
		</div>
	</div>
</div>

Source: assets/src/css/5-components/_c-outbrain.scss, line 1

5.47 Outbrain

Outbrain sponsored stories are found below the article and above the newsletter signup. They will load dynamically once the user scrolls to the bottom of the post.

Example

5.48 Posts

A generic list of posts (e.g. most popular, related, latest)

Source: assets/src/css/5-components/_c-posts--articleTrending.scss, line 6

5.48.1 Trending posts layout on article pages

This style is used on article page sidebar. Used to override c-posts--mini c-posts--grid on certain breakpoints

Example

<ul class="c-posts c-posts--mini c-posts--grid c-posts--articleTrending">
	<li class="c-posts__item">
		<a href="#" class="c-posts__inner">
			<img src="//via.placeholder.com/256x144" class="c-posts__thumbnail" />
			<div class="c-posts__details">
				<div class="c-posts__headline">Meghan Markle gives birth to baby boy, palace confirms</div>
					<div class="c-posts__about">
					<div class="c-posts__info c-posts__time">February 8, 2019</div>
				<div class="c-posts__info c-posts--highlight">Canada</div>
			</div>
			</div>
		</a>
	</li>
	<li class="c-posts__item">
		<a href="#" class="c-posts__inner">
			<img src="//via.placeholder.com/256x144" class="c-posts__thumbnail" />
			<div class="c-posts__details">
				<div class="c-posts__headline">Rescue services called after Toronto resident found harding over 300 cats in apartment</div>
					<div class="c-posts__about">
					<div class="c-posts__info">February 28, 2019</div>
					<div class="c-posts__info c-posts--highlight">Global News</div>
				</div>
				</div>
		</div>
		</a>
	</li>
</ul>

Source: assets/src/css/5-components/_c-posts--column.scss, line 6

5.48.2 post lists in column view

Styles for displaying posts on latest pages Different styles are applied to skeleton placeholder

This class should be used together with .c-posts .c-posts--mini

Example

<ul class="c-posts c-posts--mini c-posts--column">
	<li class="c-posts__item">
		<a href="#" class="c-posts__inner">
         <div class="c-posts__media">
           <img src="http://via.placeholder.com/256x144" />
         </div>
			<div class="c-posts__details">
           <div>
				<div class="c-posts__headline">Meghan Markle gives birth to baby boy, palace confirms</div>
             <div class="c-posts__excerpt">Only top post has post excerpt</div>
           </div>
			</div>
		</a>
	</li>
	<li class="c-posts__item">
		<a href="#" class="c-posts__inner">
         <div class="c-posts__media">
           <img src="http://via.placeholder.com/256x144" />
         </div>
			<div class="c-posts__details">
           <div>
				<div class="c-posts__headline">Meghan Markle gives birth to baby boy, palace confirms</div>
             <div class="c-posts__excerpt">Only top post has post excerpt</div>
           </div>
			</div>
		</a>
	</li>
</ul>

Source: assets/src/css/5-components/_c-posts--grid.scss, line 6

5.48.3 Grid posts

A grid of posts presented as tiles

Example

<ul class="c-posts c-posts--grid">
	<li class="c-posts__item">
		<a href="#" class="c-posts__inner">
			<img src="//via.placeholder.com/256x144" class="c-posts__thumbnail" />
			<div class="c-posts__details">
				<div class="c-posts__headline">Meghan Markle gives birth to baby boy, palace confirms</div>
					<div class="c-posts__about">
					<div class="c-posts__info c-posts__time">February 8, 2019</div>
				<div class="c-posts__info c-posts--highlight">Canada</div>
			</div>
			</div>
		</a>
	</li>
	<li class="c-posts__item">
		<a href="#" class="c-posts__inner">
			<img src="//via.placeholder.com/256x144" class="c-posts__thumbnail" />
			<div class="c-posts__details">
				<div class="c-posts__headline">Rescue services called after Toronto resident found harding over 300 cats in apartment</div>
					<div class="c-posts__about">
					<div class="c-posts__info">February 28, 2019</div>
					<div class="c-posts__info c-posts--highlight">Global News</div>
				</div>
				</div>
		</div>
		</a>
	</li>
</ul>

Source: assets/src/css/5-components/_c-posts--gridFeatured.scss, line 6

5.48.4 Grid with featured post

A featured post, followed by rows of 3 posts, interspersed with ads. Currently used on trending / latest / tag and category pages.

This class should be used together with .c-posts .c-posts--tile .c-posts--grid

Example

<ul class="c-posts c-posts--tile c-posts--grid c-posts--gridFeatured">
	<li class="c-posts__item">
		<a href="#" class="c-posts__inner">
		<div class="c-posts_media">
			<img src="//via.placeholder.com/512x341" class="c-posts__thumbnail" />
		</div>
			<div class="c-posts__details">
				<div class="c-posts__headline">First Lady Melania Trump booed at youth summit on opioid awareness in Baltimore</div>
				<div class="c-posts__about">
				<div class="c-posts__info">Jul 8</div>
				<div class="c-posts__info c-posts__info--highlight">Politics</div>
			</div>
			<div class="c-posts__excerpt">Several youth booed First Lady Melania Trump as she took the stage at a summit on opioid awareness on Tuesday in Baltimore. Trump continued speaking despite the boos, calling addiction and drug abuse “universal issues.”</div>
		</div>
		</a>
	</li>
	<li class="c-posts__item">
		<a href="#" class="c-posts__inner">
		<div class="c-posts_media c-imageContainer c-imageContainer--fitWidth">
			<img src="//via.placeholder.com/295x227" class="c-posts__thumbnail c-imageContainer__image" />
		</div>
			<div class="c-posts__details">
				<div class="c-posts__headline">Rescue services called after Toronto resident found harding over 300 cats in apartment</div>
				<div class="c-posts__about">
				<div class="c-posts__info">Oct 7</div>
				<div class="c-posts__info c-posts__info--highlight">Toronto</div>
			</div>
		</div>
		</a>
	</li>
	<li class="c-posts__item">
		<a href="#" class="c-posts__inner">
		<div class="c-posts_media c-imageContainer c-imageContainer--fitWidth">
			<img src="//via.placeholder.com/295x227" class="c-posts__thumbnail c-imageContainer__image" />
		</div>
			<div class="c-posts__details">
				<div class="c-posts__headline">Lloydminster teen's social experiment shows power of a compliment</div>
				<div class="c-posts__about">
				<div class="c-posts__info">Nov 2</div>
				<div class="c-posts__info c-posts__info--highlight">Education</div>
			</div>
		</div>
		</a>
	</li>
	<li class="c-posts__item">
		<a href="#" class="c-posts__inner">
		<div class="c-posts_media c-imageContainer c-imageContainer--fitWidth">
			<img src="//via.placeholder.com/295x227" class="c-posts__thumbnail c-imageContainer__image" />
		</div>
			<div class="c-posts__details">
				<div class="c-posts__headline">Talks begin aimed at ending transit strike</div>
				<div class="c-posts__about">
				<div class="c-posts__info">Nov 2</div>
				<div class="c-posts__info c-posts__info--highlight">Labour</div>
			</div>
		</div>
		</a>
	</li>
</ul>

Source: assets/src/css/5-components/_c-posts--gridList.scss, line 6

5.48.5 Mini posts widget

More from Global News posts on top of the sidebar

Example

<ul class="c-posts c-posts--grid c-posts--gridList">
	<li class="c-posts__item">
		<a href="#" class="c-posts__inner">
			<img src="//via.placeholder.com/256x144" class="c-posts__thumbnail" />
			<div class="c-posts__details">
				<div class="c-posts__headline">Meghan Markle gives birth to baby boy, palace confirms</div>
			</div>
		</a>
	</li>
	<li class="c-posts__item">
		<a href="#" class="c-posts__inner">
			<img src="//via.placeholder.com/256x144" class="c-posts__thumbnail" />
			<div class="c-posts__details">
				<div class="c-posts__headline">Rescue services called after Toronto resident found harding over 300 cats in apartment</div>
			</div>
		</a>
	</li>
</ul>

Source: assets/src/css/5-components/_c-posts--gridMosaic.scss, line 6

5.48.6 Mosaic posts

Mosaic presentation of post tiles

Example

<ul class="c-posts c-posts--gridMosaic">
	<li class="c-posts__item">
		<a href="#" class="c-posts__inner">
			<img src="//via.placeholder.com/256x144" class="c-posts__thumbnail" />
			<div class="c-posts__details">
				<div class="c-posts__headline">Meghan Markle gives birth to baby boy, palace confirms</div>
					<div class="c-posts__about">
					<div class="c-posts__info c-posts__time">February 8, 2019</div>
				<div class="c-posts__info">Canada</div>
			</div>
			</div>
		</a>
	</li>
	<li class="c-posts__item">
		<a href="#" class="c-posts__inner">
			<img src="//via.placeholder.com/256x144" class="c-posts__thumbnail" />
			<div class="c-posts__details">
				<div class="c-posts__headline">Rescue services called after Toronto resident found harding over 300 cats in apartment</div>
					<div class="c-posts__about">
					<div class="c-posts__info c-posts__time">February 28, 2019</div>
					<div class="c-posts__info">Global News</div>
				</div>
				</div>
		</div>
		</a>
	</li>
</ul>

Source: assets/src/css/5-components/_c-posts--gridRow.scss, line 6

5.48.7 A row of 4 posts

A row of 4 post tiles

Example

<ul class="c-posts c-posts--grid c-posts--gridRow">
	<li class="c-posts__item">
		<a href="#" class="c-posts__inner">
			<div class="c-posts__media ">
			<img src="//via.placeholder.com/256x144" class="c-posts__thumbnail">
		</div>
			<div class="c-posts__details">
				<div class="c-posts__headline">Meghan Markle gives birth to baby boy, palace confirms</div>
			<div class="c-posts__about">
				<div class="c-posts__info c-posts__time">February 8, 2019</div>
				<div class="c-posts__info">Canada</div>
			</div>
			</div>
		</a>
	</li>
	<li class="c-posts__item">
		<a href="#" class="c-posts__inner">
		<div class="c-posts__media ">
			<img src="//via.placeholder.com/256x144" class="c-posts__thumbnail">
		</div>
			<div class="c-posts__details">
				<div class="c-posts__headline">Rescue services called after Toronto resident found harding over 300 cats in apartment</div>
				<div class="c-posts__about">
				<div class="c-posts__info c-posts__time">February 28, 2019</div>
				<div class="c-posts__info">Global News</div>
			</div>
		</div>
		</a>
	</li>
	<li class="c-posts__item">
		<a href="#" class="c-posts__inner">
		<div class="c-posts__media ">
			<img src="//via.placeholder.com/256x144" class="c-posts__thumbnail">
		</div>
			<div class="c-posts__details">
				<div class="c-posts__headline">Doug Ford factor looms large in election as Liberals seize on premier’s tanking popularity</div>
				<div class="c-posts__about">
				<div class="c-posts__info c-posts__time">March 28, 2019</div>
				<div class="c-posts__info">Politics</div>
			</div>
		</div>
		</a>
	</li>
	<li class="c-posts__item">
		<a href="#" class="c-posts__inner">
		<div class="c-posts__media ">
			<img src="//via.placeholder.com/256x144" class="c-posts__thumbnail">
		</div>
			<div class="c-posts__details">
				<div class="c-posts__headline">These coastal First Nations want polluting countries to ditch coal for B.C. LNG</div>
				<div class="c-posts__about">
				<div class="c-posts__info c-posts__time">April 1, 2019</div>
				<div class="c-posts__info">Environment</div>
			</div>
		</div>
		</a>
	</li>
</ul>

Source: assets/src/css/5-components/_c-posts--gridWide.scss, line 6

5.48.8 A row of 3 posts

A row of 3 post tiles with a high mobile breakpoint

Example

<ul class="c-posts c-posts--grid c-posts--gridWide">
	<li class="c-posts__item">
		<a href="#" class="c-posts__inner">
			<div class="c-posts__media ">
			<img src="//via.placeholder.com/256x144" class="c-posts__thumbnail">
		</div>
			<div class="c-posts__details">
				<div class="c-posts__headline">Meghan Markle gives birth to baby boy, palace confirms</div>
			<div class="c-posts__about">
				<div class="c-posts__info c-posts__time">February 8, 2019</div>
				<div class="c-posts__info">Canada</div>
			</div>
			</div>
		</a>
	</li>
	<li class="c-posts__item">
		<a href="#" class="c-posts__inner">
		<div class="c-posts__media ">
			<img src="//via.placeholder.com/256x144" class="c-posts__thumbnail">
		</div>
			<div class="c-posts__details">
				<div class="c-posts__headline">Rescue services called after Toronto resident found harding over 300 cats in apartment</div>
				<div class="c-posts__about">
				<div class="c-posts__info c-posts__time">February 28, 2019</div>
				<div class="c-posts__info">Global News</div>
			</div>
		</div>
		</a>
	</li>
	<li class="c-posts__item">
		<a href="#" class="c-posts__inner">
		<div class="c-posts__media ">
			<img src="//via.placeholder.com/256x144" class="c-posts__thumbnail">
		</div>
			<div class="c-posts__details">
				<div class="c-posts__headline">Doug Ford factor looms large in election as Liberals seize on premier’s tanking popularity</div>
				<div class="c-posts__about">
				<div class="c-posts__info c-posts__time">March 28, 2019</div>
				<div class="c-posts__info">Politics</div>
			</div>
		</div>
		</a>
	</li>
	<li class="c-posts__item">
		<a href="#" class="c-posts__inner">
		<div class="c-posts__media ">
			<img src="//via.placeholder.com/256x144" class="c-posts__thumbnail">
		</div>
			<div class="c-posts__details">
				<div class="c-posts__headline">These coastal First Nations want polluting countries to ditch coal for B.C. LNG</div>
				<div class="c-posts__about">
				<div class="c-posts__info c-posts__time">April 1, 2019</div>
				<div class="c-posts__info">Environment</div>
			</div>
		</div>
		</a>
	</li>
</ul>

Source: assets/src/css/5-components/_c-posts--highlightFirst.scss, line 1

5.48.9 Flag to lint component variations @define c-posts

Flag to lint component variations @define c-posts

A post list with first item renders like a tile with image taking up full width

Source: assets/src/css/5-components/_c-posts--horizontal.scss, line 6

5.48.10 Horizontal posts layout

List of posts presented horizontally (e.g. for use in a carousel or drawer)

Example

<ul class="c-posts c-posts--horizontal">
	<li class="c-posts__item">
		<a href="#" title="Title 1" class="c-posts__inner">
			<div class="c-posts__media">
				<img src="//via.placeholder.com/236x157" width="236" height="157" class="c-posts__thumbnail">
			</div>
			<div class="c-posts__details">
				<div class="c-posts__headline">Title 1</div>
			</div>
		</a>
	</li>
	<li class="c-posts__item">
		<a href="#" title="Title 2" class="c-posts__inner">
			<div class="c-posts__media">
				<img src="//via.placeholder.com/236x157" width="236" height="157" class="c-posts__thumbnail">
				<div class="c-posts__icon">
					<svg class="c-posts__play c-icon">
						<use xlink:href="https://local.globalnews.ca/wp-content/themes/shaw-globalnews/assets/dist/icons/out/symbol/svg/sprite.symbol.svg?v=4kehfc9li#play_white"></use>
					</svg>
				</div>
			</div>
			<div class="c-posts__details">
				<div class="c-posts__headline">Title 2</div>
			</div>
		</a>
	</li>
	<li class="c-posts__item">
		<a href="#" title="Title 3" class="c-posts__inner">
			<div class="c-posts__media">
				<img src="//via.placeholder.com/236x157" width="236" height="157" class="c-posts__thumbnail">
				<div class="c-posts__icon">
					<svg class="c-posts__play c-icon">
						<use xlink:href="https://local.globalnews.ca/wp-content/themes/shaw-globalnews/assets/dist/icons/out/symbol/svg/sprite.symbol.svg?v=4kehfc9li#play_white"></use>
					</svg>
				</div>
			</div>
			<div class="c-posts__details">
				<div class="c-posts__headline">Title 3</div>
			</div>
		</a>
	</li>
</ul>

Source: assets/src/css/5-components/_c-posts--inline.scss, line 6

5.48.11 Posts widget inline within an article

Example

<ul class="c-posts c-posts--inline">
	<li class="c-posts__item">
		<a href="#" class="c-posts__inner">
			<img src="//via.placeholder.com/256x144" class="c-posts__thumbnail" />
			<div class="c-posts__details">
				<div class="c-posts__headline">Meghan Markle gives birth to baby boy, palace confirms</div>
					<div class="c-posts__about">
					<div class="c-posts__info c-posts__time">February 8, 2019</div>
				<div class="c-posts__info">Canada</div>
			</div>
			</div>
		</a>
	</li>
	<li class="c-posts__item">
		<a href="#" class="c-posts__inner">
			<img src="//via.placeholder.com/256x144" class="c-posts__thumbnail" />
			<div class="c-posts__details">
				<div class="c-posts__headline">Rescue services called after Toronto resident found harding over 300 cats in apartment</div>
					<div class="c-posts__about">
					<div class="c-posts__info c-posts__time">February 28, 2019</div>
					<div class="c-posts__info">Global News</div>
				</div>
				</div>
		</div>
		</a>
	</li>
</ul>

Source: assets/src/css/5-components/_c-posts--nav.scss, line 6

5.48.12 Navigation Trending Posts

Trending posts in navigation. Leverages c-posts--grid, but render four columns

Example

<ul class="c-posts c-posts--grid c-posts--nav">
	<li class="c-posts__item">
		<a href="#" class="c-posts__inner">
			<img src="//via.placeholder.com/256x144" class="c-posts__thumbnail">
			<div class="c-posts__details">
				<div class="c-posts__headline">Meghan Markle gives birth to baby boy, palace confirms</div>
				<div class="c-posts__trending">
					<svg class="c-posts__eye c-icon">
						<use xlink:href="https://globalnews.ca/wp-content/themes/shaw-globalnews/assets/dist/icons/out/sprites.svg#eye"></use>
					</svg>
					<span class="c-posts__views">10000 Reading</span>
				</div>
			</div>
		</a>
	</li>
	<li class="c-posts__item">
		<a href="#" class="c-posts__inner">
			<img src="//via.placeholder.com/256x144" class="c-posts__thumbnail">
			<div class="c-posts__details">
				<div class="c-posts__headline">Rescue services called after Toronto resident found harding over 300 cats in apartment</div>
				<div class="c-posts__trending">
					<svg class="c-posts__eye c-icon">
						<use xlink:href="https://globalnews.ca/wp-content/themes/shaw-globalnews/assets/dist/icons/out/sprites.svg#eye"></use>
					</svg>
					<span class="c-posts__views">8000 Reading</span>
				</div>
			</div>
		</a>
	</li>
	<li class="c-posts__item">
		<a href="#" class="c-posts__inner">
			<img src="//via.placeholder.com/256x144" class="c-posts__thumbnail">
			<div class="c-posts__details">
				<div class="c-posts__headline">Lenny Kravitz extends 2-year world tour, adds 3 Canadian dates</div>
				<div class="c-posts__trending">
					<svg class="c-posts__eye c-icon">
						<use xlink:href="https://globalnews.ca/wp-content/themes/shaw-globalnews/assets/dist/icons/out/sprites.svg#eye"></use>
					</svg>
					<span class="c-posts__views">6000 Reading</span>
				</div>
			</div>
		</a>
	</li>
	<li class="c-posts__item">
		<a href="#" class="c-posts__inner">
			<img src="//via.placeholder.com/256x144" class="c-posts__thumbnail">
			<div class="c-posts__details">
				<div class="c-posts__headline">Rock band Tool debuts new music for the first time in 13 years</div>
				<div class="c-posts__trending">
					<svg class="c-posts__eye c-icon">
						<use xlink:href="https://globalnews.ca/wp-content/themes/shaw-globalnews/assets/dist/icons/out/sprites.svg#eye"></use>
					</svg>
					<span class="c-posts__views">4000 Reading</span>
				</div>
			</div>
		</a>
	</li>
</ul>

Source: assets/src/css/5-components/_c-posts--numbered.scss, line 6

5.48.13 Mini posts widget

More from Global News posts on top of the sidebar

Example

<ul class="c-posts c-posts--numbered">
	<li class="c-posts__item">
		<a href="#" class="c-posts__inner">
			<img src="//via.placeholder.com/256x144" class="c-posts__thumbnail" />
			<div class="c-posts__details">
				<div class="c-posts__headline">Meghan Markle gives birth to baby boy, palace confirms</div>
			</div>
		</a>
	</li>
	<li class="c-posts__item">
		<a href="#" class="c-posts__inner">
			<img src="//via.placeholder.com/256x144" class="c-posts__thumbnail" />
			<div class="c-posts__details">
				<div class="c-posts__headline">Rescue services called after Toronto resident found harding over 300 cats in apartment</div>
			</div>
		</a>
	</li>
</ul>

Source: assets/src/css/5-components/_c-posts--overImage.scss, line 6

5.48.14 Text over image

List of posts where title and label appear over the post image. Used for carousels. Style only takes effect above the tablet-portrait breakpoint. This is because images are too small on mobile.

Example

<ul class="c-posts c-posts--overImage c-posts--horizontal">
	<li class="c-posts__item">
		<a href="#" class="c-posts__inner">
			<div class="c-posts__media ">
			<img src="//via.placeholder.com/508x338" class="c-posts__thumbnail">
		</div>
			<div class="c-posts__details">
				<div class="c-posts__headline">Meghan Markle gives birth to baby boy, palace confirms</div>
			<div class="c-posts__about">
				<div class="c-posts__info">February 8, 2019</div>
				<div class="c-posts__info c-posts__info--highlight">Canada</div>
			</div>
			</div>
		</a>
	</li>
	<li class="c-posts__item">
		<a href="#" class="c-posts__inner">
		<div class="c-posts__media ">
			<img src="//via.placeholder.com/508x338" class="c-posts__thumbnail">
		</div>
			<div class="c-posts__details">
				<div class="c-posts__headline">Rescue services called after Toronto resident found harding over 300 cats in apartment</div>
				<div class="c-posts__about">
				<div class="c-posts__info">February 28, 2019</div>
				<div class="c-posts__info c-posts__info--highlight">Global News</div>
			</div>
		</div>
		</a>
	</li>
	<li class="c-posts__item">
		<a href="#" class="c-posts__inner">
		<div class="c-posts__media ">
			<img src="//via.placeholder.com/508x338" class="c-posts__thumbnail">
		</div>
			<div class="c-posts__details">
				<div class="c-posts__headline">Doug Ford factor looms large in election as Liberals seize on premier’s tanking popularity</div>
				<div class="c-posts__about">
				<div class="c-posts__info">March 28, 2019</div>
				<div class="c-posts__info c-posts__info--highlight">Politics</div>
			</div>
		</div>
		</a>
	</li>
</ul>

Source: assets/src/css/5-components/_c-posts--overImageMobile.scss, line 6

5.48.15 Extends text over image styling to mobile view. Leverages Posts.OverImage

Example

<ul class="c-posts c-posts--overImage c-posts--overImageMobile c-posts--horizontal">
	<li class="c-posts__item">
		<a href="#" class="c-posts__inner">
			<div class="c-posts__media ">
			<img src="//via.placeholder.com/508x338" class="c-posts__thumbnail">
		</div>
			<div class="c-posts__details">
				<div class="c-posts__headline">Meghan Markle gives birth to baby boy, palace confirms</div>
				<div class="c-posts__about">
				<div class="c-posts__info">Author name</div>
			</div>
			</div>
		</a>
	</li>
	<li class="c-posts__item">
		<a href="#" class="c-posts__inner">
		<div class="c-posts__media ">
			<img src="//via.placeholder.com/508x338" class="c-posts__thumbnail">
		</div>
			<div class="c-posts__details">
				<div class="c-posts__headline">Rescue services called after Toronto resident found harding over 300 cats in apartment</div>
				<div class="c-posts__about">
				<div class="c-posts__info">Author name</div>
			</div>
		</div>
		</a>
	</li>
	<li class="c-posts__item">
		<a href="#" class="c-posts__inner">
		<div class="c-posts__media ">
			<img src="//via.placeholder.com/508x338" class="c-posts__thumbnail">
		</div>
			<div class="c-posts__details">
				<div class="c-posts__headline">Doug Ford factor looms large in election as Liberals seize on premier’s tanking popularity</div>
				<div class="c-posts__about">
				<div class="c-posts__info">Author name</div>
			</div>
		</div>
		</a>
	</li>
</ul>

Source: assets/src/css/5-components/_c-posts--skeleton.scss, line 6

5.48.16 Skeleton placeholder

Basic style for displaying skeleton placeholder

This class should be used together with .c-posts .c-posts--skeleton

Example

<ul class="c-posts c-posts--grid c-posts--streamRendered c-posts--tile">
	<li class="c-posts__item">
		<a href="#" class="c-posts__inner">
         <div class="c-posts__media">
           <img src="http://via.placeholder.com/256x144" />
         </div>
			<div class="c-posts__details">
				<div class="c-posts__headline">&nbsp;</div>
             <div class="c-posts__excerpt">&nbsp;</div>
			</div>
		</a>
	</li>
</ul>

Source: assets/src/css/5-components/_c-posts--text.scss, line 6

5.48.17 Text Only Post List

A list of posts with text only, no thumbnails

Examples

Default styling

c-posts--textVertical

Render a vertical list of posts

<ul class="c-posts c-posts--list c-posts--text [modifier class]">
	<li class="c-posts__item">
		<a href="#" class="c-posts__inner">
		<div class="c-posts__headline">Meghan Markle gives birth to baby boy, palace confirms</div>
			<div class="c-posts__details">
					<div class="c-posts__about">
					<div class="c-posts__info">Feb 8</div>
				<div class="c-posts__info c-posts__info--highlight">Canada</div>
			</div>
			</div>
		</a>
	</li>
	<li class="c-posts__item">
		<a href="#" class="c-posts__inner">
			<div class="c-posts__headline">Rescue services called after Toronto resident found harding over 300 cats in apartment</div>
			<div class="c-posts__details">
					<div class="c-posts__about">
					<div class="c-posts__info c-posts__time">Feb 28</div>
					<div class="c-posts__info c-posts__info--highlight">Housing</div>
				</div>
				</div>
		</div>
		</a>
	</li>
</ul>

Source: assets/src/css/5-components/_c-posts--textGrid.scss, line 6

5.48.18 Text Only Post List in grid layout

A list of posts with text only, no thumbnails

Examples

Default styling

c-posts--textGridMobile

only show grid view above mobile breakpoint, revert to vertical list on desktop

<ul class="c-posts c-posts--text c-posts--textGrid [modifier class]">
	<li class="c-posts__item">
		<a href="#" class="c-posts__inner">
		<div class="c-posts__headline">Meghan Markle gives birth to baby boy, palace confirms</div>
			<div class="c-posts__details">
					<div class="c-posts__about">
					<div class="c-posts__info">Feb 8</div>
				<div class="c-posts__info c-posts__info--highlight">Canada</div>
			</div>
			</div>
		</a>
	</li>
	<li class="c-posts__item">
		<a href="#" class="c-posts__inner">
			<div class="c-posts__headline">Rescue services called after Toronto resident found harding over 300 cats in apartment</div>
			<div class="c-posts__details">
					<div class="c-posts__about">
					<div class="c-posts__info c-posts__time">Feb 28</div>
					<div class="c-posts__info c-posts__info--highlight">Housing</div>
				</div>
				</div>
		</div>
		</a>
	</li>
</ul>

Source: assets/src/css/5-components/_c-posts--tile.scss, line 6

5.48.19 Tile posts widget

A list of posts in tile presentation

Example

<ul class="c-posts c-posts--tile">
	<li class="c-posts__item">
		<a href="#" class="c-posts__inner">
			<img src="//via.placeholder.com/256x144" class="c-posts__thumbnail" />
			<div class="c-posts__details">
				<div class="c-posts__headline">Meghan Markle gives birth to baby boy, palace confirms</div>
					<div class="c-posts__about">
					<div class="c-posts__info c-posts__time">February 8, 2019</div>
				<div class="c-posts__info">Canada</div>
			</div>
			</div>
		</a>
	</li>
	<li class="c-posts__item">
		<a href="#" class="c-posts__inner">
			<img src="//via.placeholder.com/256x144" class="c-posts__thumbnail" />
			<div class="c-posts__details">
				<div class="c-posts__headline">Rescue services called after Toronto resident found harding over 300 cats in apartment</div>
					<div class="c-posts__about">
					<div class="c-posts__info c-posts__time">February 28, 2019</div>
					<div class="c-posts__info">Global News</div>
				</div>
				</div>
		</div>
		</a>
	</li>
</ul>

Source: assets/src/css/5-components/_c-posts--tilePlayer.scss, line 6

5.48.20 Tile player posts

A slight modification of the c-posts--tile treatment to handle video player elements. This is used int the mobile version of the standalone (homepage) video carousel. Clicking on a featured image opens up a video player that expands to play in-stream.

Example

<ul class="l-videoCarousel__list c-posts c-posts--tile c-posts--tilePlayer c-posts--grid c-posts--video c-posts--inverted">
	<li class="c-posts__item">
		<div class="c-posts__inner">
			<a class="c-posts__media c-video">
				<div class="c-video__placeholder">
					<img src="//via.placeholder.com/236x133"
						width="236"
						height="133"
						class="c-posts__thumbnail c-video__image"
						loading="lazy" />
					<div class="c-posts__icon">
						<svg class="c-posts__play c-icon">
							<use xlink:href="../assets/dist/icons/out/symbol/svg/sprite.symbol.svg?v=fxk389pk6#play_white" />
						</svg>
					</div>
				</div>
			</a>
			<a href="#" class="c-posts__details">
					<div class="c-posts__about">
						<div class="c-posts__info c-posts__info--highlight">Entertainment</div>
					</div>
				<div class="c-posts__headline">Jon Stewart urges Congress to authorize 9/11 victims compensation fund</div>
			</a>
		</div>
	</li>
	<li class="c-posts__item">
		<div class="c-posts__inner">
			<a class="c-posts__media c-video">
            <div class="c-video__placeholder">
					<img src="//via.placeholder.com/236x133"
						width="236"
						height="133"
						class="c-posts__thumbnail c-video__image"
						loading="lazy" />
					<div class="c-posts__icon">
						<svg class="c-posts__play c-icon">
							<use xlink:href="../assets/dist/icons/out/symbol/svg/sprite.symbol.svg?v=fxk389pk6#play_white" />
						</svg>
					</div>
				</div>
			</a>
			<a href="#" class="c-posts__details">
					<div class="c-posts__about">
						<div class="c-posts__info c-posts__info--highlight">Money</div>
					</div>
				<div class="c-posts__headline">Possible property tax hike in Vancouver next year</div>
			</a>
		</div>
	</li>
	<li class="c-posts__item">
		<div class="c-posts__inner">
			<a class="c-posts__media c-video">
				<div class="c-video__placeholder">
					<img src="//via.placeholder.com/236x133"
						width="236"
						height="133"
						class="c-posts__thumbnail c-video__image"
						loading="lazy" />
					<div class="c-posts__icon">
						<svg class="c-posts__play c-icon">
							<use xlink:href="../assets/dist/icons/out/symbol/svg/sprite.symbol.svg?v=fxk389pk6#play_white" />
						</svg>
					</div>
				</div>
			</a>
			<a href="#" class="c-posts__details">
					<div class="c-posts__about">
						<div class="c-posts__info c-posts__info--highlight">Global News Morning Calgary</div>
					</div>
				<div class="c-posts__headline">Danielle Smith joins the conversation on Global News Morning Calgary</div>
			</a>
		</div>
	</li>
	<li class="c-posts__item">
		<div class="c-posts__inner">
			<a class="c-posts__media c-video">
				<div class="c-video__placeholder">
					<img src="//via.placeholder.com/236x133"
						width="236"
						height="133"
						class="c-posts__thumbnail c-video__image"
						loading="lazy" />
					<div class="c-posts__icon">
						<svg class="c-posts__play c-icon">
							<use xlink:href="../assets/dist/icons/out/symbol/svg/sprite.symbol.svg?v=fxk389pk6#play_white" />
						</svg>
					</div>
				</div>
			</a>
			<a href="#" class="c-posts__details">
					<div class="c-posts__about">
						<div class="c-posts__info c-posts__info--highlight">Global News Morning Calgary</div>
					</div>
				<div class="c-posts__headline">What perennials can be planted now</div>
			</a>
		</div>
	</li>
</ul>

Source: assets/src/css/5-components/_c-programHosts.scss, line 1

5.49 Program Host

Styling for [gnca_hosts_box] shortcode, mostly used on program meta pages

Example

<div class="c-programHosts">
  <div class="c-programHosts__host">
    <a href="" class="c-programHosts__hostLink">
      <div class="c-programHosts__hostImageContainer">
        <img width="110" height="110" src="" class="c-programHosts__hostImg" alt=""/>
      </div>
      <div>
        <div class="c-programHosts__hostName">Morning show host</div>
        <div class="c-programHosts__hostTitle">
          <span>Program host</span>
        </div>
      </div>
    </a>
  </div>
  <div class="c-programHosts__host">
    <a href="" class="c-programHosts__hostLink">
      <div class="c-programHosts__hostImageContainer">
        <img width="110" height="110" src="" class="c-programHosts__hostImg" alt=""/>
      </div>
      <div>
        <div class="c-programHosts__hostName">Morning show host</div>
        <div class="c-programHosts__hostTitle">
          <span>Program host</span>
        </div>
      </div>
    </a>
  </div>
</div>

Source: assets/src/css/5-components/_c-promoBanners.scss, line 1

5.50 Promo Banner

Displays a promo banner image

Example

<div class="c-promoBanners">
<a class="c-promoBanners__link" href="" title="Dog walk" target="_blank">
	<img class="c-promoBanners__image" src="https://local.globalnews.ca/wp-content/uploads/2019/08/promobanner.png" alt="Dog walk">
</a>
</div>

Source: assets/src/css/5-components/_c-pulse.scss, line 1

5.51 Live pulse animation

Can be added to any element in order to signify live updates or video.

Example

<div class="c-pulse"></div>

Source: assets/src/css/5-components/_c-quickLinks.scss, line 1

5.52 QuickLinks

Example

National
Toronto
BC
Saskatoon

<div class="c-quickLinks">
<ul class="c-quickLinks__list">
	<li class="c-quickLinks__item"><a class="c-quickLinks__link" href="#national">National</a></li>
	<li class="c-quickLinks__item"><a class="c-quickLinks__link" href="#toronto">Toronto</a></li>
	<li class="c-quickLinks__item"><a class="c-quickLinks__link" href="#bc">BC</a></li>
	<li class="c-quickLinks__item"><a class="c-quickLinks__link" href="#saksatoon">Saskatoon</a></li>
</ul>
</div>

Source: assets/src/css/5-components/_c-radioBanner.scss, line 1

5.53 Radio Banner

Radio banned is found above vide section in main content and in sidebar.

	<div class="c-radioBanner__social">
		<a href="" target="_blank" class="c-radioBanner__link c-radioBanner__link--social">
			<svg class="c-radioBanner__icon c-icon">
				<use xlink:href="../assets/dist/icons/out/symbol/svg/sprite.symbol.svg?v=sruolj77p#facebook_f"></use>
			</svg>
		</a>
		<a href="" target="_blank" class="c-radioBanner__link c-radioBanner__link--social">
			<svg class="c-radioBanner__icon c-icon">
				<use xlink:href="../assets/dist/icons/out/symbol/svg/sprite.symbol.svg?v=sruolj77p#twitter"></use>
			</svg>
		</a>
	</div>
</div>

Example

Kelly Kutrara

10:00 AM - 6:00 PM | 640 Toronto

<div class="c-radioBanner c-radioBanner--hasShowImage">
	<div class="u-hide-tablet-portrait c-radioBanner__header">
	<div class="c-radioBanner__headerInner">
		<div class="l-section__heading l-section__heading--noBorder c-heading c-heading--component">Radio</div>
		<a class="c-radioBanner__headerLogo c-logo" href="">
			<span class="sr-only">640 Toronto</span>
			<img class="c-logo__image" src="" alt="640 Toronto" />
		</a>
	</div>
	</div>
	<div class="c-radioBanner__container">
	<div class="c-radioBanner__inner">
		<div class="c-radioBanner__left">
			<div class="c-radioBanner__logo">
				<a class="c-logo" href="">
					<span class="sr-only">640 Toronto</span>
					<img class="c-logo__image" src="" alt="" />
				</a>
			</div>
			<div class="c-radioBanner__personality">
				<img class="c-radioBanner__personalityImage c-logo__image" src="" alt="" />
			</div>
			<div class="c-radioBanner__live">
				<a class="c-radioBanner__link c-radioBanner__play" href="" target="_blank">
					<div class="c-radioBanner__iconInner">
						<svg class="c-radioBanner__icon c-icon">
							<use xlink:href="../assets/dist/icons/out/symbol/svg/sprite.symbol.svg?v=sruolj77p#play_white"></use>
						</svg>
					</div>
				</a>
				<div class="c-radioBanner__liveText">
					<a href="">
						<div class="c-radioBanner__link c-radioBanner__playSmall">
							<svg class="c-radioBanner__icon c-icon">
								<use xlink:href="../assets/dist/icons/out/symbol/svg/sprite.symbol.svg?v=sruolj77p#play_white"></use>
							</svg>
						</div>
						Listen live
					</a>
					<div class="c-radioBanner__programContainer">
						<a href="" class="c-radioBanner__link--program">
							Kelly Kutrara
							</a>
					</div>
					<div class="c-listenLive__time">
						10:00 AM - 6:00 PM | 640 Toronto
						</div>
				</div>
			</div>
		</div>

Source: assets/src/css/5-components/_c-radioBanner--mini.scss, line 6

5.53.1 Mini radio banner

This is a smaller version of the radio banner, scaled down for placement in the site navigation

	<div class="c-radioBanner__social">
		<a href="" target="_blank" class="c-radioBanner__link c-radioBanner__link--social">
			<svg class="c-radioBanner__icon c-icon">
				<use xlink:href="../assets/dist/icons/out/symbol/svg/sprite.symbol.svg?v=sruolj77p#facebook_f"></use>
			</svg>
		</a>
		<a href="" target="_blank" class="c-radioBanner__link c-radioBanner__link--social">
			<svg class="c-radioBanner__icon c-icon">
				<use xlink:href="../assets/dist/icons/out/symbol/svg/sprite.symbol.svg?v=sruolj77p#twitter"></use>
			</svg>
		</a>
	</div>
</div>

Example

Kelly Kutrara

10:00 AM - 6:00 PM | 640 Toronto

<div class="c-radioBanner c-radioBanner--hasShowImage c-radioBanner--mini">
	<div class="u-hide-tablet-portrait c-radioBanner__header">
	<div class="c-radioBanner__headerInner">
		<div class="l-section__heading l-section__heading--noBorder c-heading c-heading--component">Radio</div>
		<a class="c-radioBanner__headerLogo c-logo" href="">
			<span class="sr-only">640 Toronto</span>
			<img class="c-logo__image" src="" alt="640 Toronto" />
		</a>
	</div>
	</div>
	<div class="c-radioBanner__container">
	<div class="c-radioBanner__inner">
		<div class="c-radioBanner__left">
			<div class="c-radioBanner__logo">
				<a class="c-logo" href="">
					<span class="sr-only">640 Toronto</span>
					<img class="c-logo__image" src="" alt="" />
				</a>
			</div>
			<div class="c-radioBanner__personality">
				<img class="c-radioBanner__personalityImage c-logo__image" src="" alt="" />
			</div>
			<div class="c-radioBanner__live">
				<a class="c-radioBanner__link c-radioBanner__play" href="" target="_blank">
					<div class="c-radioBanner__iconInner">
						<svg class="c-radioBanner__icon c-icon">
							<use xlink:href="../assets/dist/icons/out/symbol/svg/sprite.symbol.svg?v=sruolj77p#play_white"></use>
						</svg>
					</div>
				</a>
				<div class="c-radioBanner__liveText">
					<a href="">
						<div class="c-radioBanner__link c-radioBanner__playSmall">
							<svg class="c-radioBanner__icon c-icon">
								<use xlink:href="../assets/dist/icons/out/symbol/svg/sprite.symbol.svg?v=sruolj77p#play_white"></use>
							</svg>
						</div>
						Listen live
					</a>
					<div class="c-radioBanner__programContainer">
						<a href="" class="c-radioBanner__link--program">
							Kelly Kutrara
							</a>
					</div>
					<div class="c-listenLive__time">
						10:00 AM - 6:00 PM | 640 Toronto
						</div>
				</div>
			</div>
		</div>

Source: assets/src/css/5-components/_c-radioBanner--sticky.scss, line 6

5.53.2 Sticky Mini radio banner

This is a smaller version of the radio banner, scaled down for placement on mobile, leveraging styles from c-ardioBanner--mini

	<div class="c-radioBanner__social">
		<a href="" target="_blank" class="c-radioBanner__link c-radioBanner__link--social">
			<svg class="c-radioBanner__icon c-icon">
				<use xlink:href="../assets/dist/icons/out/symbol/svg/sprite.symbol.svg?v=sruolj77p#facebook_f"></use>
			</svg>
		</a>
		<a href="" target="_blank" class="c-radioBanner__link c-radioBanner__link--social">
			<svg class="c-radioBanner__icon c-icon">
				<use xlink:href="../assets/dist/icons/out/symbol/svg/sprite.symbol.svg?v=sruolj77p#twitter"></use>
			</svg>
		</a>
	</div>
</div>

Example

Kelly Kutrara

10:00 AM - 6:00 PM | 640 Toronto

<div class="c-radioBanner c-radioBanner--hasShowImage c-radioBanner--mini c-radioBanner--sticky">
	<div class="u-hide-tablet-portrait c-radioBanner__header">
	<div class="c-radioBanner__headerInner">
		<div class="l-section__heading l-section__heading--noBorder c-heading c-heading--component">Radio</div>
		<a class="c-radioBanner__headerLogo c-logo" href="">
			<span class="sr-only">640 Toronto</span>
			<img class="c-logo__image" src="" alt="640 Toronto" />
		</a>
	</div>
	</div>
	<div class="c-radioBanner__container">
	<div class="c-radioBanner__inner">
		<div class="c-radioBanner__left">
			<div class="c-radioBanner__logo">
				<a class="c-logo" href="">
					<span class="sr-only">640 Toronto</span>
					<img class="c-logo__image" src="" alt="" />
				</a>
			</div>
			<div class="c-radioBanner__personality">
				<img class="c-radioBanner__personalityImage c-logo__image" src="" alt="" />
			</div>
			<div class="c-radioBanner__live">
				<a class="c-radioBanner__link c-radioBanner__play" href="" target="_blank">
					<div class="c-radioBanner__iconInner">
						<svg class="c-radioBanner__icon c-icon">
							<use xlink:href="../assets/dist/icons/out/symbol/svg/sprite.symbol.svg?v=sruolj77p#play_white"></use>
						</svg>
					</div>
				</a>
				<div class="c-radioBanner__liveText">
					<a href="">
						<div class="c-radioBanner__link c-radioBanner__playSmall">
							<svg class="c-radioBanner__icon c-icon">
								<use xlink:href="../assets/dist/icons/out/symbol/svg/sprite.symbol.svg?v=sruolj77p#play_white"></use>
							</svg>
						</div>
						Listen live
					</a>
					<div class="c-radioBanner__programContainer">
						<a href="" class="c-radioBanner__link--program">
							Kelly Kutrara
							</a>
					</div>
					<div class="c-listenLive__time">
						10:00 AM - 6:00 PM | 640 Toronto
						</div>
				</div>
			</div>
		</div>

Source: assets/src/css/5-components/_c-radioBanner--wide.scss, line 6

5.53.3 Wide Radio Banner

Wide radio banned is found above video section in main content. It scaled sown to regular radio banner styling on mobile.

	<div class="c-radioBanner__social">
		<a href="" target="_blank" class="c-radioBanner__link c-radioBanner__link--social">
			<svg class="c-radioBanner__icon c-icon">
				<use xlink:href="../assets/dist/icons/out/symbol/svg/sprite.symbol.svg?v=sruolj77p#facebook_f"></use>
			</svg>
		</a>
		<a href="" target="_blank" class="c-radioBanner__link c-radioBanner__link--social">
			<svg class="c-radioBanner__icon c-icon">
				<use xlink:href="../assets/dist/icons/out/symbol/svg/sprite.symbol.svg?v=sruolj77p#twitter"></use>
			</svg>
		</a>
	</div>
</div>

Example

2:22 This is a video about some dogs

Kelly Kutrara

10:00 AM - 6:00 PM | 640 Toronto

<div class="c-radioBanner c-radioBanner--hasShowImage c-radioBanner--wide">
	<div class="u-hide-tablet-portrait c-radioBanner__header">
	<div class="c-radioBanner__headerInner">
		<div class="l-section__heading l-section__heading--noBorder c-heading c-heading--component">Radio</div>
		<a class="c-radioBanner__headerLogo c-logo" href="">
			<span class="sr-only">640 Toronto</span>
			<img class="c-logo__image" src="" alt="640 Toronto" />
		</a>
	</div>
	</div>
	<div class="c-radioBanner__container">
	<div class="c-radioBanner__inner">
		<div class="c-radioBanner__left">
			<div class="c-radioBanner__logo">
				<a class="c-logo" href="">
					<span class="sr-only">640 Toronto</span>
					<img class="c-logo__image" src="" alt="" />
				</a>
			</div>
			<div class="c-radioBanner__personality">
				<img class="c-radioBanner__personalityImage c-logo__image" src="" alt="" />
			</div>
			<div class="c-radioBanner__live">
				<a class="c-radioBanner__link c-radioBanner__play" href="" target="_blank">
					<div class="c-radioBanner__iconInner">
						<svg class="c-radioBanner__icon c-icon">
							<use xlink:href="../assets/dist/icons/out/symbol/svg/sprite.symbol.svg?v=sruolj77p#play_white"></use>
						</svg>
					</div>
				</a>
				<div class="c-radioBanner__liveText">
					<a href="">
						<div class="c-radioBanner__link c-radioBanner__playSmall">
							<svg class="c-radioBanner__icon c-icon">
								<use xlink:href="../assets/dist/icons/out/symbol/svg/sprite.symbol.svg?v=sruolj77p#play_white"></use>
							</svg>
						</div>
						Listen live
					</a>
					<div class="c-radioBanner__programContainer">
						<a href="" class="c-radioBanner__link--program">
							Kelly Kutrara
							</a>
					</div>
					<div class="c-listenLive__time">
						10:00 AM - 6:00 PM | 640 Toronto
						</div>
				</div>
			</div>
		</div>

Source: assets/src/css/5-components/_c-radioShows.scss, line 1

5.54 Radio shows playlist

Radio playlist widgets display on radio pages as grid or carousel Displays on tablet, desktop and mobile

Example

Radio show title

<ul class="c-radioShows c-posts ">
  <li class="c-radioShows__show c-posts__item">
    <div class="c-radioShows__container">
      <iframe src="" frameborder="0" width="100%" height="600"></iframe>
    </div>
    <div class="c-radioShows__title">
      <a href="" class="c-radioShows__titleLink">Radio show title</a>
    </div>
  </li>
</ul>

Source: assets/src/css/5-components/_c-readmore.scss, line 1

5.55 Read more

Example

	<div class="c-readmore">
	<span class="c-readmore__label">Read More:</span>
	<a class="c-readmore__link" href="#">Liberals’ pot amnesty would be easy for a new government to reverse, expert warns</a>
</div>

Source: assets/src/css/5-components/_c-readProgress.scss, line 1

5.56 Read Progress button Paired with 'Back To Top' functionality on click

Example

<nav class="c-readProgress" aria-label="Back to top navigation">
<button class="c-readProgress__button">
	<span class="sr-only">Click to scroll back to top of the page</span>
	<svg class="c-icon c-readProgress__arrowIcon">
		<use xlink:href="https://globalnews.ca/wp-content/themes/shaw-globalnews/assets/dist/icons/out/symbol/svg/sprite.symbol.svg?v=9l9l8qtcx#arrow_red"></use>
	</svg>
	<svg class="c-readProgress__circleSvg" width="64" height="64" xmlns="http://www.w3.org/2000/svg" focusable="false">
		<circle class="c-readProgress__circle" cx="32" cy="32" r="31" stroke-width="2" fill="none" fill-rule="evenodd"></circle>
	</svg>
</button>
</nav>

Source: assets/src/css/5-components/_c-regions.scss, line 1

5.57 Regions panel

Local region selection menu

Example

your local region

BC

<div class="c-regions">
	<div class="c-regions__heading">
		<div>
			<h4 class="c-heading c-heading--subhead">your local region</h4>
			<h3 class="c-heading c-heading--region">BC</h3>
		</div>
	</div>
	<div role="group" aria-label="Regions list">
	<ul class="c-nav c-nav--dropdown c-nav--dropdown--regionStandalone">
		<li class="c-nav__item"><a href="//local.globalnews.ca/bc/" class="c-nav__link c-regions__current">BC</a></li>
		<li class="c-nav__item"><a href="//local.globalnews.ca/calgary/" class="c-nav__link">Calgary</a></li>
		<li class="c-nav__item"><a href="//local.globalnews.ca/durham/" class="c-nav__link">Durham</a></li>
		<li class="c-nav__item"><a href="//local.globalnews.ca/edmonton/" class="c-nav__link">Edmonton</a></li>
		<li class="c-nav__item"><a href="//local.globalnews.ca/halifax/" class="c-nav__link">Halifax</a></li>
		<li class="c-nav__item"><a href="//local.globalnews.ca/hamilton/" class="c-nav__link">Hamilton</a></li>
		<li class="c-nav__item"><a href="//local.globalnews.ca/hamilton/" class="c-nav__link">Kingston</a></li>
		<li class="c-nav__item"><a href="//local.globalnews.ca/hamilton/" class="c-nav__link">Lethbridge</a></li>
	</ul>
	</div>
</div>

Source: assets/src/css/5-components/_c-responsiveContainer.scss, line 1

5.58 Responsive Iframe Container

Preserves iframe height/width ratio on resize

Examples

Default styling

.c-responsiveContainer--centered

Centers the embed element

.c-responsiveContainer--keepRatio

Keeps embedded iframe ratio on resize ( padding for responsive container is added directly in style tag )

.c-responsiveContainer--noMargin

Removes iframe margin on mobile so it takes up the full page width

<figure class="c-responsiveContainer [modifier class]">
 <iframe src="//datawrapper.dwcdn.net/kJhuq/3/" width="670" height="546" class="c-responsiveContainer__iframe" frameborder="0" border="0"></iframe>
</figure>

Source: assets/src/css/5-components/_c-responsiveContainer--longform.scss, line 1

5.59 Responsive Iframe Container for longform

Preserves iframe height/width ratio on resize

Examples

Default styling

.c-responsiveContainer--centered

Centers the embed element

.c-responsiveContainer--keepRatio

Keeps embedded iframe ratio on resize ( padding for responsive container is added directly in style tag )

.c-responsiveContainer--noMargin

Removes iframe margin on mobile so it takes up the full page width

<figure class="c-responsiveContainer c-responsiveContainer--longform [modifier class]">
 <iframe src="//datawrapper.dwcdn.net/kJhuq/3/" width="670" height="546" class="c-responsiveContainer__iframe" frameborder="0" border="0"></iframe>
</figure>

Source: assets/src/css/5-components/_c-schedule.scss, line 1

5.60 Schedule

Radio schedule

Example

<ul class="c-schedule c-schedule--horizontal">
	<li class="c-schedule__show c-schedule__show--current">
	<a href="" class="c-schedule__inner c-schedule__link">
		<div class="c-schedule__media">
			<img class="c-schedule__image" src="https://via.placeholder.com/200">
		</div>
		<svg class="c-schedule__timer" viewBox="0 0 112 112">
			<circle class="c-schedule__outline" cx="50%" cy="50%" r="46.5%" ></circle>
			<circle class="c-schedule__played" cx="50%" cy="50%" r="46.5%" style="--showPlayed:0.3"></circle>
		</svg>
		<div class="c-schedule__details">
			<span class="c-schedule__flag">Listen Live</span>
			<span class="c-schedule__name">Tasha Kheiriddin</span>
			<span class="c-schedule__time">12:00 PM - 2:00 PM</span>
		</div>
	</a>
</li>
	<li class="c-schedule__show c-schedule__show--flagged">
	<a href="" class="c-schedule__inner c-schedule__link">
		<div class="c-schedule__media">
			<img class="c-schedule__image" src="https://via.placeholder.com/200">
		</div>
		<div class="c-schedule__details">
			<span class="c-schedule__flag">Up Next</span>
			<span class="c-schedule__name">Tasha Kheiriddin</span>
			<span class="c-schedule__time">12:00 PM - 2:00 PM</span>
		</div>
	</a>
</li>
	<li class="c-schedule__show">
	<a href="" class="c-schedule__inner c-schedule__link">
		<div class="c-schedule__media">
			<img class="c-schedule__image" src="https://via.placeholder.com/200">
		</div>
		<div class="c-schedule__details">
			<span class="c-schedule__name">Tasha Kheiriddin</span>
			<span class="c-schedule__time">12:00 PM - 2:00 PM</span>
		</div>
	</a>
</li>
	<li class="c-schedule__show c-schedule__show--current">
	<a href="" class="c-schedule__inner c-schedule__link">
		<div class="c-schedule__media">
			<img class="c-schedule__image" src="https://via.placeholder.com/200">
		</div>
		<div class="c-schedule__details">
			<span class="c-schedule__name">Tasha Kheiriddin</span>
			<span class="c-schedule__time">12:00 PM - 2:00 PM</span>
		</div>
	</a>
</li>
</ul>

Source: assets/src/css/5-components/_c-search.scss, line 1

5.61 Search

Basic site search form

Example

<form class="c-search l-panel__search" method="get" action="/" role="search">
	<input class="c-search__input" type="text" autocomplete="off" name="s" placeholder="Search Global News" value="" />
	<button class="c-search__submit" type="submit">
		<span class="sr-only">Submit search</span>
		<svg class="c-search__icon c-icon">
			<use xlink:href="../assets/dist/icons/out/sprites.svg#search" />
		</svg>
	</button>
</form>

Source: assets/src/css/5-components/_c-sectionHeading--longform.scss, line 5

5.62 Section Heading

Section heading is added to article via [section-heading] shortcode

Section 1 heading

Source: assets/src/css/5-components/_c-sectionHeading.scss, line 5

5.62 Section Heading

Section heading is added to article via [section-heading] shortcode

Section 1 heading

Source: assets/src/css/5-components/_c-shimmer.scss, line 1

5.63 Shimmer

A Facebook style shimmer effect to apply to skeleton UI

Example

<div class="c-shimmer" style="width: 400px; height: 200px; background-color: #d7d7d7">&nbsp;</div>

Source: assets/src/css/5-components/_c-simpleVideo.scss, line 1

5.64 Simple Video

The Simple Video component is a chromeless jw video player with no controls. It can be used to display a tiny thumbnail video, such as a livestream within the live banner.

Source: assets/src/css/5-components/_c-snackbar.scss, line 1

5.65 Snackbar

A Material-UI inspired "snackbar" treatment

Example

Be the first to know, get your news faster. Install our new app now.

<div class="c-snackbar__inner">
	<div class="c-snackbar__text">Be the first to know, get your news faster. Install our new app now.</div>
	<div class="c-snackbar__buttons">
		<button class="c-snackbar__button c-snackbar__dismiss">Not Now</button>
		<button class="c-snackbar__button c-snackbar__button--primary c-snackbar__accept">Install</button>
	</div>
</div>

Source: assets/src/css/5-components/_c-social.scss, line 1

5.66 Social

Links to various Global News social media accounts.

Example

<nav class="c-social" aria-label="Social links">
	<a class="c-social__link" href="/pages/facebook/">
		<svg class="c-social__icon c-social__icon--facebook c-icon">
			<use xlink:href="../assets/dist/icons/out/symbol/svg/sprite.symbol.svg#facebook" />
		</svg>
	</a>
	<a class="c-social__link" href="/pages/twitter/">
		<svg class="c-social__icon c-social__icon--twitter c-icon">
			<use xlink:href="../assets/dist/icons/out/symbol/svg/sprite.symbol.svg#twitter" />
		</svg>
	</a>
	<a class="c-social__link" href="https://www.youtube.com/globalnews" target="_blank">
		<svg class="c-social__icon c-social__icon--youtube c-icon">
			<use xlink:href="../assets/dist/icons/out/symbol/svg/sprite.symbol.svg#youtube" />
		</svg>
	</a>
	<a class="c-social__link" href="https://instagram.com/globalnews" target="_blank">
		<svg class="c-social__icon c-social__icon--instagram c-icon">
			<use xlink:href="../assets/dist/icons/out/symbol/svg/sprite.symbol.svg#instagram" />
		</svg>
	</a>
	<a class="c-social__link" href="https://www.linkedin.com/company/global-television?trk=biz-companies-cym" target="_blank">
		<svg class="c-social__icon c-social__icon--linkedin c-icon">
			<use xlink:href="../assets/dist/icons/out/symbol/svg/sprite.symbol.svg#linkedin" />
		</svg>
	</a>
	<a class="c-social__link" href="https://www.pinterest.com/globaltvnews/" target="_blank">
		<svg class="c-social__icon c-social__icon--pinterest c-icon">
			<use xlink:href="../assets/dist/icons/out/symbol/svg/sprite.symbol.svg#pinterest" />
		</svg>
	</a>
	<a class="c-social__link" href="/pages/feeds/">
		<svg class="c-social__icon c-social__icon--rss c-icon">
			<use xlink:href="../assets/dist/icons/out/symbol/svg/sprite.symbol.svg#rss" />
		</svg>
	</a>
</nav>

Source: assets/src/css/5-components/_c-socialShare.scss, line 1

5.67 Social Share

Social Share buttons found above article main content, in popup and in sticky nav bar when user scrolls further into the article.

Source: assets/src/css/5-components/_c-socialShare--interactiveNavbar.scss, line 6

5.67.1 Social Share in interactive template header/navbar

Appears in interactive sticky header

Example

<div class="c-socialShare c-socialShare--interactive c-socialShare--interactiveNavbar">
		<ul class="c-socialShare__list">
		<li data-socialshare-provider="facebook" class="c-socialShare__item c-socialShare__item--facebook" >
				<a href="#" class="c-socialShare__link">
					<span class="sr-only">Facebook</span>
					<svg class="c-icon c-icon--inverted c-socialShare__icon c-socialShare__icon--facebook">
						<use xlink:href="../assets/dist/icons/out/symbol/svg/sprite.symbol.svg#facebook"></use>
					</svg>
				</a>
			</li>
		<li data-socialshare-provider="twitter" class="c-socialShare__item c-socialShare__item--twitter" >
				<a href="#" class="c-socialShare__link">
					<span class="sr-only">Twitter</span>
					<svg class="c-icon c-icon--inverted c-socialShare__icon c-socialShare__icon--twitter">
						<use xlink:href="../assets/dist/icons/out/symbol/svg/sprite.symbol.svg#twitter"></use>
					</svg>
				</a>
			</li>
		<li data-socialshare-provider="more" class="c-socialShare__item c-socialShare__item--more" >
				<a href="#" class="c-socialShare__link">
					<span class="sr-only">Share this item</span>
					<svg class="c-icon c-icon--inverted c-socialShare__icon c-socialShare__icon--more">
						<use xlink:href="../assets/dist/icons/out/symbol/svg/sprite.symbol.svg#more-plus"></use>
					</svg>
				</a>
			</li>
		</ul>
</div>

Source: assets/src/css/5-components/_c-socialShare--longformNavbar.scss, line 6

5.67.2 Social Share in longform template header/navbar

Appears in longform sticky header

Example

<div class="c-socialShare c-socialShare--longform c-socialShare--longformNavbar">
		<ul class="c-socialShare__list">
		<li data-socialshare-provider="facebook" class="c-socialShare__item c-socialShare__item--facebook" >
				<a href="#" class="c-socialShare__link">
					<span class="sr-only">Facebook</span>
					<svg class="c-icon c-icon--inverted c-socialShare__icon c-socialShare__icon--facebook">
						<use xlink:href="../assets/dist/icons/out/symbol/svg/sprite.symbol.svg#facebook"></use>
					</svg>
				</a>
			</li>
		<li data-socialshare-provider="twitter" class="c-socialShare__item c-socialShare__item--twitter" >
				<a href="#" class="c-socialShare__link">
					<span class="sr-only">Twitter</span>
					<svg class="c-icon c-icon--inverted c-socialShare__icon c-socialShare__icon--twitter">
						<use xlink:href="../assets/dist/icons/out/symbol/svg/sprite.symbol.svg#twitter"></use>
					</svg>
				</a>
			</li>
		<li data-socialshare-provider="more" class="c-socialShare__item c-socialShare__item--more" >
				<a href="#" class="c-socialShare__link">
					<span class="sr-only">Share this item</span>
					<svg class="c-icon c-icon--inverted c-socialShare__icon c-socialShare__icon--more">
						<use xlink:href="../assets/dist/icons/out/symbol/svg/sprite.symbol.svg#more-plus"></use>
					</svg>
				</a>
			</li>
		</ul>
</div>

Source: assets/src/css/5-components/_c-socialShare--article.scss, line 6

5.67.3 Social Share in Article

These buttons are displayed directly above the article. This style handles showing/hiding More button, Twitter and WhatsApp on different screen sizes

Example

<div class="c-socialShare c-socialShare--article">
		<ul class="c-socialShare__list">
		<li data-socialshare-provider="comments" class="c-socialShare__item c-socialShare__item--comments" >
				<a href="#" class="c-socialShare__link">
					<span class="sr-only">Comments</span>
					<svg class="c-icon c-socialShare__icon c-socialShare__icon--comments">
						<use xlink:href="../assets/dist/icons/out/symbol/svg/sprite.symbol.svg#comment"></use>
					</svg>
				</a>
			</li>
		<li data-socialshare-provider="facebook" class="c-socialShare__item c-socialShare__item--facebook" >
				<a href="#" class="c-socialShare__link">
					<span class="sr-only">Facebook</span>
					<svg class="c-icon c-icon--inverted c-socialShare__icon c-socialShare__icon--facebook">
						<use xlink:href="../assets/dist/icons/out/symbol/svg/sprite.symbol.svg#facebook"></use>
					</svg>
				</a>
			</li>
		<li data-socialshare-provider="twitter" class="c-socialShare__item c-socialShare__item--twitter" >
				<a href="#" class="c-socialShare__link">
					<span class="sr-only">Twitter</span>
					<svg class="c-icon c-icon--inverted c-socialShare__icon c-socialShare__icon--twitter">
						<use xlink:href="../assets/dist/icons/out/symbol/svg/sprite.symbol.svg#twitter"></use>
					</svg>
				</a>
			</li>
		<li data-socialshare-provider="email" class="c-socialShare__item c-socialShare__item--email" >
				<a href="#" class="c-socialShare__link">
					<span class="sr-only">Email</span>
					<svg class="c-icon c-socialShare__icon c-socialShare__icon--email">
						<use xlink:href="../assets/dist/icons/out/symbol/svg/sprite.symbol.svg#mail"></use>
					</svg>
				</a>
			</li>
		<li data-socialshare-provider="more" class="c-socialShare__item c-socialShare__item--more c-socialShare__item--moreArticle" >
				<a href="#" class="c-socialShare__link">
					<span class="sr-only">Share this item</span>
					<svg class="c-icon c-icon--inverted c-socialShare__icon c-socialShare__icon--more">
						<use xlink:href="../assets/dist/icons/out/symbol/svg/sprite.symbol.svg#more-plus"></use>
					</svg>
				</a>
			</li>
		<li data-socialshare-provider="more" class="c-socialShare__item c-socialShare__item--more c-socialShare__item--moreNav" >
				<a href="#" class="c-socialShare__link">
					<span class="sr-only">Share this item</span>
					<svg class="c-icon c-icon--inverted c-socialShare__icon c-socialShare__icon--more">
						<use xlink:href="../assets/dist/icons/out/symbol/svg/sprite.symbol.svg#more-plus"></use>
					</svg>
				</a>
			</li>
		</ul>
</div>

Source: assets/src/css/5-components/_c-socialShare--navbar.scss, line 6

5.67.4 Social Share in Scrolling Navigation Bar

These share buttons slide into the navigation bar as user scrolls down the article.

Example

<div class="c-socialShare c-socialShare--navbar">
		<ul class="c-socialShare__list">
		<li data-socialshare-provider="comments" class="c-socialShare__item c-socialShare__item--comments" >
				<a href="#" class="c-socialShare__link">
					<span class="sr-only">Comments</span>
					<svg class="c-icon c-socialShare__icon c-socialShare__icon--comments">
						<use xlink:href="../assets/dist/icons/out/symbol/svg/sprite.symbol.svg#comment"></use>
					</svg>
				</a>
			</li>
		<li data-socialshare-provider="facebook" class="c-socialShare__item c-socialShare__item--facebook" >
				<a href="#" class="c-socialShare__link">
					<span class="sr-only">Facebook</span>
					<svg class="c-icon c-icon--inverted c-socialShare__icon c-socialShare__icon--facebook">
						<use xlink:href="../assets/dist/icons/out/symbol/svg/sprite.symbol.svg#facebook"></use>
					</svg>
				</a>
			</li>
		<li data-socialshare-provider="twitter" class="c-socialShare__item c-socialShare__item--twitter" >
				<a href="#" class="c-socialShare__link">
					<span class="sr-only">Twitter</span>
					<svg class="c-icon c-icon--inverted c-socialShare__icon c-socialShare__icon--twitter">
						<use xlink:href="../assets/dist/icons/out/symbol/svg/sprite.symbol.svg#twitter"></use>
					</svg>
				</a>
			</li>
		<li data-socialshare-provider="email" class="c-socialShare__item c-socialShare__item--email" >
				<a href="#" class="c-socialShare__link">
					<span class="sr-only">Email</span>
					<svg class="c-icon c-socialShare__icon c-socialShare__icon--email">
						<use xlink:href="../assets/dist/icons/out/symbol/svg/sprite.symbol.svg#mail"></use>
					</svg>
				</a>
			</li>
		<li data-socialshare-provider="more" class="c-socialShare__item c-socialShare__item--more" >
				<a href="#" class="c-socialShare__link">
					<span class="sr-only">Share this item</span>
					<svg class="c-icon c-icon--inverted c-socialShare__icon c-socialShare__icon--more">
						<use xlink:href="../assets/dist/icons/out/symbol/svg/sprite.symbol.svg#more-plus"></use>
					</svg>
				</a>
			</li>
		</ul>
</div>

Source: assets/src/css/5-components/_c-socialShare--popup.scss, line 6

5.67.5 Social Share in Popup

These buttons open in a popup window when + is clicked to show more sharing options.

Example

<div class="c-socialShare c-socialShare--popup" data-socialshare-popup="true">
		<ul class="c-socialShare__list">
		<li data-socialshare-provider="facebook" class="c-socialShare__item c-socialShare__item--facebook" >
				<a href="#" class="c-socialShare__link">
					<span class="sr-only">Share this item on Facebook</span>
					<svg class="c-icon c-icon--inverted c-socialShare__icon c-socialShare__icon--facebook">
						<use xlink:href="../assets/dist/icons/out/symbol/svg/sprite.symbol.svg#facebook"></use>
					</svg>
				<span class="c-socialShare__text">facebook</span>
				</a>
			</li>
		<li data-socialshare-provider="whatsapp" class="c-socialShare__item c-socialShare__item--whatsapp" >
				<a href="#" class="c-socialShare__link">
					<span class="sr-only">Share this item via Whatsapp</span>
					<svg class="c-icon c-socialShare__icon c-socialShare__icon--whatsapp">
						<use xlink:href="../assets/dist/icons/out/symbol/svg/sprite.symbol.svg#whatsapp"></use>
					</svg>
				<span class="c-socialShare__text">whatsapp</span>
				</a>
			</li>
		<li data-socialshare-provider="twitter" class="c-socialShare__item c-socialShare__item--twitter" >
				<a href="#" class="c-socialShare__link">
					<span class="sr-only">Share this item on Twitter</span>
					<svg class="c-icon c-icon--inverted c-socialShare__icon c-socialShare__icon--twitter">
						<use xlink:href="../assets/dist/icons/out/symbol/svg/sprite.symbol.svg#twitter"></use>
					</svg>
				<span class="c-socialShare__text">twitter</span>
				</a>
			</li>
		<li data-socialshare-provider="email" class="c-socialShare__item c-socialShare__item--email" >
				<a href="#" class="c-socialShare__link">
					<span class="sr-only">Send this page to someone via email</span>
					<svg class="c-icon c-socialShare__icon c-socialShare__icon--email">
						<use xlink:href="../assets/dist/icons/out/symbol/svg/sprite.symbol.svg#mail"></use>
					</svg>
				<span class="c-socialShare__text">email</span>
				</a>
			</li>
		<li data-socialshare-provider="flipboard" class="c-socialShare__item c-socialShare__item--flipboard" >
				<a href="#" class="c-socialShare__link">
					<span class="sr-only">Share this item on Flipboard</span>
					<svg class="c-icon c-icon--inverted c-socialShare__icon c-socialShare__icon--flipboard">
						<use xlink:href="../assets/dist/icons/out/symbol/svg/sprite.symbol.svg#flipboard"></use>
					</svg>
				<span class="c-socialShare__text">flipboard</span>
				</a>
			</li>
		<li data-socialshare-provider="linkedin" class="c-socialShare__item c-socialShare__item--linkedin" >
				<a href="#" class="c-socialShare__link">
					<span class="sr-only">Share this item on LinkedIn</span>
					<svg class="c-icon c-icon--inverted c-socialShare__icon c-socialShare__icon--linkedin">
						<use xlink:href="../assets/dist/icons/out/symbol/svg/sprite.symbol.svg#linkedin"></use>
					</svg>
				<span class="c-socialShare__text">linked</span>
				</a>
			</li>
		<li data-socialshare-provider="reddit" class="c-socialShare__item c-socialShare__item--reddit" >
				<a href="#" class="c-socialShare__link">
					<span class="sr-only">Share this item on Reddit</span>
					<svg class="c-icon c-socialShare__icon c-socialShare__icon--reddit">
						<use xlink:href="../assets/dist/icons/out/symbol/svg/sprite.symbol.svg#reddit"></use>
					</svg>
				<span class="c-socialShare__text">reddit</span>
				</a>
			</li>
		<li data-socialshare-provider="copy" class="c-socialShare__item c-socialShare__item--copy" >
				<a href="#" class="c-socialShare__link">
					<span class="sr-only">Copy article link</span>
					<svg class="c-icon c-socialShare__icon c-socialShare__icon--copy">
						<use xlink:href="../assets/dist/icons/out/symbol/svg/sprite.symbol.svg#embed"></use>
					</svg>
				<span class="c-socialShare__text">copy</span>
				</a>
			</li>
		</ul>
</div>

Source: assets/src/css/5-components/_c-sponsor.scss, line 1

5.68 Sponsor

Display a sponsor badge that links to sponsor page

Examples

Default styling

.c-sponsor--section

Sponsorship of an entire section or page

<div class="c-sponsor">
	<a href="" class="c-sponsor__link c-sponsor__link--image" target="_blank">
		<img src="https://shawglobalnews.files.wordpress.com/2018/11/magnum_logo_pantone_ext_canada11.png" class="c-sponsor__image" alt="Magnum Cream Liqueur">
	</a>
	<div class="c-sponsor__details">
		<span class="c-sponsor__label">In partnership with</span>
		<div class="c-sponsor__name">
			<a href="" class="c-sponsor__link" target="_blank" title="">
				Magnum Cream Liqueur
			</a>
			<div class="c-sponsor__button">
				<svg class="c-sponsor__icon c-sponsor__icon--question c-icon"><use xlink:href="#question"></use></svg>
			</div>
		</div>
	</div>
</div>

Source: assets/src/css/5-components/_c-stickToTop.scss, line 1

5.69 StickToTop

Generic sticky css for setting top position of elements that stick to the top

Examples

Default styling

Sticky Element

c-stickToTop--pushed

sticky element pushed down by sticky ad or notification

Sticky Element

<div class="c-stickToTop [modifier class]">Sticky Element</div>

Source: assets/src/css/5-components/_c-stickyRail.scss, line 1

5.70 Sticky Rail

Make a widget sticky within a container. The widget starts sticking as the top of the container exits the viewport and stops at the bottom edge of the container. Since this is handled natively by position: sticky, this component is only necessary as part of the StickyRail.js fallback for when position: sticky is not supported.

Source: assets/src/css/5-components/_c-stickyVideo.scss, line 1

5.71 Sticky Video Player

A small sticky version of the video player that appears when a user scrolls past a playing video.

Source: assets/src/css/5-components/_c-surveyCta.scss, line 1

5.72 Survey Cta

A CTA that links users to a survey

Example

A fresh new look for Global News is here, tell us what you think

Take a Survey

<section id="content-redesign-survey" class="c-surveyCta">
	<div class="c-surveyCta__inner">
		<div class="c-surveyCta__media">
			<img class="c-surveyCta__image u-hide-mobile" src="../assets/dist/images/survey-mobile.png" alt="Global News Redesign" loading="lazy">
			<img class="c-surveyCta__image u-show-mobile" src="../assets/dist/images/survey-desktop.png" alt="Global News Redesign" loading="lazy">
		</div>
		<div class="c-surveyCta__content">
			<img class="c-surveyCta__logo" src="../assets/dist/images/logo-mobile-black.svg" alt="Global News" loading="lazy"/>
			<div class="c-surveyCta__message">
				A fresh new look for Global News is here, tell us what you think
			</div>
			<a class="c-surveyCta__button c-button c-button--red" href="" target="_blank" title="Take the Survey">
				Take a Survey
			</a>
		</div>
	</div>
</section>

Source: assets/src/css/5-components/_c-tags.scss, line 1

5.73 Tags

Tags is found below article copyright Displays on tablet, desktop and mobile

Example

<div class="c-tags">
	<a href="#" class="c-tags__link">Donald Trump</a>
	<a href="#" class="c-tags__link">Medicaid</a>
	<a href="#" class="c-tags__link">Immigration</a>
	<a href="#" class="c-tags__link">Department of Homeland Security</a>
	<a href="#" class="c-tags__link">US Green Card</a>
	<a href="#" class="c-tags__link">United States</a>
	<a href="#" class="c-tags__link">Health Care</a>
	<a href="#" class="c-tags__link">Obama</a>
</div>

Source: assets/src/css/5-components/_c-ticker.scss, line 1

5.74 Ticker

Ticker for elections

Example

<div class="c-ticker">
<div class="c-ticker__main">
	<div class="c-ticker__inner">
		<iframe class="c-ticker__embed" src="https://thecanadianpress-a.akamaihd.net/graphics/2018/ontario-election/bars/horizontal-wide/index.html" loading="lazy" frameborder="0" scrolling="no"></iframe>
	</div>
</div>
<div class="c-ticker__footer">
	<div class="c-ticker__inner">
		<a class="c-link" href="">
			<div class="c-link__inner">
				<span class="c-link__label">View Full Results</span>
				<span class="c-link__icon"></span>
			</div>
		</a>
	</div>
</div>
</div>

Source: assets/src/css/5-components/_c-toolTip.scss, line 1

5.75 Tool Tip

Displays a tool tip on hover of an info button

Examples

Default styling

c-toolTip--mobile

mobile version where component takes up full width

c-toolTip--desktop

desktop version where component takes up a fixed width

c-toolTip--active

Tool tip when visible, by default it is hidden

<div class="c-toolTip [modifier class]">
	<div class="c-toolTip__pointer"></div>
	<div class="c-toolTip__inner">
		<div class="c-toolTip__title" data-map="tipTitle">What is this?</div>
		<div class="c-toolTip__content" data-map="tipContent">
			Branded content is written by or on behalf of our sponsor and not by Global News' editorial staff.
		</div>
		<a class="c-toolTip__link" data-map="tipLink" href="" target="_blank">
			<span class="c-toolTip__linkLabel" data-map="tipLinkLabel">If you'd like to learn more...</span>
		</a>
	</div>
	</div>
</div>

Source: assets/src/css/5-components/_c-topLabel.scss, line 1

5.76 Top label

Top label is found above article title It can be red label or live updates label

Example

Label name

<div class="c-topLabel">
	<a class="c-topLabel__link" href="#">
		Label name
	</a>
</div>

Source: assets/src/css/5-components/_c-trendingTopics.scss, line 1

5.77 Trending Topics

Example

In the News

<div class="c-trendingTopics ">
	<div class="c-trendingTopics__title">In the News</div>
	<ul class="c-trendingTopics__list">
		<li class="c-trendingTopics__item">
			<a href="#" class="c-trendingTopics__link">
				<span class="c-trendingTopics__label">Measles</span>
			</a>
		</li>
		<li class="c-trendingTopics__item">
			<a href="#" class="c-trendingTopics__link">
				<span class="c-trendingTopics__label">Elephant Man</span>
			</a>
		</li>
		<li class="c-trendingTopics__item">
			<a href="#" class="c-trendingTopics__link">
				<span class="c-trendingTopics__label">Trump Pardon</span>
			</a>
		</li>
		<li class="c-trendingTopics__item">
			<a href="#" class="c-trendingTopics__link">
				<span class="c-trendingTopics__label">Police Shooting</span>
			</a>
		</li>
	</ul>
</div>

Source: assets/src/css/5-components/_c-video.scss, line 1

5.78 Video Player

Video player splash screen with play button. tags are used because wpautop runs when video is embedded in liveblog: Issue report here: https://github.com/Automattic/liveblog/issues/587

Example

<a class="c-video c-videoPlay">
	<span class="c-video__placeholder">
		<img class="c-video__image" width="640" height="360" src="//via.placeholder.com/640x360">
		<span class="c-video__overlay">
			<span class="c-video__icon c-videoPlay__icon">
				<svg class="c-video__play c-videoPlay__white c-icon">
					<use xlink:href="../assets/dist/icons/out/symbol/svg/sprite.symbol.svg#play_white" />
				</svg>
				<svg class="c-icon">
					<use xlink:href="../assets/dist/icons/out/symbol/svg/sprite.symbol.svg#play_red" />
				</svg>
				<svg class="c-icon">
					<use xlink:href="../assets/dist/icons/out/symbol/svg/sprite.symbol.svg#play_yellow" />
				</svg>
			</span>
			<span class="c-video__data">
				<time class="c-video__duration">2:22</time>
				<span class="c-video__title">This is a video about some dogs</span>
			</span>
		</span>
	</span>
</a>

Source: assets/src/css/5-components/_c-videoPlay.scss, line 1

5.78 Basic styling for video-style play button, including hover

This styling is used for standalone video, and video carousel can be applied to .c-video and .c-posts

Example

2:22 This is a video about some dogs

<a class="c-video c-videoPlay">
	<span class="c-video__placeholder">
		<img class="c-video__image" width="640" height="360" src="//via.placeholder.com/640x360">
		<span class="c-video__overlay">
			<span class="c-video__icon c-videoPlay__icon">
				<svg class="c-video__play c-videoPlay__white c-icon">
					<use xlink:href="../assets/dist/icons/out/symbol/svg/sprite.symbol.svg#play_white" />
				</svg>
				<svg class="c-icon">
					<use xlink:href="../assets/dist/icons/out/symbol/svg/sprite.symbol.svg#play_red" />
				</svg>
				<svg class="c-icon">
					<use xlink:href="../assets/dist/icons/out/symbol/svg/sprite.symbol.svg#play_yellow" />
				</svg>
			</span>
			<span class="c-video__data">
				<time class="c-video__duration">2:22</time>
				<span class="c-video__title">This is a video about some dogs</span>
			</span>
		</span>
	</span>
</a>

Source: assets/src/css/5-components/_c-weather.scss, line 1

5.79 Weather

Displays a weather widget showing current and weather forecast along with sponsor banner if one exists

Examples

Default styling

c-weather--loading

Loading state of the weather widget

c-weather--night

Weather widget in night mode

c-weather--traffic

Weather widget when there are traffic conditions to report