Back to Top
Skip to Site Search Skip to Utility Nav Skip to Top Nav Skip to Left Nav Skip to Content
Close Main Menu

6.20 Tabs or Expandable

The 'Tabs or Expandable' block provides an easy method to create either tabs or expandable areas.  Both of these display options allow for condensing large amounts of content into manageable chunks of information for a page visitor.

Best Usages

  • Tabs work great for condensing information that would normally be on different pages into one page. For example, information on an upcoming conference could be displayed on one page using tabs: About the Conference / Program / Venue / Register.
  • Expandables work great for content such as frequently asked questions, information separated by campus, or steps a user should follow.
  • For the presentation of lengthy or complex information, sections and columns can be added to both tabs and expandables.

Example

A 'live' web page that is using an expandable block. The block of content is outlined and has an arrow pointing to it, clicking will take you to the Graduate Studies, physical therapy web page

Styles & Usage

Style Options

The style types that are available for this block are listed below:

Tabs

Type 1: Light Option

image of tabs with light design option

Type 2: Dark Option

image of tabs with dark design option

Type 3: Blue-Gold Option

image of tabs with blue and gold design option

Type 4: White

Expandables

Expandables have an option to expand and collapse all buttons option. You can also have an expandable open by default.
See an example in our writing style guide.

expand all button for expandablescollapse all button for expandables

Type 1: H2 Heading

H2 Heading

This is the text that you put into the wysiwyg, or text editing area, for the block. Adding text here allow you to add hyperlinks into your text. It also allows for more text. Here is one more sentence.

Type 2: H3 Heading

H3 Heading

This is the text that you put into the wysiwyg, or text editing area, for the block. Adding text here allow you to add hyperlinks into your text. It also allows for more text. Here is one more sentence.

Type 3: H4 Heading

H4 Heading

This is the text that you put into the wysiwyg, or text editing area, for the block. Adding text here allow you to add hyperlinks into your text. It also allows for more text. Here is one more sentence.

Type 4: Gray Heading

Gray Heading

This is the text that you put into the wysiwyg, or text editing area, for the block. Adding text here allow you to add hyperlinks into your text. It also allows for more text. Here is one more sentence.

Type 5: White Heading

White Heading

This is the text that you put into the wysiwyg, or text editing area, for the block. Adding text here allow you to add hyperlinks into your text. It also allows for more text. Here is one more sentence.

Where to Use

The diagrams below will help you determine where this block can be used. The "Y" inside the box, green yes square, means this block can go in to this column or space. The ''N' inside the box, red no square means this block can't go in this column or space.

Tabs

Expandables

Quick Reference

Tabs

Naming Convention

  • Name of block should always begin with tabs-sm-

Please be sure to double check your naming structure to ensure there are no spaces in between any words or dashes. Any space in the name will disrupt the functionality of your block.

Correct: tabs-sm-fall-signup

Incorrect: tabs-sm -fall-signup

Character Limits

  • N/A

What can I add to this block?

  • Links? Yes
  • Other Blocks? Yes

Expandables

Naming Convention

  • Name of block should always begin with exp- and should never end with a number

Character Limits

  • Tab Text/Headings - 15 characters
  • Content - unlimited

What can I add to this block?

  • Links? Yes
  • Other Blocks? Yes, but use with caution. 
    • Images or Slideshow
    • Links - Featured or Related
    • Basic Text - plain or boxed
  • Columns? Yes
  • Sections? Yes

UNG follows Section 508 Standards and WCAG 2.0 for web accessibility. If you require the content on this web page in another format, please contact the ADA Coordinator.

Back to Top