Interactive Elements and Formatting Options
Button Styles
To ensure a consistent user experience, the same button style is used across the entire UHCL.edu site. This is set with the "Insert/edit link" (chain link icon) tool by selecting "button" from the class drop-down.
Link Styles
Hyperlinks are shown in the UHCL Blue with a 40% transparent underline that becomes 100% upon hover. This is a universal style for all hyperlinks - including headings and sidebar content.
Accordion Structure
Accordions are used to consolidate a multitude of selection options or user pathways. They reduce scroll fatigue, as well as help to organize content to simplify the user's experience.
To insert: from the WYSIWYG Editor Toolbar, click "Insert Snippet" (puzzle piece icon) and select "Accordion"
Title 1
Content 2
Title 2
Content 2
Tab Structure
To insert: from the WYSIWYG Editor Toolbar, click "Insert Snippet" (puzzle piece icon) and select "Tabs"
Tab 1 title repeated as header
Content
Tab 2 title repeated as header
Content
Tab 3 title repeated as header
Content
Tab 4 title repeated as header
Content
Quotes
This is a blockquote featuring an excerpt from the page.
Author Name
A blockquote is a visual element that emphasizes a key excerpt, attracts the reader, and breaks up long blocks of text to provide an additive interest to the page.
If the text is being duplicated from the main content, make sure to place the blockquote further away from the original source.
To insert: highlight the content line you wish to format as a quote and select the "Blockquote" icon (quotation mark icon). This example was added to align with the top of first paragraph of this section by clicking to the left of "A blockquote is a visual element that..."
Two Column Layout
By utilizing two columns on a page, more content can be available to the user without having to scroll. In mobile view, the columns will respond to the smaller screen display and stack vertically.
To insert: from the WYSIWYG Editor Toolbar, click "Insert Snippet" (puzzle piece icon) and select "Split Columns"
Lorem ipsum dolor sit amet, modo affert tempor at mea, vis alia ignota an. Nullam habemus appellantur vim no. Vel ea epicurei forensibus, vis ad rebum populo diceret. Nec omnes ponderum no, ex eum tale munere verterem, nec discere periculis democritum ne.
Ne mel labore delicata erroribus, an his commune verterem, salutandi accommodare qui ut. Pro mediocrem similique cu, mei veniam contentiones ut, an feugiat civibus vim. Accusam scaevola usu at, his odio equidem patrioque in. In consul officiis vis, cum vidit periculis no. At eam simul percipit.
List Styles
To insert: list style formatting is found on the WYSIWYG Editor Toolbar.
Unordered List (Bulleted List)
- Column data
- Column data
- Column data
- Column data
Ordered List (Numbered List)
- Column data
- Column data
- Column data
- Column data
Tables
Tables should be used when presenting tabular data only and not used as a layout or formatting alternative.
To insert: from the WYSIWYG Editor Toolbar, click "Insert Snippet" (puzzle piece icon) and select "Pre-Styled Table"
| Column title | Column title 2 | Column title 3 | Column title 4 |
|---|---|---|---|
| 1 Column title | Lorem ipsum dolor sit amet, consectetur adipisicing elit. | 1 Column title | Lorem ipsum dolor sit amet, consectetur adipisicing elit. |
| 4 Column title | Lorem ipsum dolor sit amet, consectetur adipisicing elit. | 1 Column title | Lorem ipsum dolor sit amet, consectetur adipisicing elit. |
Block List
The block list formatting option should be used when presenting brief date/event information.
To insert: from the WYSIWYG Editor Toolbar, click "Insert Snippet" (puzzle piece icon) and select "Block List Widget"
- Upcoming Events
-
January 1Event Name
-
February 1Event Name