Box

Storybook

Example

<vega-box class="v-text-primary v-font-p1-short">test</vega-box>
document.querySelector("vega-box").padding = {
    default: {
        top: 0,
        bottom: "size-40",
    },
    S: {
        x: 0,
        bottom: "size-80",
    },
    M: {
        x: "size-80",
    }
};
document.querySelector("vega-box").margin = {
    default: {
        bottom: 0,
    },
    S: {
        bottom: "size-40",
    },
    M: {
        bottom: 0,
    }
};

Usage

The vega-box component is a container designed to mimic native HTML div components, with added support for margins and and padding.

Properties

Name Description Default
padding This specifies the padding within div alike box container. It can be set as ResponsiveType or any sizing token.
margin This specifies the margin for the div alike box container. It can be set as ResponsiveType or any sizing token
display This specifiess the display behavior of the div-alike box wrapper. May be set as ResponsiveType or as block or none.

All Properties

<vega-box
    padding='size-8|12|16 etc | {default: size-12, M: {top: size-16, bottom: size-16, left: size-12, right: size-12}, ...}.'
    margin='size-8|12|16 etc | {default: size-12, M: {top: size-16, bottom: size-16, left: size-12, right: size-12}, ...}.'
    display='block | none'
>
    Wrapped element
</vega-box>

Accessibility

  • Inline text spacing must be adjustable with custom stylesheets
  • Elements must have sufficient color contrast
  • id attribute value must be unique