Snippets

We have a variety of built in code snippets for your convenience. You can access our Snippets library by clicking on the puzzle piece icon in the OU Campus editor when editing a page. You can use snippets to insert certain page structures and visual elements to any page. Below are examples of the snippets available in OU Campus.

Alerts

Danger! Indicates a dangerous or potentially negative action.

Info! Indicates a neutral informative change or action.

Success! Indicates a successful or positive action.

Warning! Indicates a warning that might need attention.

Text Boxes

This box is a blue text box. You can put as much content as you need to highlight pertinent information.

This box is a gray text box. You can put as much content as you need to highlight pertinent information.

Buttons

Blue Button

Sample Button

White Button

Sample Button

Toggles and Groupings

Accordions

Title of Accordion Menu

Some example content inside of the accordion.

Lorem ipsum dolor sit amet, quo modo feugiat voluptatum cu, aliquam definitiones pri ne. Eripuit mandamus persecuti est ea. Per eu blandit appetere accusamus. Posse lobortis recteque an cum, est tollit utroque persequeris ea, quo et fuisset oporteat consequuntur. Quo ea iudico eligendi, at sed nonumy primis, usu id dicat mazim platonem. Sed ferri legendos at, vix purto postea nemore at.

Topic Title Number Two of Accordion Menu

Lorem ipsum dolor sit amet, quo modo feugiat voluptatum cu, aliquam definitiones pri ne. Eripuit mandamus persecuti est ea. Per eu blandit appetere accusamus. Posse lobortis recteque an cum, est tollit utroque persequeris ea, quo et fuisset oporteat consequuntur. Quo ea iudico eligendi, at sed nonumy primis, usu id dicat mazim platonem. Sed ferri legendos at, vix purto postea nemore at.

Paragraphs Toggle

Paragraph toggle header #1

Maecenas metus

Paragraph - Nulla facilisi. Vivamus sagittis lectus in justo congue blandit. Sed eget felis eget nulla consectetur congue. Maecenas metus. Fusce ac orci blandit purus facilisis hendrerit. Nullam ut metus quis ipsum convallis euismod. Phasellus turpis purus, pharetra sit amet, dictum eget, ornare eget, ipsum. Morbi pulvinar quam vel sapien. Nulla vitae nisi vitae leo luctus volutpat. Sed faucibus dignissim nunc. Vivamus sagittis lectus in justo congue blandit. Sed eget felis eget nulla consectetur congue. Maecenas metus. Fusce ac orci blandit purus facilisis hendrerit.

Paragraph toggle header #2

Maecenas metus

Paragraph 1/3 column - Nulla facilisi. Vivamus sagittis lectus in justo congue blandit. Sed eget felis eget nulla consectetur congue. Maecenas metus. Fusce ac orci blandit purus facilisis hendrerit. Nullam ut metus quis ipsum convallis euismod. Phasellus turpis purus, pharetra sit amet, dictum eget, ornare eget, ipsum. Morbi pulvinar quam vel sapien. Nulla vitae nisi vitae leo luctus.

An eirmod insolens vel. Cum ignota eirmod ut. Ex ius harum persecuti, vocent invenire pri ex. Perfecto interpretaris et pri, no eos dicat splendide. Ad per mentitum ullamcorper, iusto disputando ut mei, has in modus oportere ullamcorper.

Nam cu sanctus ancillae voluptaria, in quo duis viris. Ius sale iudicabit ei, sit in duis inimicus interesset. Sumo ipsum legimus est ad. Cu nullam maluisset cum, nec nibh accommodare ea. Nec ridens accumsan cu, mel in sanctus democritum inciderint, vim salutatus dissentiunt ea.

In tacimates dissentias has, veritus officiis gubergren qui ea. Est at utinam debitis docendi. Eu rebum dictas ocurreret vel. Ea est altera tritani.

Cu viris legimus ullamcorper vel, ea eam soleat fierent adversarium. Qui tollit instructior id. Nibh minim vidisse ut ius, ei usu dolorum qualisque. Usu brute forensibus ne, veritus similique mnesarchum at nec. Mel ea saperet officiis dissentiunt, vis wisi mazim officiis ut, ei epicurei quaerendum ius.

Responsive Table

This table snippet drops in a generic style table that is fully responsive for mobile and desktop views. If you would like more information about tables, please see the article about tables.

2012	2013	2014	2015
Sed a nulla	Sed a nulla	Sed a nulla	Sed a nulla
Sed a nulla	Sed a nulla	Sed a nulla	Sed a nulla
Sed a nulla	Sed a nulla	Sed a nulla	Sed a nulla

Page Layout Snippets

Two Columns

Column 1/2

Paragraph 1/2 column - Nulla facilisi. Vivamus sagittis lectus in justo congue blandit. Sed eget felis eget nulla consectetur congue. Maecenas metus. Fusce ac orci blandit purus facilisis hendrerit. Nullam ut metus quis ipsum convallis euismod. Phasellus turpis purus, pharetra sit amet, dictum eget, ornare eget, ipsum. Morbi pulvinar quam vel sapien. Nulla vitae nisi vitae leo luctus.

Column 1/2

3 Even Blue Columns

Column 1/3

Column 1/3

Column 1/3

3 Even Columns

Column 1/3

Column 1/3

Column 1/3

3 Uneven Columns

Title

4 Even Blue Columns

H3 Column 1/4

Paragraph 1/4 column - Nulla facilisi. Vivamus sagittis lectus in justo congue blandit. Sed eget felis eget nulla consectetur congue. Maecenas metus. Fusce ac orci blandit purus facilisis hendrerit. Nullam ut metus quis ipsum convallis euismod. Phasellus turpis purus, pharetra sit amet, dictum eget, ornare eget, ipsum. Morbi pulvinar quam vel sapien. Nulla vitae nisi vitae leo luctus.

Snippets

Alerts

Text Boxes

Buttons

Blue Button

White Button

Toggles and Groupings

Accordions

Title of Accordion Menu

Topic Title Number Two of Accordion Menu

Paragraphs Toggle

Paragraph toggle header #1

Maecenas metus

Paragraph toggle header #2

Maecenas metus

Tab Content

Responsive Table

Page Layout Snippets

Two Columns

Column 1/2

Column 1/2

3 Even Blue Columns

Column 1/3

Column 1/3

Column 1/3

3 Even Columns

Column 1/3

Column 1/3

Column 1/3

3 Uneven Columns

Title

Title

Title

4 Even Blue Columns

H3 Column 1/4

H3 Column 1/4

H3 Column 1/4

H3 Column 1/4

4 Even Columns

H3 Column 1/4

H3 Column 1/4

H3 Column 1/4

H3 Column 1/4

About the USU IT Web Team

Contact Us

Quick Links