Tabs Element

Organize content in Tabs.

Overview

The Tab element allows you to organize your content.

However it hides content from the user, so make sure you have a descriptive title.

Usage Examples

  • Display of different topics or subjects.
  • Organizing related information.
  • ...

Tabs Properties

  1. Tab style: Choose between different styles on how the tabs should be presented. 
Tab Item properties
  1. Tab Title: Set the title for the tab
  2. Tab Icon: Add an optional Icon for the Tab
  3. Tab Content: Add any element including a Grid to a Tab directly.

Everything else can be configured with the common general properties. 
Accordion Element Wireframe

See it in action

  • Tab with Text
  • Tab with a button
Mame Builder

Tab with a Grid, an image and formatted Text

Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore..  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
Some formatted Text (HTML) content for the first Tab. You can add any content to a Tab Element.

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.
Tab with an formatted text (HTML) and a button.

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.

Interactions and Accessibility

Users can navigate between Tabs by pressing Tab on the keyboard and open them by pressing Enter. Tabs are WAI-Aria compliant and implement all necessary attributes.

Generated HTML


<div class="mame-element mame-tabs" style="..">
   <div class="tabs>
     <ul class="tabs__list" role="tabslist">
       <li tabindex="-1" class="active" role="tab">Tab with Text</li>
       ...
     </ul>
     <div class="tabs__panel active" tabindex="0" role="tabpanel" aria-labelledby="Tab with Text">
       ..
     </div>
   </div>
</div>

Style / CSS Selectors


.mame-tabs {
  /* All tab element containers */
}

.mame-tabs .tabs {
  /* All tab elements */
} 

.tabs__list {
  /* The tab buttons / header */
}

.tabs__panel {
  /* Tab content */
}

JavaScript

Tabs need Mame's JavaScript to work properly.

Was this article helpful?