Tab

Use tabs as an interactive way to avoid scrolling over items that you don't need everyone to see. Allow visitors to create their own site experience by concentrating their focus on items they choose to click on.


Site Goal(s): | Use Case(s):

Arrow Left

  • Orientation: Vertical
  • Style Options: Style 2
  • Content Type: Text content
  • Content Background: Color
  • Icon Positioning: Left

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec odio. Quisque volutpat mattis eros. Nullam malesuada erat ut turpis. Suspendisse urna nibh, viverra non, semper suscipit, posuere a, pede.

  • Vestibulum auctor dapibus neque.
  • Nunc dignissim risus id metus.
  • Cras ornare tristique elit.

Etiam erat velit scelerisque in dictum non. Venenatis cras sed felis eget velit. Egestas fringilla phasellus faucibus scelerisque eleifend donec pretium vulputate. Convallis a cras semper auctor neque vitae tempus quam pellentesque. Donec pretium vulputate sapien nec sagittis aliquam malesuada. Duis ut diam quam nulla porttitor massa id neque. Nulla posuere sollicitudin aliquam ultrices. 

Morbi in sem quis dui placerat ornare. Pellentesque odio nisi, euismod in, pharetra a, ultricies in, diam. Phasellus ultrices nulla quis nibh. Quisque a lectus. Donec consectetuer ligula vulputate sem tristique cursus.

  • ivamus vestibulum nulla nec ante.
  • Praesent placerat risus quis eros.
  • Fusce pellentesque suscipit nibh.

Praesent dapibus, neque id cursus faucibus, tortor neque egestas augue, eu vulputate magna eros eu erat. Aliquam erat volutpat. Nam dui mi, tincidunt quis, accumsan porttitor, facilisis luctus, metus.

  • Vestibulum commodo felis quis tortor.
  • Ut aliquam sollicitudin leo.
  • Cras iaculis ultricies nulla.

Praesent dapibus, neque id cursus faucibus, tortor neque egestas augue, eu vulputate magna eros eu erat. Aliquam erat volutpat. Nam dui mi, tincidunt quis, accumsan porttitor, facilisis luctus, metus.

  • Vestibulum auctor dapibus neque.
  • Nunc dignissim risus id metus.
  • Cras ornare tristique elit.

Arrow Top

  • Orientation: Horizontal
  • Style Options: Style 7
  • Content Type: Text content
  • Content Background: Image
  • Icon Positioning: Top

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec odio. Quisque volutpat mattis eros. Nullam malesuada erat ut turpis. Suspendisse urna nibh, viverra non, semper suscipit, posuere a, pede.

  • ivamus vestibulum nulla nec ante.
  • Praesent placerat risus quis eros.
  • Fusce pellentesque suscipit nibh.

Morbi in sem quis dui placerat ornare. Pellentesque odio nisi, euismod in, pharetra a, ultricies in, diam. Phasellus ultrices nulla quis nibh. Quisque a lectus. Donec consectetuer ligula vulputate sem tristique cursus.

  • ivamus vestibulum nulla nec ante.
  • Praesent placerat risus quis eros.
  • Fusce pellentesque suscipit nibh.

Praesent dapibus, neque id cursus faucibus, tortor neque egestas augue, eu vulputate magna eros eu erat. Aliquam erat volutpat. Nam dui mi, tincidunt quis, accumsan porttitor, facilisis luctus, metus.

  • Vestibulum commodo felis quis tortor.
  • Ut aliquam sollicitudin leo.
  • Cras iaculis ultricies nulla.

Topline

  • Orientation: Horizontal
  • Style Options: Topline
  • Content Type: Text content
  • Content Background: Overlay
  • Tab Style: Full
  • Highlight Border Style: Bottom
  • Icon Positioning: Top
Donec odio

Morbi in sem quis dui placerat ornare. Pellentesque odio nisi, euismod in, pharetra a, ultricies in, diam. Phasellus ultrices nulla quis nibh. Quisque a lectus. Donec consectetuer ligula vulputate sem tristique cursus.

  • ivamus vestibulum nulla nec ante.
  • Praesent placerat risus quis eros.
  • Fusce pellentesque suscipit nibh.

Non diam phasellus vestibulum lorem sed risus. Velit scelerisque in dictum non consectetur a. Etiam erat velit scelerisque in dictum non. Venenatis cras sed felis eget velit. Egestas fringilla phasellus faucibus scelerisque eleifend donec pretium vulputate.

Aliquam erat

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec odio. Quisque volutpat mattis eros. Nullam malesuada erat ut turpis. Suspendisse urna nibh, viverra non, semper suscipit, posuere a, pede.

  • Vestibulum auctor dapibus neque.
  • Nunc dignissim risus id metus.
  • Cras ornare tristique elit.
Magna eros

Praesent dapibus, neque id cursus faucibus, tortor neque egestas augue, eu vulputate magna eros eu erat. Aliquam erat volutpat. Nam dui mi, tincidunt quis, accumsan porttitor, facilisis luctus, metus.

  • Vestibulum commodo felis quis tortor.
  • Ut aliquam sollicitudin leo.
  • Cras iaculis ultricies nulla.

Bar

  • Orientation: Horizontal
  • Style Options: Bar
  • Content Type: Text content
  • Content Background: Color 
  • Tab Style: Inline + tab spacing
  • Icon Positioning: Icon disabled
Donec odio

Morbi in sem quis dui placerat ornare. Pellentesque odio nisi, euismod in, pharetra a, ultricies in, diam. Phasellus ultrices nulla quis nibh. Quisque a lectus. Donec consectetuer ligula vulputate sem tristique cursus.

  • ivamus vestibulum nulla nec ante.
  • Praesent placerat risus quis eros.
  • Fusce pellentesque suscipit nibh.
Aliquam erat

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec odio. Quisque volutpat mattis eros. Nullam malesuada erat ut turpis. Suspendisse urna nibh, viverra non, semper suscipit, posuere a, pede.

  • Vestibulum auctor dapibus neque.
  • Nunc dignissim risus id metus.
  • Cras ornare tristique elit.
Magna eros

Praesent dapibus, neque id cursus faucibus, tortor neque egestas augue, eu vulputate magna eros eu erat. Aliquam erat volutpat. Nam dui mi, tincidunt quis, accumsan porttitor, facilisis luctus, metus.

  • Vestibulum commodo felis quis tortor.
  • Ut aliquam sollicitudin leo.
  • Cras iaculis ultricies nulla.