Tabs

Tabs are ideal for featuring up to three distinct areas of content on a single page. It is important that the background color of the tab bleeds seamlessly into the content, so the tab remains visually connected to the content.

 
 
Tab 1

Unselected tab:
Tab: 68px tall and 245px wide, with a minimum 30px padding on right and left of the text

Tab name: Lato Medium, 18px, #888888
Other text: Lato Regular, 18px, #888888

Background: #FFFFFF

 

Selected tab:
Tab: 79px tall and 245px wide, with a minimum 30px padding on right and left of the text

Tab name: Lato Medium, 18px, #F35800
Other text: Lato Regular, 18px, #444444

Background: #EFF2F4

 

Hover tab:
Tab: 68px tall and 245px wide, with a minimum 30px padding on right and left of the text

Tab name: Lato Medium, 18px, #F35800
Other text: Lato Regular, 18px, #444444

Background: #FFFFFF

 
Tab 2

Unselected tab:
Tab: 45px tall and 270px wide, with a minimum 30px padding on right and left of the text

Tab name: Lato Semibold, 18px, #888888

Background: #FFFFFF
 

Selected tab:
Tab: 79px tall and 245px wide, with a minimum 30px padding on right and left of the text

Tab name: Lato Semibold, 18px, #F35800

Background: #EFF2F4
 

Hover tab:
Tab: 45px tall and 245px wide, with a minimum 30px padding on right and left of the text

Tab name: Lato Semibold, 18px, #F35800

Background: #FFFFFF