Go Main page
Go Main page

Web components

Foundations
Components
About
cover

components

Banner

v.1.0.0 | Saturn

Usage

The name of the tokens object to style banner is BANNER_STYLES.

You can not change the name of the tokens object.

Banner component style can be configured through the variant prop:

  • Variant: modify the styles of the Banner.

The structure of the BANNER_STYLES object is:

Variants

Variants can modify the styles for the Banner.

The tokens used are:

  • container?: CommonStyleType;
  • tagContainer?: CommonStyleType;
  • image?: CommonStyleType;
  • content?: CommonStyleType;
  • titleContainer?: CommonStyleType;
  • title?: TypographyTypes;
  • subtitleContainer?: CommonStyleType;
  • subtitle?: TypographyTypes;
  • [BannerAlignType.RIGHT]: { titleFontAlign: string, subtitleFontAlign: string, buttonAlign: string },
  • [BannerAlignType.LEFT]: { titleFontAlign: string, subtitleFontAlign: string, buttonAlign: string },
  • [BannerAlignType.CENTER]: { titleFontAlign: string, subtitleFontAlign: string, buttonAlign: string },
  • [BannerAlignType.ALL_ON_THE_RIGHT]: { titleFontAlign: string, subtitleFontAlign: string, buttonAlign: string }
12345678910
const BANNER_STYLES = {
  [VARIANT]: {
    container?: CommonStyleType;
    tagContainer?: CommonStyleType;
    image?: CommonStyleType;
    content?: CommonStyleType;
    titleContainer?: CommonStyleType;
    title?: TypographyTypes & { max_characters?: number };
    subtitleContainer?: CommonStyleType;
    subtitle?: TypographyTypes & { max_characters?: number };

Example

banner theme object example:

12345678910
const BANNER_STYLES = {
  [VARIANT]: {
    container: {
        min_height: 'min-height',
        border_radius: 'border-radius',
        background_color: 'background-color',
        box_shadow: 'box-shadow',
        width: 'width',
    },
    tagContainer: {
BannerCode API
AccordionUsage