Version:

Acquia Cohesion renames to Site Studio from version 6.2. Tell me more.

UIKit tab components

Tab components are used for adding tabbed content to a layout. There are three tab components included with the UIKit,  each of which is documented below.

Tabs container -  horizontal tabs component

The Tabs container - horizontal tabs provide the container for each Tab item to be displayed in a row above the content. Important information to understand about the component is listed below.

Layout canvas elements

  • Container - The container must optionally add a margin below the tabbed content or add a background color to the tabbed content.
  • Accordion tabs container - The Accordion tabs container provides the tabs' functionality and the style for the tabs navigation.

The style for the tabs navigation would normally be applied to each Tab item. For the UIKit, the style has been applied to the Accordion tabs container to make it more convenient for content authors to apply the style in one place. This has been achieved using Custom styles that target the tab navigation elements. These styles within the Generic custom style category and are: Accordion tabs keyline light textAccordion tabs keyline dark text, and Accordion tabs solid.

Component form fields

  • Tab position - Select the desired tab alignment.
  • Navigation style - Sets the style of the tab navigation links. 
  • Background color - Sets a background color on the tab container.
  • Add space below - Adds a space (margin) below the tab container. This is required if a space is desirable when adding this component above another component within the same parent layout component.

Tabs container -  vertical tabs component

The Tabs container - vertical tabs provides the container for each Tab item to be displayed vertically to the left of the content. Important information to understand about the component is listed below.

Layout canvas elements

  • Container - The container is required to optionally add a margin below the tabbed content or to add a background color to the tabbed content.
  • Accordion tabs container - The Accordion tabs container provides the tabs' functionality and the style for the tabs navigation. 

Within the Accordion container Styles tab there is a Modifier that applies additional space between the Tabs and the Tab content.

The style for the tabs navigation would normally be applied to each Tab item. For the UIKit, the style has been applied to the Accordion tabs container to make it more convenient for content authors to apply the style in one place. This has been achieved using Custom styles that target the tab navigation elements. These styles within the Generic custom style category and are: Accordion tabs keyline light textAccordion tabs keyline dark text and Accordion tabs solid.

Component form fields

  • Navigation style - Sets the style of the tab navigation links.
  • Add space between navigation and content - Adds additional space between the tabs and the navigation
  • Background color - Sets a background color on the tab container.
  • Add space below - Adds a space (margin) below the tab container. This is required if a space is desirable when adding this component above another component within the same parent layout component.

Tab item component

The Tab item provides each tab navigation bar.

Layout canvas fields

  • Accordion tabs item - Provides the navigation bar
  • Container - Provides a wrapping div to the content to optionally apply padding around the content

Component form fields

  • Navigation label - Provides the text for the tab navigation buttons.
  • Background color - Adds a background color to each individual tab content area.
  • Padding around content - Adds padding around the content within the Accordion item.
DX8 knowledge base icon

Frequently asked questions

Get instant answers to common questions. Available online 24/7.

Find answers

Raise a ticket icon

Raise a support ticket

To raise a ticket, sign into Acquia Cloud and select Help in the top menu.

Raise support ticket

Acquia

Copyright © 2020 Acquia, Inc. All Rights Reserved. Drupal is a registered trademark of Dries Buytaert.