Вкладки

Используются в личном кабинете

 

Вкладки располагаются на рабочую ширину страницы и выравниваются по сетке. В зависимости от количествавкладок, меняется ширина таба.


Например:
4 таба на 24 колоночной сетке десктора по 6 колонок каждая и 4 таба на 12 колоночной сетке по 3 колонки


Десктоп. Планшет На смартфоне разделы вкладок заменяются на маленькие кнопки. На странице жизненных ситуаций вкладки имеют другие размеры (описаны под основными размерами)

 

 

   X1 X2 X3 X4 X5 X6

Заливка
HEX: #F5F5F5
RGB: 245,245,245

Обводка
HEX: #CDD1D4
RGB: 205,209,212

Заливка
HEX: #E73A3D
RGB: 231,58,61

 Десктоп 25 

кратная
колонкам
сетки

 
 65  >25 20  10 
 Планшет 15   45  >25  18 10 

 

 

 

Комбинированные вкладки

Используются для сортировки информации по категориям.

 

На смартфоне разделы вкладок заменяются выпадающим списком. На планшете данный вид вкладок имеет характеристики средней второстепенной кнопки.


Радиус скругления указан для крайних вкладок. Такой тип кнопок может быть раздельным в качестве переключателя года, выбора времени и других вариантах.
В этом случае кнопки отстоят друг от друга на расстоянии Х4 и имеют скругленные углы с обеих сторон.

 

 


 

   X1 X2 X3  X4  Радиус
Десктоп 42 20 13 20  4
Планшет 40  20 10  20  4

 

Заливка
HEX: #6CA9D2
RGB: 108,169,210

Обводка
HEX: #CDD1D4
RGB: 205,209,212

Заливка
HEX: #F5F5F5
RGB: 245,245,245
Обводка
HEX: #CDCFD1
RGB: 205,207,209

Лайткуб