Skip to main content

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.

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


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.

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 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.

Tab Content

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

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.

 3 Even Blue Columns

Column 1/3

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.

View details »

Column 1/3

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.

Column 1/3

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.

 3 Even Columns

Column 1/3

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.

View details »

Column 1/3

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.

Column 1/3

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.

 3 Uneven Columns

Title

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.

Title

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.

View details »

Title

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.

View details »

 4 Even Blue Columns

H1 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.

H2 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.

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.

View details »

H4 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.

 4 Even Columns

H1 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.

H2 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.

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.

View details »

H4 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.