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 Arrow
The text is left aligned with an arrow to the far right.
Center Block with Images
Centers the image on the page.
Image Rounded (subtle rounding of image corners)
Rounded corners of image is very subtle.
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.
Example of Image Circle class inside a 3 column snippet (table):
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.
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
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:
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.