Tabs

Description

Tabs make it easy to explore and switch between a lot of content in a limited space, especially for step-by-step directions or to present content that has been categorized into smaller sections. Keep tab headings short so that the content fits easily on one line.

Adding Tabs to a Page

To add a tab container, click the + button in a column and select Tab Container from the dialog.

The Tab Container contains the following fields:

  • Type: either horizontal or vertical display of the tabs
  • Link: optional link to more content

Once the container is added to the page, click the + button inside it and add a Tab Item.

To edit existing tab items, hover over the block and click the edit button from the context menu.

The tab item contains the following fields:

  • Icon: optional icon to add next to the tab title
  • Title: the text that will be used as the label of the tab. Be careful not to use too much text here.
  • Content: a full-featured WYSIWYG editor for the content inside the tab. The page will accommodate whatever you put here, but the transition when you click a different tab will look better if the content in different tabs similar in size.

In addition to editing the contents, the context menu allows you to move the tab item or container to a different location in the layout, copy the block and its contents, or delete the block.

Once you are finished making changes, click Publish or Update on the right side of the page to make your changes live.

Examples

View More
  • Tab Title 1
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer vel sapien malesuada, posuere nulla eu, consequat purus. Nullam quis dictum tellus. Vestibulum varius arcu gravida magna imperdiet, sed molestie diam hendrerit. Fusce ut velit at sapien ullamcorper pulvinar et id diam. In porttitor justo ullamcorper leo tincidunt, id molestie turpis malesuada. Proin rhoncus, mauris sit amet feugiat tristique, lorem nunc consequat augue, euismod viverra enim quam sed ipsum. In suscipit non tellus nec eleifend. Nulla iaculis purus quam. Aenean egestas, magna tempus suscipit semper, nisi ante ultricies nisl, eu lobortis orci turpis volutpat mi. In finibus dapibus arcu, nec blandit ante faucibus non. Curabitur molestie interdum dictum. Quisque euismod fermentum eros, sit amet egestas tortor iaculis ac.
  • Table Title 2

    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer vel sapien malesuada, posuere nulla eu, consequat purus. Nullam quis dictum tellus. Vestibulum varius arcu gravida magna imperdiet, sed molestie diam hendrerit. Fusce ut velit at sapien ullamcorper pulvinar et id diam. In porttitor justo ullamcorper leo tincidunt, id molestie turpis malesuada. Proin rhoncus, mauris sit amet feugiat tristique, lorem nunc consequat augue, euismod viverra enim quam sed ipsum. In suscipit non tellus nec eleifend. Nulla iaculis purus quam. Aenean egestas, magna tempus suscipit semper, nisi ante ultricies nisl, eu lobortis orci turpis volutpat mi. In finibus dapibus arcu, nec blandit ante faucibus non. Curabitur molestie interdum dictum. Quisque euismod fermentum eros, sit amet egestas tortor iaculis ac.

    Quisque venenatis ipsum et neque tincidunt, vitae blandit metus consequat. Sed eget sem in libero venenatis aliquam. Nam sit amet dui scelerisque mauris tincidunt consectetur in eget lacus. Ut ac ullamcorper metus. Etiam et ultrices tortor. Nulla auctor nec urna et tincidunt. Quisque sit amet gravida nibh. Cras porta risus id rhoncus tristique. Aliquam nisi dolor, consectetur a ligula sed, blandit faucibus ex. Donec sollicitudin eu risus a convallis. Ut mauris erat, scelerisque sit amet eros in, consectetur ultricies lorem.

  • Tab Title 3

    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer vel sapien malesuada, posuere nulla eu, consequat purus. Nullam quis dictum tellus. Vestibulum varius arcu gravida magna imperdiet, sed molestie diam hendrerit. Fusce ut velit at sapien ullamcorper pulvinar et id diam. In porttitor justo ullamcorper leo tincidunt, id molestie turpis malesuada. Proin rhoncus, mauris sit amet feugiat tristique, lorem nunc consequat augue, euismod viverra enim quam sed ipsum.

  • Tab Title 1
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer vel sapien malesuada, posuere nulla eu, consequat purus. Nullam quis dictum tellus. Vestibulum varius arcu gravida magna imperdiet, sed molestie diam hendrerit. Fusce ut velit at sapien ullamcorper pulvinar et id diam. In porttitor justo ullamcorper leo tincidunt, id molestie turpis malesuada. Proin rhoncus, mauris sit amet feugiat tristique, lorem nunc consequat augue, euismod viverra enim quam sed ipsum. In suscipit non tellus nec eleifend. Nulla iaculis purus quam. Aenean egestas, magna tempus suscipit semper, nisi ante ultricies nisl, eu lobortis orci turpis volutpat mi. In finibus dapibus arcu, nec blandit ante faucibus non. Curabitur molestie interdum dictum. Quisque euismod fermentum eros, sit amet egestas tortor iaculis ac.
  • Table Title 2

    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer vel sapien malesuada, posuere nulla eu, consequat purus. Nullam quis dictum tellus. Vestibulum varius arcu gravida magna imperdiet, sed molestie diam hendrerit. Fusce ut velit at sapien ullamcorper pulvinar et id diam. In porttitor justo ullamcorper leo tincidunt, id molestie turpis malesuada. Proin rhoncus, mauris sit amet feugiat tristique, lorem nunc consequat augue, euismod viverra enim quam sed ipsum. In suscipit non tellus nec eleifend. Nulla iaculis purus quam. Aenean egestas, magna tempus suscipit semper, nisi ante ultricies nisl, eu lobortis orci turpis volutpat mi. In finibus dapibus arcu, nec blandit ante faucibus non. Curabitur molestie interdum dictum. Quisque euismod fermentum eros, sit amet egestas tortor iaculis ac.

    Quisque venenatis ipsum et neque tincidunt, vitae blandit metus consequat. Sed eget sem in libero venenatis aliquam. Nam sit amet dui scelerisque mauris tincidunt consectetur in eget lacus. Ut ac ullamcorper metus. Etiam et ultrices tortor. Nulla auctor nec urna et tincidunt. Quisque sit amet gravida nibh. Cras porta risus id rhoncus tristique. Aliquam nisi dolor, consectetur a ligula sed, blandit faucibus ex. Donec sollicitudin eu risus a convallis. Ut mauris erat, scelerisque sit amet eros in, consectetur ultricies lorem.

  • Tab Title 3

    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer vel sapien malesuada, posuere nulla eu, consequat purus. Nullam quis dictum tellus. Vestibulum varius arcu gravida magna imperdiet, sed molestie diam hendrerit. Fusce ut velit at sapien ullamcorper pulvinar et id diam. In porttitor justo ullamcorper leo tincidunt, id molestie turpis malesuada. Proin rhoncus, mauris sit amet feugiat tristique, lorem nunc consequat augue, euismod viverra enim quam sed ipsum.