Class Portfolio

Available Defined Classes

These examples serve as a visual aid. They are often used inside snippets and assets. When inserting multiple buttons on a page consider placing them in a 2 or 3 column snippet and distribute them evenly.

Default

(not set) -- indicating no class is selected. 

(custom)

After selecting custom class option; a blank field will appear immediately following the class field for custom code to be inserted.

Button Tan

Buttons inserted in the width of the editable region may distort the button appearance based on the width of the region. It is recommended to utilize a layout option that works best for the content associated with the link by shortening the width span to achieve a button appearance.

Button Tan

Button Tan Arrow

Button Tan Arrow

Column 1: Text or an image can be inserted.

Column 2: Another 2 Column 50%/50%  snippet was inserted then links with Tan Button (from Styles) was added to each link.

Link 1

Link 2

Link 3

Link 4

Red Button

Red Button

Red Button Arrow

The text is left aligned with an arrow to the far right.

Red Button Arrow Example

Column 1: Text or an image can be inserted. 

Column 2: Another 2 Column 50%/50%  snippet was inserted then links with Red Button (from Styles) was added to each link.

Center Block with Images

Centers the image on the page.

female hands typing on a laptop

Image Rounded (subtle rounding of image corners)

Rounded corners of image is very subtle.

Rounded Image class example.

Image Circle

Image appears more elongated with rounded edges than circular. Notice the two different sized images below and how they render in the same space.

""

Image Circle Class Demonstrated

Example of Image Circle class inside a 3 column snippet (table):

business man

same business man

same man in 3 column snippet

Image Thumbnail (150 x 112 used here - no standard at this time)

This class provides an outline and white space around the image when used.

Thumbnail example

Center Text

Center Text class centers the text in the center of the editable region but the dotted line around the content in staging area does not appear when published.

This is how center text is displayed after your save it.

Heading Simulations

The purpose of simulating a different font size is to maintain the proper heading structure of the content while altering the size of the font.
[These heading classes were only placed in the Tabs snippet for accessibility sake.]

Simulates Heading 1 font size

Simulates Heading 2 font size

Simulates Heading 3 font size

Simulates Heading4 font size

Simulates Heading5 font size
Simulates Heading6 font size

Table

The purpose of data tables is to present tabular information in a grid, or matrix, and to have column or rows that show the meaning of the information in the grid. Sighted users can visually scan a table. When the proper HTML markup is in place, users of screen readers can navigate through data tables one cell at a time, and they will hear the column and row headers spoken to them. These tables are responsive but they must be made accessible. Learn how to Create Accessible Tables. Contact your OU Campus Account Administrator for assistance if needed.

How to set the properties:
Row Properties: right-click in row, select > Row > Row Properties, change the Row Type to Header, Body, or Footer.
Cell Properties: right-click, select > Cell Properties > change the Cell type to Header Cell or Cell, and set the Scope to Row, Column, Row Group, or Column Group. 
Bootstrap Table; just lines with no borders or cells
     
     
Bootstrap Table with borders; cells with lines between them
     
     
Bordered Table

A bordered table wraps a border around the content.

Condensed Bordered Table

Condensed Bordered Table

Condensed Bootstrap Table; narrow lines without borders (no cells)
     
     
     
Bootstrap Table with hover state; when hovering over a line it changes from white to gray (no cells) 
     
     
     
Striped Bootstrap Table; lines alternate between gray and white
     
     
     
Bootstrap Table (stripe hover); lines alternate between gray and white until hovering over white line it turns gray.
     
     
     
Bootstrap Table (border stripe hover); table has borders around each cell, lines alternate between gray and white until hovering over a white line it changes to gray.
     
     
     
Condensed Bootstrap Table (strip hover); lines alternate between gray and white until hovering over a white line it changes to gray (no cells).
     
     
     
Condensed Bootstrap Table (border strip hover); table has borders around each cell, lines alternate between gray and white until hovering over white lines it changes to gray, line spaces are slightly narrow.
     
     
     
     

Well

This is used as a callout to draw attention to information.

The Well class adds a light gray color background for information contained in this class.