Tab Strip
A container that allows the user to switch between several views by clicking the tabs. It is used in the lowest level of navigation.
Figure 1: Example of a tab strip
Dimensions
- Width: 100% of container (240 pix)
- Provide 11 pix space for scroll bar
- Background height (including borders): 24 pix
- Top border height: 1 pix
- Bottom blue border height: 2 pix
- Leading and trailing space between the tab border and text: 2 pix min.
- Spacing between tabs: 1 pix
Colors and Fonts
- Background (including 1 pix border at bottom): White #FFFFFF
- Top border: Gray #DCE3EC
- Bottom blue border: Blue #225A8D
- Active tab background: Blue #225A8D
- Active tab font: Bold white #FFFFFF
- Inactive and disabled tab background: Gray #CBD5E1
- Inactive tab font: Bold blue #225A8D
- If possible, remove underlines in inactive tabs (not supported in PocketIE).
- Disabled tab font: Regular dark gray #79818D
