Snippet Glossary

Welcome to the Snippet Glossary. This resource is intended to be a visual reference that displays how Snippets will look and operate on the page.


50/50 Two Column Snippet

Insert Column One Content.

This is the first (or left-side) column of a two-column snippet where content can be placed.

In the page's responsive design, this column will scale down and be placed above the second(or right-hand) column.

Insert Column Two Content.

This is the second (or right-side) column of a two-column snippet where content can be placed.

In the page's responsive design, this column will scale down and be placed under the first (or left-hand) column.


50/50 Two Column Snippet (Reverse Layout on Mobile)

This is the first (or left-side) column of a two-column snippet where content can be placed.

In the page's responsive design, this column will scale down and be placed under the second (or right-hand) column.

This is the second (or right-side) column of a two-column snippet where content can be placed.

In the page's responsive design, this column will scale down and be placed above the first (or left-hand) column.


Three Column Snippet

Insert Column One Content.

This is the first (or left-side) column of a three-column snippet where content can be placed.

In the page's responsive design, this column will scale down and be placed above the second (or middle) column.

Insert Column Two Content.

This is the second (or middle) column of a three-column snippet where content can be placed.

In the page's responsive design, this column will scale and be placed under the first (or left-hand) column

Insert Column Three Content.

This is the third (or right-side) column of a three-column snippet where content can be placed.

In the page's responsive design, this column will shrink down and be placed under the middle column.


Three Column List Snippet

  • Replace content when a bulleted list is needed.
  • This is the first (or left-side) column of a three-column snippet where content can be placed.
  • To add a bullet, simply hit the "Return" key.
  • This is the second (or middle) column of a three-column snippet.
  • In the page's responsive design, this column will scale down and be placed under the first (or left-hand) column
  • To add a bullet, simply hit the "Return" key.
  • This is the third (or right-side) column of a three-column snippet.
  • In the page's responsive design, this column will scale down and be placed under the middle column.
  • To add a bullet, simply hit the "Return" key.

 Accordion Snippet

Aenean vel pharetra diam. Morbi vitae dolor in elit viverra fermentum vel in diam. Nulla interdum magna vel sapien vehicula dignissim. Pellentesque dignissim pulvinar. Quisque quis justo quis velit sodales tempor.

Aenean vel pharetra diam. Morbi vitae vel in diam. Maecenas in vestibulum sapien. Nulla sapien vehicula dignissim. Pellentesque dignissim pulvinar. Maecenas sollicitudin massa a consequat tincidunt.

Aenean vel pharetra diam. Morbi vitae dolor in elit viverra fermentum vel in diam. Nulla interdum magna vel sapien vehicula dignissim. Nam blandit felis sed luctus molestie. Maecenas sollicitudin massa a consequat tincidunt.

Aenean vel pharetra diam. Morbi vitae dolor in elit viverra fermentum vel in diam. Maecenas in vestibulum sapien. Nulla interdum magna vel sapien vehicula dignissim. Pellentesque vestibulum ac est dignissim pulvinar. Sed orci sapien, fermentum dictum consequat posuere, tincidunt vel dolor. Quisque quis justo quis velit sodales tempor. Nam blandit felis sed luctus molestie. Maecenas sollicitudin massa a consequat tincidunt.

Aenean vel pharetra diam. Morbi vitae dolor in elit viverra fermentum vel in diam. Pellentesque vestibulum ac est dignissim pulvinar. Quisque quis velit sodales tempor. Maecenas sollicitudin massa a consequat tincidunt.

 Use this snippet to provide additional content to pages without creating exceedingly long Web pages.


 Image with Overlay Snippet

woman

What type of studentare you?

Button Over Image


Button Snippet (left and right justified)

Click me

Click me

 

 

 


Contact Info Two Column Snippet

Add your content here to match the height of the contact info to the right.

Contact Us

Advising Services
FOSS (5000) Bld., Room 5229
Hours
Monday - Thursday
8 a.m. - 5 p.m.
Friday
8 a.m. - 4:30 p.m.

Contact Info One Column

Contact Us

Advising Services
FOSS (5000) Bld., Room 5229
Hours
Monday - Thursday
8 a.m. - 5 p.m.
Friday
8 a.m. - 4:30 p.m.


 Single Event Snippet

Transfer Planning

Tuesday, January 20
4:00pm - 5:00pm
Building | Room 101


Multiple Events Snippet

May23

Spring Transfer Fair

10am – 1pm
Main Dining Room of PUB

Campus Closed - Holiday

12:00 AM to 11:59 PMCampus - Wide

Memorial Day - Campus Closed

12:00 AM to 11:59 PMCampus - Wide

View all events page


News Feed Snippet


 Under Construction - Consulting with OmniUpdate

Monday January 1
Aenean Euismond Bibendum
Monday, January 1
Aenean Euismond Bibendum

