Design system
Header User
Last updated 2 November 2026
Adds a user dropdown for the header component.
Requirements
To use these components in Figma, install the latest Insites font icons.
- Download the Insites icon font.
- Install the font file on your computer.
- Restart Figma so the font shows in your font list.
To change an icon, copy it from the font icons list and paste it into the icon layer of the component.
Figma Component Variant Properties
Header User
| Properties | Options | Notes |
|---|---|---|
| Hover | True, False | Enable or disable to show the hover or default state of the component. |
Note
This component is only used as a nested component in the Header component.
Header User Options Dropdown
No variants added for the component, use Figma prototype to show the dropdown menu for the user. See the component demo section on Figma for more details.
Header User Options / Breakpoint > 630
| Properties | Options | Notes |
|---|---|---|
| Type | Profile, Logout | Select to use the link item to profile or logout page. |
| Hover | True, False | Enable or disable to show the hover or default state of the component. |
Note
This component is only used as a nested component in the Header component.
Header User Options / Breakpoint < 630
| Properties | Options | Notes |
|---|---|---|
| Type | Profile, Logout | Select to use the link item to profile or logout page. |
Note
This component is only used as a nested component in the Header component.