¹ú²ú×ÔÅÄ

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.

• 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, 
• For the presentation of lengthy or complex information, sections, rows, columns, and blocks can be added to both tabs and expandables.
• Expandables or tabs can be used to show "steps" a user should follow.
  • Tabs have a "Step" type that auto fills in steps for each item.

Guidelines & Tips

• Tabs offer a variety of style options
  • Tab header is optional
  • Default Item Header sizes (tab header) are 16px
    • Can choose 20px, 24px, 28px
  • Each Item's content can be configured with sections, rows, and columns
  • Background color can be set at the row level and column level
    • Default color chosen is white at the block level
      • Setting the color to default will inherit the row color

Naming Convention

• tab-
  • tab-vert
  • tab-top
• tab-step
  
  • tab-step-vert
  • tab-step-top

tab-top-