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

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

Per Quarter 2016-2017 Residents Non-resident
Online Only
Non-resident
On Campus
Non-resident
Non-Citizen
1 credit $999.99 $999.99 $999.99 $999.99
5 credits $999.99 $999.99 $999.99 $999.99
12 credits (full-time) $999.99 $999.99 $999.99 $999.99
15 credit $999.99 $999.99 $999.99 $999.99
These estimated quarterly costs include college mandatory fees such as computer lab & facility fee

skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS.

Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS.

 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

Example usage. Place the contact snippet within a 2-col or 3-col snippet as needed.

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Del sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem.

Contact Us

Advising Services

1111 Greenwood Ave. (Blg 2000)
Shoreline, Wa. 98111

Email
contact@shoreline.edu
Phone
(206) 546-4559
Fax
(206) 533-5101
students

Contact Info One Column

Contact Us

Advising Services

1111 Greenwood Ave. (Blg 2000)
Shoreline, Wa. 98111

Email
contact@shoreline.edu
Phone
(206) 546-4559
Fax
(206) 533-5101
students


 Single Event Snippet

May 8

Spindrift 2018 Release Celebration

Tuesday, May 8, 2018
11am - 6pm
Visual Arts Center, 2000 Building


Multiple Events Snippet

May 8

Spindrift 2018 Release Celebration

Tuesday, May 8, 2018
11am - 6pm
Visual Arts Center, 2000 Building

Dec 25

Spindrift 2018 Release Celebration

Tuesday, May 8, 2018
11am - 6pm
Visual Arts Center, 2000 Building

May 8

Public Health Degree Info Session

Tuesday, May 8, 2018
11am - 6pm
Visual Arts Center, 2000 Building

View all Events


News Feed Snippet

View all News


 Under Construction - Consulting with OmniUpdate

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, you can rejoice.

Quote Author Name
Job Title

One Column Quote

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

Quote Author

Rectangular News/Announcement with Button

View all News


Square News/Announcement


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.

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

Per Quarter 2016-2017 Residents Non-resident
Online Only
Non-resident
On Campus
Non-resident
Non-Citizen
1 credit $999.99 $999.99 $999.99 $999.99
5 credits $999.99 $999.99 $999.99 $999.99
12 credits (full-time) $999.99 $999.99 $999.99 $999.99
15 credit $999.99 $999.99 $999.99 $999.99
These estimated quarterly costs include college mandatory fees such as computer lab & facility fee

 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, consectetur adipiscing 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.


Twitter Feed Snippet

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


Image With Caption

Milla Vanilla
Lorems to the ipsums to the lopsems…
Milla Vanilla
Transfer Program in Visual Communications Technology

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

Video Title

Video description Earum omnis reiciendis aut quasi id ea exercitationem dolorum. Asperiores aut dicta odit.


Video with Caption Below

Video Title

Video description Earum omnis reiciendis aut quasi id ea exercitationem dolorum. Asperiores aut dicta odit.


YouTube Embed (4x3)


YouTube Embed (Widescreen)