Tabs

Theme

Orientation

Both Tab variants have horizontal and vertical orientations. The styles are the same between orientations, only the arrangement of elements is different.

Open tabs feature section text labels that float above the anchor line in the horizontal orientation or to the right of the anchor line in the vertical orientation.

Box tabs feature section text labels that are contained in a background and are aligned to the bottom of the anchor line in the horizontal orientation or to the left of the anchor line in the vertical orientation.

## Breakpoints Tabs can be used on a variety of screen sizes, but be mindful of how the group of section text labels will scale down on smaller screens.

### Desktop

Large screens have lots of space where all of the section text labels can be seen

### Tablet

Sometimes one or two section text labels will get cut off or break to two lines, which is acceptable

### Mobile

Don’t use tabs on mobile because too many section text labels will get cut off or severely compressed

Section

Tabs use PatternFly 4 spacers to define spacing values between elements.

Open tabs

Box tabs