Section Tabs

Purpose

Allows navigation between content within a single section on in-page.

Example

320 Section Tabs
680 Section Tabs
1280 Section Tabs

Live Examples

Profile Page (see Activity section), Your Account page

Description

A navigation component used to navigate between related content in a section, for instance the different possible account settings, or the user info around following/followers on a profile page.

Elements

`.m-section-tabs` - Outer container
`.m-section-tabs__items` - Used on the `ul` to remove default styles
`.m-section-tabs__item` - Class for each link item
`.m-section-tabs__item-link` - Sets the link colour pink

`.m-section-tabs__item-label-title` - Sets the selected item as blue (must be nested in `.is-selected` class on parent `li`)

Variants

.m-section-tabs--condensed

This removes the margin-bottom to pull content closer.

.m-section-tabs--after-page-header

The adds a top margin as well as bottom margin to space evenly.

Added by: