List Type Tabs

Add this class list-type-tabs to a Rich text or other modules with an unordered list and plain links (like the Post Listing module or Post Filter) to make the links look like tabs. Please make sure your module contains only links in an unordered list.

A lot easier to use is an Act21 List module that has all these options built-in, so classes are not required there.

Act2 List Type Tabs Sample

If you use Rich Text make sure to use a recognizable name for your module. It may be hard to edit inline in the Page Editor, due to its design. You will most likely need to find the module in the sidebar on the left.

Alternatively, you can use an Act21 HTML module, with a coded list, like this:

<ul>
    <li><a href="#link1">Link 1</a></li>
    <li><a href="#link2">Link 2</a></li>
    <li><a href="#link3">Link 3</a></li>
</ul>

You can also add this class no-bottom-border if you want to remove the border at the bottom:

Act2 List Type Tabs No Bottom Border Sample

All elements will automatically be white if placed in a container with the white-content class:

Act2 List Type Tabs White Content Sample

If you use this type of list as the navigation of other Act2 components (like Tabs or Listing), there will be a special CSS class applied to the active link: active. There are a few additional classes that you can use here to modify that link:

CSS Class Sample (with the default theme colors) Description
active-text-theme Act2 List Type Tabs Sample Modifies the active link's text
active-border-theme Act2 List Type Tabs Active Border Theme Sample Useful on white content
active-border-dark Act2 List Type Tabs Active Border Dark Sample Makes the active border dark
Using Act2 with the old Design Manager? Read this documentation.