Go Main page
Go Main page

Web components

Foundations
Components
About
cover

components

Footer

v.1.0.0 | Saturn

Usage

The name of the tokens object to style the Footer component is FOOTER_STYLES.

You can not change the name of the object of tokens.

There is one prop that allows to modify different aspects of the component:

  • Variant: modify the styles of the Footer.

Variants

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

Types

  • FooterLineSeparatorVariantType
123
type FooterLineSeparatorVariantType = { variant?: string } & {
  [Key in DeviceBreakpointsType]?: { variant?: string };
};
  • ContentDirection
123
export type ContentDirection = {
  [Key in ContentDirectionType]?: CommonStyleType;
};
  • ContentDirectionType
1234
enum ContentDirectionType {
  VERTICAL = 'VERTICAL',
  HORIZONTAL = 'HORIZONTAL',
}

Example

Footer theme object example:

1234567
const FOOTER_STYLES = {
  [VARIANT]: {
    rootContainer?: CommonStyleType;
    contentContainer?: CommonStyleType;
    lineSeparator?: FooterLineSeparatorVariantType;
  },
};
FooterCode API
FooterAccessibility