Interactive Elements

Button Styles

To ensure a consistent user experience, the same button style is used across the entire UHCL.edu site. All calls to action are assigned the UHCL Green with a 25% black overlay as the hover state. All navigation is in the UHCL blue with a 25% black overlay as the hover state.

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.

  Title 1
 

Content 1

  Title 2
 

Content 2

Tab Structure

Tab 1

A tabbed navigation structure can be used to separate related sections of content that require a clear indication of current location. Navigation tabs provide a clear visual indication of what content can be found in a subsection and places the content location in context by highlighting it.

Tab 2

Content 2

Tab 3

Content 3

Tab 4

Content 4