Go Main page
Go Main page

Web components

Foundations
Components
About
cover

components

Container

v.1.0.0 | Saturn

Usage

The name of the tokens object to style container is CONTAINER_STYLES.

You can not change the name of the tokens object.

Container component has one way to modify the styles:

  • Variant: modify the styles of the Container.

The structure of the CONTAINER_STYLES object is:

Variants

Variants can modify the styles for the Container.

The tokens used are:

12345678
const CONTAINER_STYLES = {
  [VARIANT]: {
  parentContainer?: CommonStyleType;
  header?: CommonStyleType;
  title?: TypographyTypes;
  container: CommonStyleType;
  }
};

Example

container theme object example:

12345678910
const CONTAINER_STYLES = {
  [VARIANT]: {
    parentContainer?: {
      border_radius: 'border-radius',
      box_shadow: 'box-shadow',
    },
    container?: {
      background_color:'background-color',
      display: 'display',
      flex_direction: flex-direction',
ContainerCode API
ContainerAccessibility