Tabs

A component to organize and navigate between related content at the same level of a website.

Usage#

  • Use Tabs to organize similar content groups on the same page.
  • This allows content to be viewed without having to navigate away from that page.
  • The tabs are used to show the weekly offers on the start page.

Overall styling#

  • Text-style is basic.
  • The line-height is 120%.

Desktop & tablet landscape (LG & MD)#

  • Dividers come in gray-dark as color with a 1px thickness.
  • The width is only scalable by adding up the different symbols (left, center or right).

tab: LG+MD

 TypesAttributesPreview
Active text-color: basic-black
background-color: basic-white		 tab: active (LG/MD)
 Hover / Focustext-color: basic-white
background-color: brand-primary-base		tab: hover-focus (LG/MD)
Inactivetext-color: gray-dark
background-color: gray-lighter		tab: inactive (LG/MD)

Elements#

  • In combination, these individual elements are combined to the complete tab component.
 TypesAttributesPreview
Left divider: none tab: left (LG/MD)
 Centerdivider: lefttab: center (LG/MD)
Rightdivider: lefttab: right (LG/MD)

Tablet portrait & smartphone (SM & XS)#

  • There is no inactive state.
  • The states can be switched via the slider-buttons.
  • Styling of the slider-buttons can be found here.

tab: SM+XS

TypesAttributes Preview
Activetext-color: basic-black
background-color: basic-white 		tab: active (SM/XS)
 Hover / Focustext-color: basic-black
background-color: basic-white		tab: hover-focus (LG/MD)

Spacing & measurements#

Desktop & tablet landscape (LG & MD)#

TypesAttributesPreview
Horizontal spacingpadding: 16pxLG/MD: horizontal spacing
Vertical spacingpadding: 16pxLG/MD: horizontal spacing

Tablet portrait & smartphone (SM & XS)#

TypesAttributesPreview
Horizontal spacingpadding: 8pxSM/XS: horizontal spacing
Vertical spacingpadding: 16pxLG/MD: horizontal spacing

What can be modified?#

  • Override the text.
  • Override the arrows.
  • Adjust the width of a single symbol according to the text.
  • Modify tabs to your project needs by adding or deleting single tab symbols.

Our workflow in Sketch#

  • Change the states of text, states and arrows using the "Overrides"-function.

Change log#

5.2.0 Fundamental & 5.2.0 Web - 2021-07-22#

Changed#

  • Doc: "Tab" | Clean up the documentation for the right structure and sentence case

5.0.1 Fundamental & 5.0.1 Web - 2021-04-19#

Fixed#

  • Sketch: "Tab" | Fixed text alignment, spacing and auto width in tab component

5.0.0 Fundamental & 5.0.0 Web - 2021-03-22#

Changed#

  • "Tab" | Changed symbols: with layer-style settings

4.1.0 Fundamental & 4.1.0 Web - 2021-02-18#

Fixed#

  • "Tab" | Fixed symbol: wrong order and layer naming in complete symbol