Tabs

Creating Components

On this page:

Tab example

Lorem ipsum dolor sit amet curabitur 

Sit amet curabitur tristique suspendisse dignissim. Interdum id diam egestas ultricies at natoque odio sodales mi eu praesent. Cubilia blandit consectetuer vestibulum in augue. A accumsan porttitor condimentum taciti commodo. Molestie quam mi cursus nunc senectus nam. Auctor fusce cursus ridiculus gravida convallis magnis metus consequat torquent. Aliquet ipsum felis mus sagittis molestie interdum venenatis fringilla egestas litora habitant.

Placerat elementum penatibus aptent sociosqu tortor. Imperdiet vitae lorem adipiscing urna luctus hac litora massa scelerisque fringilla. Dictum nam nisi laoreet accumsan nibh integer purus pellentesque. Non facilisis duis cras suscipit ridiculus si gravida iaculis. Aliquam consequat facilisis eget iaculis euismod lobortis fames. Congue dictum suspendisse turpis quam nisi rutrum curae lectus mus in sollicitudin. Nam vivamus conubia mattis curabitur eu ligula metus class. Consequat pede mauris nullam duis imperdiet sem.

Lorem ipsum dolor sit amet curabitur 

Sit amet curabitur tristique suspendisse dignissim. Interdum id diam egestas ultricies at natoque odio sodales mi eu praesent. Cubilia blandit consectetuer vestibulum in augue. A accumsan porttitor condimentum taciti commodo. Molestie quam mi cursus nunc senectus nam. Auctor fusce cursus ridiculus gravida convallis magnis metus consequat torquent. Aliquet ipsum felis mus sagittis molestie interdum venenatis fringilla egestas litora habitant.

Placerat elementum penatibus aptent sociosqu tortor. Imperdiet vitae lorem adipiscing urna luctus hac litora massa scelerisque fringilla. Dictum nam nisi laoreet accumsan nibh integer purus pellentesque. Non facilisis duis cras suscipit ridiculus si gravida iaculis. Aliquam consequat facilisis eget iaculis euismod lobortis fames. Congue dictum suspendisse turpis quam nisi rutrum curae lectus mus in sollicitudin. Nam vivamus conubia mattis curabitur eu ligula metus class. Consequat pede mauris nullam duis imperdiet sem.

Lorem ipsum dolor sit amet curabitur 

Sit amet curabitur tristique suspendisse dignissim. Interdum id diam egestas ultricies at natoque odio sodales mi eu praesent. Cubilia blandit consectetuer vestibulum in augue. A accumsan porttitor condimentum taciti commodo. Molestie quam mi cursus nunc senectus nam. Auctor fusce cursus ridiculus gravida convallis magnis metus consequat torquent. Aliquet ipsum felis mus sagittis molestie interdum venenatis fringilla egestas litora habitant.

Placerat elementum penatibus aptent sociosqu tortor. Imperdiet vitae lorem adipiscing urna luctus hac litora massa scelerisque fringilla. Dictum nam nisi laoreet accumsan nibh integer purus pellentesque. Non facilisis duis cras suscipit ridiculus si gravida iaculis. Aliquam consequat facilisis eget iaculis euismod lobortis fames. Congue dictum suspendisse turpis quam nisi rutrum curae lectus mus in sollicitudin. Nam vivamus conubia mattis curabitur eu ligula metus class. Consequat pede mauris nullam duis imperdiet sem.

What is an Tab?

Tabs is a clickable area at the top of the component that displays a new page area when selected.

How to add an accordion

  1. Click the edit link at the top of the page 

    Example of selecting the edit button on a page
  2. Move your cursor where you want to place the component. (Add a section if needed). 

  3. Click the plus icon.

    Example of the plus icon with a red square around the icon

  4. Select Tab from the menu.

    Choose tabs from menu

Content 

  1. Add a Title.
    Note: Title field text is limited to 70 characters.

  2. Add your Text into the WYSIWYG Content Editor.
    Note: Visit this page to learn more about how to use the WYSIWYG Content Editor. The text is limited to 300 characters

    Adding tab content: title and text.

  3. Click Add Tab.

    Add a tab
  4. Repeat steps 1 to 3 for each Tab. 

Styles 

  1. Toggle to the Styles tab. 

    Example of the Styles option selected
  2. Select the amount of additional space you would like above the component. 

  3. Select the amount of additional space you would like below the component. 
    Note: By default, there is no space below a component.

    Example of the top and bottom margin drop-down section with a red box around it

Save

  1. Click Save.

  2. Scroll to the top of the page and click Save.

    An example of how to save both the component and the page. The save buttons for both are outlined in red to emphasize the action.

  3. Click the Done button beside the save button.
    Note: This will display the page in the closest representation of how site visitors will view it. All links and actions that are disabled in editing mode will be functional now.
     

    Example: of the Done button outlined