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.

Standard Button Style

This is set with the "Insert/edit link" (chain link icon) tool by selecting "Standard White Button" from the class drop-down. Do not use the "Styles" drop-down setting in the top WYSIWYG Editor Toolbar.

Standard Example Button

Enhanced Button Style

This is set with the "Insert/edit link" (chain link icon) tool by selecting "Enhanced Blue Button" from the class drop-down. Do not use the "Styles" drop-down setting in the top WYSIWYG Editor Toolbar.

Ehanced Example Button

Full Width Button Snippet

To insert: from the WYSIWYG Editor Toolbar, click "Insert Snippet" (puzzle piece icon) and select "Button - Full Width"

FUll Width Standard Example Button

---

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.

Example Link

---

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"

To add a drop-down: right click on the row before/after where you'd like to insert, and select "Delete row" or "Row > Insert row before/after" - you will need to add two rows for this snippet, one for the drop-down Expand Title, and one for the Content Area. The Title text can be adjusted to set the proper heading level.

To remove a drop-down: right click on the row you'd like to delete, and select "Delete row" - you will need to remove both rows associated (Expand Title and Content Area).

---

Tab Structure

To insert: from the WYSIWYG Editor Toolbar, click "Insert Snippet" (puzzle piece icon) and select "Tabs"

To add a tab: right click on the row before/after where you'd like to insert, and select "Row > Insert row before/after" - you will need to add two rows for this snippet, one for the Tab Title, and one for the Tab Content area. The Tab Title text cannot be adjusted to set the proper heading level - it must be added to with the content space.

To remove a tab: right click on the row you'd like to delete, and select "Delete row" - you will need to remove both rows associated (Tab Title and Tab Content).

---

Quotes

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.

Split Columns

The Split Columns layout divides a content block into two side-by-side sections on desktop, while stacking the content in mobile view.

To insert: from the WYSIWYG Editor Toolbar, click "Insert Snippet" (puzzle piece icon) and select "Split Columns"

Continous Columns

The Continuous Columns layout arranges content in columns that remain side by side and flow continuously, rather than stacking, across different screen sizes. The content will stack in mobile view.

To insert: from the WYSIWYG Editor Toolbar, click "Insert Snippet" (puzzle piece icon) and select "Continuous Columns"

---

List Styles

To insert: list style formatting is found on the WYSIWYG Editor Toolbar.

---

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"

To add a row or column: right click on the row/column before/after where you'd like to insert, and select "Row/Column > Insert row/column before/after"

To remove a row or column: right click on the row/column you'd like to delete, and select "Row/Column > Delete row/column"

---

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"

To add a row: right click on the row before/after where you'd like to insert, and select "Row > Insert row before/after"

To remove a row: right click on the row you'd like to delete, and select "Row > Delete row"

---

Large Image with Caption

To insert: from the WYSIWYG Editor Toolbar, click "Insert Snippet" (puzzle piece icon) and select "Large Image + Caption"

---

Staff Information Displays

1-Column Directory

To insert: from the WYSIWYG Editor Toolbar, click "Insert Snippet" (puzzle piece icon) and select "1-Column Directory"

To add a row: right click on the row before/after where you'd like to insert, and select "Row > Insert row before/after"

To remove a row: right click on the row you'd like to delete, and select "Row > Delete row"

Please note: The Name column content can be set with the proper heading level. All data must be included for this snippet to display properly.

3-Column Directory

To insert: from the WYSIWYG Editor Toolbar, click "Insert Snippet" (puzzle piece icon) and select "3-Column Directory"

Please note: The Name column content can be set with the proper heading level. All data must be included for this snippet to display properly.