Style Guide

Brand Identity
- Typography
Grid
Elements
- Buttons
- List Items
- Paragraphs
- Card
Components
- Callouts
- Panels
- Contextual Backgrounds
- Buttons
- Labels
- Accordions
- Tabs
FancyBox
Style Guide [pdf]

Contact Us:

Marketing Communications
Brown Hall
Scranton, PA 18510
The University of Scranton
cms@scranton.edu

Videos

YouTube video

Vimeo video

Direct link to MP4 video

HTML5 video element

YouTube Thumbnail to Video

YouTube Thumbnail to Video - Alternative play icon

Mutliple videos In a Gallery

Make all data-fancybox="" have the same value

  <a class="youtube-icon" data-fancybox="gallery" href="https://www.youtube.com/watch?v=w3PE58NQW50"> <img alt="youtube thumbnail" src="https://img.youtube.com/vi/w3PE58NQW50/maxresdefault.jpg" /> </a>

Snippets

YouTube Thumbnail Image

https://img.youtube.com/vi/{youtubeid}/hqdefault.jpg
https://img.youtube.com/vi/{youtubeid}/maxresdefault.jpg

FancyBox Video - max res

<a class="youtube-icon" data-fancybox="" href="https://www.youtube.com/watch?v={youtubeid}">
    <img alt="youtube thumbnail" src="https://img.youtube.com/vi/{youtubeid}/maxresdefault.jpg" />
</a>

FancyBox Video - high res (if max res is unavailable)

<a class="youtube-icon" data-fancybox="" href="https://www.youtube.com/watch?v={youtubeid}">	
    <img alt="youtube thumbnail" src="https://img.youtube.com/vi/{youtubeid}/hqdefault.jpg" />
</a>

Icon Overlays

<a class="youtube-icon" data-fancybox="" href="https://www.youtube.com/watch?v={youtubeid}">	
    <img alt="youtube thumbnail" src="https://img.youtube.com/vi/{youtubeid}/maxresdefault.jpg" />
</a>

<a class="video-icon" data-fancybox="" href="https://www.youtube.com/watch?v={youtubeid}">	
    <img alt="youtube thumbnail" src="https://img.youtube.com/vi/{youtubeid}/maxresdefault.jpg" />		
</a>