John Smith
Excepteur Sint Occaecat
jsmith@uwo.ca
519.432.8353
West Hall, Rm 102
Snippets
Snippets are pre-configured pieces of content that can be inserted to web pages, without the need of having to use or edit any code. Snippets are used to help maintain consistent standard formatting, layout and design of page items.
Use the following guide to understand the usage of some of the most commonly used snippets.
Accordion or Tab Menu
Menu 1
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt
ut labore et dolore magna aliqua.
Menu 2
Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip
ex ea commodo consequat.
Menu 3
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.
- When to use: Accordions are a great way to organize small bite-size chunks of content (ie. FAQs)
- Area of use: Main content area
- Additional fields: To add additonal menus, insert a new row
- Addition notes: To switch the accordion to a “tab”, select “tab” as the “menu type”
Billboard
Lead Your Way
- When to use: The billboard is a great visual way to organize quick links within your page
- Area of use: Full width content area (ie. above the footer or within your homepage)
- Addition notes: To add in a background image for the billboard, insert an image into the “background image field"
Bold Stories Slider
“Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.”
“Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.”
- When to use: The bold stories slider is a strong visual way to highlight short stories and testimonials
- Area of use: Main content area
- Additional fields: To add additonal stories, insert a new row
- Additional notes: A maximum of 5 testimonials should be used per slider
Contacts
-
-
Sarah Lee
Excepteur Sint Occaecat
slee@uwo.ca
519.432.8353
West Hall, Rm 102 -
Jane Jones
Excepteur Sint Occaecat
jjones@uwo.ca
519.432.8353
West Hall, Rm 102
- When to use: The Contacts snippet is used to profile faculty/staff and list contact information
- Area of use: Main content area
- Additional fields: To add an additional memeber, insert a new row
- Additional notes: Bio pages can be linked to using the "link" column
Large Video with Heading
Lead Your Way
- When to use: This snippet is used to embed a YouTube video to the website
- Area of use: Main content area or department homepage
- Additional fields: N/A
- Additional notes: The video will automatically size to the largest size available within the page. When embedding a video on an interior content page, the size can be adjusted as necessary
Parallex Billboard
- When to use: The parallex billboard is a great way to have a single call to action (ie. book an appointment)
- Area of use: Full width content area (ie. above the footer or within your homepage)
- Additional fields: N/A
- Additional notes:
- When choosing an image for the background of this snippet, ensure that your photo has high resolution and provides room for a “reveal” as the user scrolls down on the page
- When adding a link as the call to action, ensure that you use the "white button" class by selecting it in the “class” drop down menu
Section Image with Content
Lorem ipsum
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Praesentium, sapiente iste aspernatur explicabo quae.
Lorem ipsum
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Praesentium, sapiente iste aspernatur explicabo quae.
- When to use: Used to help highlight text within the page with an associated image. This snippet is also used on the index pages of your visual navigation
- Area of use: Main content area
- Additional fields: Insert a new snippet
- Additional notes: When using on the index page of your visual navigation, ensure that your image positions alternate left and right to keep within the consistency of the page
Two Columns
Lorem ipsum
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
Lorem ipsum
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
- When to use: Used to help organize content within two columns on the page
- Area of use: Main content area
- Additional fields: N/A
- Additional notes: The widths of the columns can be edited by clicking on the “split” drop down menu and choosing between: 50/50, 60/40, 40/60, 70/30, 30/70
Visual Steps
-
Step 1
Lorem ipsum dolor sit amet, consectetur adipisicing elit. -
Step 2
Lorem ipsum 2 dolor sit amet, consectetur adipisicing elit.
- When to use: The visual steps snippet is a great way to visually organize a series of steps that a user needs to take (i.e. applying to residence)
- Area of use: Main content area
- Additional fields: To add an additional step insert a new row
- Additional notes: Icons need to be made outside of OU Campus, and then uploaded as an image. Icons should use a blue background (HEX: #164397) and white graphic. For help in creating icons, please contact the Communications department