Custom CSS
Instructions and specific values to use or override.
How to Override Variables
Example 1: Restyle Buttons
:root {
--frends-button--background-color: #1565c0;
--frends-button--hover--background-color: #0d47a1;
--frends-button--bordered--outline: 2px solid #1565c0;
}Example 2: Custom Typography
:root {
--header-1-font-size: 2.5rem;
}Core Theme Variables
Typography
Variable
Default
Description
Scrollbar
Variable
Default
Description
Component Variables
Button (frends-button)
frends-button)Variable
Default
Description
Link (frends-link)
frends-link)Variable
Default
Description
Text (frends-text)
frends-text)Variable
Default
Description
Text Input (frends-text-input)
frends-text-input)Variable
Default
Description
Dropdown (frends-dropdown)
frends-dropdown)Variable
Default
Description
Dropdown Menu (frends-dropdown-menu)
frends-dropdown-menu)Variable
Default
Description
Tag (frends-tag)
frends-tag)Variable
Default
Description
Toggle (frends-toggle)
frends-toggle)Variable
Default
Description
Tabs (frends-tabs)
frends-tabs)Variable
Default
Description
Accordion (frends-accordion)
frends-accordion)Variable
Default
Description
Menu Bar (<frends-menu-bar>)
<frends-menu-bar>)Variable
Default
Description
Divider (frends-divider)
frends-divider)Variable
Default
Description
Stepper (frends-stepper)
frends-stepper)Variable
Default
Description
Tooltip (frends-tooltip)
frends-tooltip)Variable
Default
Description
Table (frends-table)
frends-table)Variable
Default
Description
Other Application Variables
Variable
Default
Description
Last updated
Was this helpful?

