Expandables & Tabs

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.

Expandables

Guidelines & Tips

  • Expandables offer a variety of style options
    • Expandable header is optional
    • Default Item Header sizes (tab header) are 16px
      • Can choose 20px, 24px, 28px
    • Expandable background color can be set at the block level, row level and column level
      • Default color chosen is white at the block level
        • Setting the color to default will inherit the row color
  • Expandables can be set to be opened or closed
    • Default is all closed, but can set all to be open or select items that are open by default.
  • Expandables are usually set to 1 column but can be set in a 2 or 3 column layout as well.

Naming Convention

  • exp-
    • exp-2-
    • exp-3-
  • tab-
    • tab-vert
    • tab-top
  • tab-step
    • tab-step-vert
    • tab-step-top
exp-

Expandable Set to Column Count 1 (Default)

Block BG Color - Dark Blue - Tab Header Size - 20px

Block BG Color - Dark Grey - Tab Header Size - 24px

Block BG Color - Light Blue - Tab Header Size - 24px

exp-2-

Expandable Set to Column Count 2

exp-3

Expandable Set to Column Count 3

Tabs

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-

Tab (default

Row Header - 12 Col - Row BG - Default

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

img-1-675x450.jpg

Row Header - 8 Col - Row BG - Dark Grey

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

img-1-675x450.jpg

Row Header - 8 Col Centered - Row BG - Dark Blue

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

img-1-675x450.jpg

Row Header

There is no character limit, but we recommend keeping it as short as possible and consistent.

The tab header height will auto adjust to the tallest one.

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

img-1-675x450.jpg

tab-step-top

Step Tabs

Row Header

Register....

Row Header

Apply...

Row Header

Accept...

tab-step

Tab (default

Row Header - 12 Col - Row BG - Default

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

img-1-675x450.jpg

Row Header - 8 Col - Row BG - Dark Grey

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

img-1-675x450.jpg

Row Header - 8 Col Centered - Row BG - Dark Blue

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

 

 

img-1-675x450.jpg

Row Header

There is no character limit, but we recommend keeping it as short as possible and consistent.

The tab header height will auto adjust to the tallest one.

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

img-1-675x450.jpg

tab-vert

Tab (default

  • Item 1 Header
  • Item 2 Header
  • Item 3 Header
  • Character Limit?
  • Another Tab
  • Six Items Max Before Wrapping

Row Header - 12 Col - Row BG - Default

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

img-1-675x450.jpg

Row Header - 8 Col - Row BG - Dark Grey

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

img-1-675x450.jpg

Row Header - 8 Col Centered - Row BG - Dark Blue

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

img-1-675x450.jpg

Row Header

There is no character limit, but we recommend keeping it as short as possible and consistent.

The tab header height will auto adjust to the tallest one.

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

img-1-675x450.jpg

tab-step-vert

Step Tabs

  • Step 1
  • Step 2
  • Step 3

Row Header

Register....

Row Header

Apply...

Row Header

Accept...