6.19 Tabs - Large

If you are interested in this type of tabs, please contact the webteam via ServiceNow (login required).

Best usages

  • Displaying information in a step-by-step format [maximum of seven steps].
  • Displaying categories of information where each category has a different call to action.

Example

A 'live' web page that is using a tab block. The block is outlined and has an arrow pointing to it, clicking will take you to the Undergraduate Admissions web page

Styles & Usage

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

Type 1: Blank Tabs

blank tabs

See a live example here

Type 2: Step Tabs

step tabs

See a live example here (in the Applying to UNG expandable)

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.

Flex Page with No Sidebar

The tabs block should only be used in columns larger than two wide on the flex page with no sidebar template.

Flex Page with Sidebar

The tabs block should not be used in the sidebar on the flex page with sidebar template.

Administrator Only Block

Naming Convention

  • Name of block should always begin with tabs-lg- or tabs-step-

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-lg-fall-signup

Incorrect: tabs lg-fall -signup

Character Limits

  • Tab text - 40 characters
  • Button text - 15 characters

What can I add to this block?

  • Links? Yes
  • Other Blocks? Yes
  • Columns? Yes
  • Sections? Yes