How to setup
Design tokensComponents
Text 
Text field
Button
Control
List cells
Section heading
Navigation bar
Tab bar
Header
Toast
Tooltip
Page
Label
Cloud box
Loader
Slot
Empty stateModules
Banner
Bottom sheet
Modal
Drawer
Alert view
List view
Collection
Scalable collection
Scrollable collection
Interface editorial policy
Icons
Skeleton
Team
ChangelogSection heading
Section heading is a secondary navigation component. You can configure the component internally, assembling what you need from it.
Section heading is a partner component of List cells.
It supports any color tokens. Editing of color tokens is enabled. Editing of font token is disabled.
Behaviour
See the behavior of the module in List view.
Section heading is usually used along with List cells but can exist as an independent unit.
The component size depends on the layout.
There are two types of the component: Single line and Multiline.
Content left
Subhead
The text can be moved to the second line.
Important: When reaching the maximum filling with the text, Content left and Content right areas each have 50% of space.
Default
/w=3840,quality=90,fit=scale-down)
The text can be moved to the second line.
Title
The height of the block should be increased from 32 to 38 px. The text can be moved to the second line.
Icon
/w=3840,quality=90,fit=scale-down){kind=icon}
Any icon from the kit can be used.
Content right
Default
/w=3840,quality=90,fit=scale-down)
Usually, this component is used without the right part.
Icon and text
/w=3840,quality=90,fit=scale-down){kind=icon}
Any icon from the kit can be used. But we recommend using this space only for navigation sake with the icon ic/24/chevron_right.
The whole Content right area is clickable.
Important: When reaching the maximum filling with the text, Content left and Content right areas each have 50% of space.
Single
Icon
/w=3840,quality=90,fit=scale-down){kind=icon}
Any icon from the kit can be used.
2 icons
Any icon from the kit can be used.
On this page
