Горизонтальные
Вертикальные
Мобильная версия
Горизонтальные
![](https://qiwiguide.ru/wp-content/uploads/2019/07/Tabs-Hor-Example-1024x589.png)
Стиль текста Body M 500 (Normal)
— черный #000, rgb (0, 0, 0) для выбранного таба;
— серый #666, rgb (102, 102, 102) для статичного таба;
— оранжевый #FF8C00, rgb (255, 140, 0) при наведении.
![](https://qiwiguide.ru/wp-content/uploads/2019/08/Табы-горизонтальные_44pad-1024x592.png)
![](https://qiwiguide.ru/wp-content/uploads/2019/08/Табы-горизонтальные_68pad-1024x552.png)
Отступ от табов до содержимого зависит от отступов внутри контентного блока.
![](https://qiwiguide.ru/wp-content/uploads/2019/07/Tabs-Hor-02-1024x589.png)
Используются как с разделителем и иконкой слева, так и без них.
![](https://qiwiguide.ru/wp-content/uploads/2019/06/Tabs-Hor-003@3--1024x596.png)
Располагаются как внутри контентного блока, так и вне его.
Вертикальные
![](https://qiwiguide.ru/wp-content/uploads/2019/08/Отступ-до-конента-Верт-1024x828.png)
![](https://qiwiguide.ru/wp-content/uploads/2019/08/TV-02@3x-1024x570.png)
Стиль текста Body S 500 (Normal)
— черный #000, rgb (0, 0, 0) для выбранного таба;
— серый #666, rgb (102, 102, 102) для статичного таба;
— оранжевый #FF8C00, rgb (255, 140, 0) при наведении.
![](https://qiwiguide.ru/wp-content/uploads/2019/08/TV-03-1024x460.png)
Табы с иконкой сверху могут располагаться только внутри контентного блока. Отступ между табами всегда составляет 20px.
![](https://qiwiguide.ru/wp-content/uploads/2019/08/TV-04-1024x460.png)
Оптимальное количество внутри одного блока — от 2 до 5 табов. В остальных случаях желательно использовать другой компонент.
Мобильная версия
Размеры горизонтальных табов в мобильной версии совпадают с размерами горизонтальных табов в декстопной версии.
![](https://qiwiguide.ru/wp-content/uploads/2019/06/Mobile-Tabs-Example@2x-1024x618.png)
Стиль текста Body M 500 (Normal)
— черный #000, rgb (0, 0, 0) для выбранного таба;
— серый #666, rgb (102, 102, 102) для статичного таба;
— оранжевый #FF8C00, rgb (255, 140, 0) при нажатии.
![](https://qiwiguide.ru/wp-content/uploads/2019/07/Mobile-Tabs-02-1024x618.png)
Табы могут использоваться как с иконкой 24×24px и стандартным разделителем, так и без них.
![](https://qiwiguide.ru/wp-content/uploads/2019/06/Mobile-Tabs-03@2x-1024x473.png)
Располагаются как внутри контентного блока, так и вне его.
![](https://qiwiguide.ru/wp-content/uploads/2019/07/Mobile-Tabs-01-1024x630.png)
Табы могут выравниваться по всей ширине контентного блока с учетом его внутренних отступов.
![](https://qiwiguide.ru/wp-content/uploads/2019/08/Моб-версия-отступ-до-контента-1024x473.png)
Также табы могут выравниваться по левому краю. Если табов в блоке много, они уходят за боковую границу экрана и скроллятся.