Duis nec consequat dui. Praesent gravida diam at ex pharetra porta. Vivamus at nisi massa. Nam porta urna a dui

View all news


Green Line on Left Snippet

This creates two columns. In the right column is an area with a green border on the left. This acts as a way to "call out" an image or information.

Place your content here

Place your content here

  


 Two Column Snippet with 1/3 to 2/3 Width Ratio

Insert Column One Content. This column is 1/3 the width of the page.

This is the first (or left-side) column of a two-column snippet where content can be placed.

In the page's responsive design, this column will scale down and be placed above the second(or right-hand) column.

Insert Column Two Content. This column is 2/3 the width of the page.

This is the second (or right-side) column of a two-column snippet where content can be placed.

In the page's responsive design, this column will scale down and be placed under the first (or left-hand) column.


 Two Column Snippet with 2/3 to 1/3 Width Ratio

Insert Column One Content. This column is 2/3 the width of the page.

This is the first (or left-side) column of a two-column snippet where content can be placed.

In the page's responsive design, this column will scale down and be placed above the second(or right-hand) column.

Insert Column Two Content. This column is 1/3 the width of the page.

This is the second (or right-side) column of a two-column snippet where content can be placed.

In the page's responsive design, this column will scale down and be placed under the first (or left-hand) column.


Two Columns with Quote on Right Side

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

Begin by typing a quote. Once the quote is done.

—Quote Author


One Column Quote

Begin by typing a quote. Once the quote is done, you can rejoice.

—Quote Author


Rectangular News/Announcement with Button

Monday, January 1
Aenean Euismond Bibendum

Duis nec consequat dui. Praesent gravida diam at ex pharetra porta. Vivamus at nisi massa. Nam porta urna a dui

View all news

Square News/Announcement

Monday January 1
Aenean Euismond Bibendum

Table (Simple)

Head Head Head
Subject 1 Subject 2 Subject 3
Subject 1 Subject 2 Subject 3
Subject 1 Subject 2 Subject 3
Subject 1 Subject 2 Subject 3
Subject 1 Subject 2 Subject 3

Table (Pinned)

First column is locked. Right click a table cell to select deletion of a row or column.

Film Title Released Studio Budget
Frozen 2013 Disney $150,000,000
Toy Story 3 2010 Disney Pixar $200,000,000
Minions 2015 Universal $74,000,000

Table (Responsive Stacked)

Right click a table cell to select deletion of a row or column in order to size the table according to your needs.

Film Title Released Studio Budget
Sources: Wikipedia & Box Office Mojo. Data is current as of September 1, 2015.
Frozen 2013 Disney $150,000,000
Toy Story 3 2010 Disney Pixar $200,000,000
Minions 2015 Universal $74,000,000

 Tabs Snippet

Tab 1 -- Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec dictum nisi arcu, vitae tempus nisl mattis ut.

Tab 1 -- Quisque sollicitudin ex quis sapien imperdiet, a ultricies elit laoreet. Duis nec consequat dui lorem.

Tab 2 -- Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec dictum nisi arcu, vitae tempus nisl mattis ut.

Tab 2 -- Quisque sollicitudin ex quis sapien imperdiet, a ultricies elit laoreet. Duis nec consequat dui lorem.

Tab 3 -- Lorem ipsum dolor sit amet, elit. Donec dictum nisi arcu, vitae tempus nisl mattis ut. Tab 3 -- Quisque sollicitudin ex quis sapien imperdiet, a ultricies elit laoreet. Duis nec consequat dui lorem.

Tab 4 -- Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec dictum nisi arcu, vitae tempus nisl mattis ut.

Tab 4 -- Quisque sollicitudin ex quis sapien imperdiet, a ultricies elit laoreet. Duis nec consequat dui lorem.

Tab 5 -- Lorem ipsum dolor sit amet, consectetur. Donec dictum nisi arcu, vitae tempus nisl mattis ut. Tab 5 -- Quisque sollicitudin ex quis sapien imperdiet, a ultricies elit laoreet. Duis nec consequat dui lorem.


Twitter Feed Snippet

 Simply insert the proper Handle before the "@" symbol.


Image With Caption

Alt-text

Title H3

“Lorem ipsum dolor sit amet, consectetur adipiscing elit.”
Kerry Fields ‘16, Soccer

Two Images With Captions

Image dimensions: Left Image should be no wider than 644 pixels by any height.
Right Image (one-column image) should by no wider than 313 pixels by any height.


 Two Column Video Overlay Image with Caption Snippet

Title H3

“Lorem ipsum dolor sit amet, consectetur adipiscing elit.”

Kerry Fields ‘16, Soccer


Video with Caption Below

Title

“Lorem”

Name, Title


YouTube Embed (4x3)


YouTube Embed (Widescreen)