Snippets


Snippets are reusable files that are available to be inserted on a page via the WYSIWYG Editor or with the Snippets Gadget. They can greatly ease the abilty to create custom formatting on a page.

Use - adds accordion (collapse) functionality to show/hide sections of content. Accordions contain a title and corresponding content.

Example:

Nunc sagittis vulputate turpis, nec molestie elit rutrum vitae. Nam pretium magna vitae est consequat ullamcorper. Mauris vel purus eget diam volutpat cursus sollicitudin eu sapien. 

Mauris molestie facilisis dictum. Duis vel auctor purus. Proin orci lacus, maximus commodo dolor facilisis, faucibus rutrum elit. Phasellus euismod hendrerit tortor, sed tempus turpis eleifend vitae.

Nullam vitae velit tristique, dignissim velit ut, ullamcorper nisl. Cras lobortis et odio vitae consequat. Ut a aliquam nibh.

Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Curabitur blandit tempus porttitor.

Use - adds tab functionality to transition through panes of content. Tabs contain a title and corresponding content.

Example:

Nunc sagittis vulputate turpis, nec molestie elit rutrum vitae. Nam pretium magna vitae est consequat ullamcorper. Mauris vel purus eget diam volutpat cursus sollicitudin eu sapien. 

Mauris molestie facilisis dictum. Duis vel auctor purus. Proin orci lacus, maximus commodo dolor facilisis, faucibus rutrum elit. Phasellus euismod hendrerit tortor, sed tempus turpis eleifend vitae.

Nullam vitae velit tristique, dignissim velit ut, ullamcorper nisl. Cras lobortis et odio vitae consequat. Ut a aliquam nibh.

Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Curabitur blandit tempus porttitor.

Use -  for creating a two column layout region on a page. Use this instead of a table if tablular data is not involved.

Example:

One Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Curabitur blandit tempus porttitor.

Two Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Curabitur blandit tempus porttitor.

Use -  for creating a three column layout region on a page. Use this instead of a table if tablular data is not involved.

Example:

One Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Curabitur blandit tempus porttitor.

Two Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Curabitur blandit tempus porttitor.

Three Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Curabitur blandit tempus porttitor.

Use -  for creating a four column layout region on a page. Use this instead of a table if tablular data is not involved.

Example:

One Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Curabitur blandit tempus porttitor.

Two Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Curabitur blandit tempus porttitor.

Three Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Curabitur blandit tempus porttitor.

Four Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Curabitur blandit tempus porttitor.

Use - a panel applies a basic border and padding to content. The header can contain a hyperlink, and there is an optional footer region as well.

Example:

 A Basic Panel Example

koala bear

 

Any type of content can go here. Images, lists, even other snippets!

  • item 1
  • item 2
  • item 3

Panel Example with a Footer

  • item 1
  • item 2
  • item 3

One Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Curabitur blandit tempus porttitor.

Two Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Curabitur blandit tempus porttitor.

Use - float box creates a region that floats to either the left or right side of content. Any type of content can go into a float box. Images with a caption, a Panel Snippet, video, etc.

Example:

koala bear

A majestic Koala Bear

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc efficitur erat ipsum, mattis tempor dolor facilisis tristique. Quisque sodales, neque eget consequat suscipit, nulla velit feugiat sem, rutrum pharetra augue libero vel dui. Donec vel ex vitae risus interdum mollis. In placerat risus vel nulla lobortis, eget scelerisque nibh vehicula. Sed iaculis vulputate posuere. Nam dignissim viverra vestibulum. Suspendisse potenti. Nullam laoreet turpis turpis. In id sem vitae nibh hendrerit dictum.

Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Cras gravida odio vitae elit lobortis rutrum. Etiam porta est sed nisl sagittis sagittis. Ut congue ac mauris quis pretium. Nulla congue eu risus sed cursus. Quisque eget ullamcorper tortor. Integer porttitor lobortis justo, ultrices ornare lacus. Donec imperdiet metus nec pharetra mattis. Mauris in libero ex.

Sed sollicitudin non tellus in convallis. Duis suscipit non libero at dictum. Ut molestie est non lorem pulvinar tincidunt. In et metus arcu. Vivamus lectus arcu, accumsan in mauris pharetra, vestibulum lacinia diam. Pellentesque vestibulum, justo id sollicitudin rhoncus, ipsum sem venenatis justo, in sagittis purus erat at libero. Suspendisse potenti. Donec vel nisi vitae turpis cursus malesuada a feugiat nulla. Suspendisse lectus elit, fermentum in dapibus sit amet, viverra ac libero. Suspendisse congue, erat sed lobortis scelerisque, massa lorem convallis metus, vitae facilisis nulla neque nec tellus. Proin varius, odio sed commodo molestie, tortor leo porttitor ipsum, at molestie elit tellus et urna.

Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Quisque pretium faucibus nisl eget tempus. Sed tincidunt nulla in neque convallis, ullamcorper tristique ipsum porta. Fusce tempus ultrices odio, ac vehicula diam tincidunt eget. Suspendisse rhoncus ullamcorper mi, non consequat mi blandit vel. Mauris eu commodo eros, ut bibendum metus. Morbi tristique lorem et congue iaculis.

Use - a modal is great for displaying additional information when needed in a dialog box that appears over the current page. A modal contains a header, content and a trigger on the page to activate the modal.

Example:

A Modal Trigger

Use - an image that when hovered over or tapped reveals additional content. The additional content can include links or just be text. Keep the content brief and test it at different size!

Example of 3 Hover Blocks nested in a 3 Column Snippet:

Hover Block

A sample title here

A very brief description could go here as well. Keep it short!

Learn More

Graduate Studies

A sample title here

A very brief description could go here as well. Keep it short!

Learn More

Graduate Studies

A sample title here

A very brief description could go here as well. Keep it short!

Learn More

Use - a layout for displaying employee/staff listings. There is a one column (layout style 1) and two column (layout style 2) displays available.

Example Layout Style 1:

John Doe

John Doe, Director 

555-5555 | Campus Center 
Additional information can go here. A brief bio, or other types of information.
Jane Doe

Jane Doe, Dean

555-5555

 

Example Layout Style 2:

John Doe

John Doe, Director

555-5555  | Campus Center 
Jane Doe

Jane Doe, Dean

 555-5555

Use - display a brief testimonial(s) in a carousel.

Example: