Go Main page
Go Main page

Web components

Foundations
Components
About
cover

components

Header

v.1.0.0 | Saturn

Usage

The name of the tokens object to style Header is HEADER_STRUCTURE_STYLES.

You can not change the name of the tokens object.

Header component style can be configured through the variant prop.

Variants

Variants can modify the styles for the HeaderStructure. The tokens used are:

12345678910
const LIST_OPTIONS_STYLES = {
  [VARIANT]: {
    container?: CommonStyleType,
    breadcrumbs?: CommonStyleType,
    content?: CommonStyleType,
    leftContent?: CommonStyleType,
    centerContent?: CommonStyleType,
    rightContent?: CommonStyleType,
  }
}

Example

headerStructure theme object example:

12345678910
const HEADER_STRUCTURE_STYLES = {
  [VARIANT]: {
    container: {
      border_radius: 'border-radious',
    },
    breadcrumbs: {
      margin_bottom: 'margin-bottom',
    },
    content: {
      gap: 'gap',
HeaderCode API
HeaderAccessibility