Component CSS properties

Every group inside a component's settings object accepts CSS-like properties. They look almost identical to standard CSS — the example below uses six of them (vertical-align, horizontal-align, background-color, padding, border-radius, font-family, font-size, font-weight, color) on the basic/000 "Simple card" component:

{
  "type": "component",
  "component": "basic/000",
  "settings": {
    "card": {
      "vertical-align": "center",
      "horizontal-align": "center",
      "background-color": "#000000",
      "padding": "40px",
      "border-radius": "12px"
    },
    "headline": {
      "font-family": "Inter",
      "font-size": "5vw",
      "font-weight": "700",
      "color": "#ffffff"
    }
  }
}

The accepted keys inside each settings group (card, headline, …) come from the table below. Available groups and which properties are meaningful for each are documented on every component detail page.

These 101 CSS-like properties are accepted inside the settings groups of every component. Properties marked as animatable can be tweened over the component's intro duration.

Property	Unit	Animatable	Description
`duration`	ms	yes	Defines the duration of the animation
`delay`	ms	yes	Defines the start delay of the animation
`font-size`			Defines the font size of an item.
`font-family`			Defines the font family of an item.
`font-weight`			Defines the font weight of an item.
`color`			Defines the color of an item.
`opacity`			Defines the opacity of an item.
`text-align`			Defines how an item aligns horizontally.
`text-overflow`			Defines the text overflow of an item.
`text-shadow`			Defines the text shadow of an item.
`text-decoration`			Defines the text decoration of an item.
`text-transform`			Defines the text transform of an item.
`white-space`			Defines the behavior of the white space of an item.
`transform`			Defines the transform of an item.
`transform-origin`			Defines the transform origin of an item.
`vertical-align`			Defines how an item aligns vertically.
`horizontal-align`			Defines how an item aligns horizontally.
`vertical-position`			Defines how an item aligns vertically.
`horizontal-position`			Defines how an item aligns horizontally.
`border-radius`			Defines the border radius of an item.
`border-top-left-radius`			Defines the border top left radius of an item.
`border-top-right-radius`			Defines the border top right radius of an item.
`border-bottom-left-radius`			Defines the border bottom left radius of an item.
`border-bottom-right-radius`			Defines the border bottom right radius of an item.
`border`			Defines the border of an item.
`border-color`			Defines the border color of an item.
`border-width`			Defines the border width of an item.
`border-style`			Defines the border style of an item.
`border-top`			Defines the border top of an item.
`border-right`			Defines the border right of an item.
`border-bottom`			Defines the border bottom of an item.
`border-left`			Defines the border left of an item.
`border-collapse`			Defines the border collapse of an item.
`border-spacing`			Defines the border spacing of an item.
`line-height`			Defines the line height of an item.
`letter-spacing`			Defines the letter spacing of an item.
`dir`			Defines the direction of an item.
`box-shadow`			Defines the box shadow of an item.
`drop-shadow`			Defines the drop shadow of an item.
`display`			Defines the display of an item.
`overflow`			Defines the overflow of an item.
`overflow-x`			Defines the overflow x of an item.
`overflow-y`			Defines the overflow y of an item.
`padding`			Defines the padding of an item.
`padding-left`			Defines the padding left of an item.
`padding-top`			Defines the padding top of an item.
`padding-right`			Defines the padding right of an item.
`padding-bottom`			Defines the padding bottom of an item.
`margin`			Defines the margin of an item.
`margin-left`			Defines the margin left of an item.
`margin-top`			Defines the margin top of an item.
`margin-right`			Defines the margin right of an item.
`margin-bottom`			Defines the margin bottom of an item.
`background`			Defines the background of an item.
`background-color`			Defines the background color of an item.
`background-size`			Defines the background size of an item.
`background-repeat`			Defines the background repeat of an item.
`background-position`			Defines the background position of an item.
`background-origin`			Defines the background origin of an item.
`background-image`			Defines the background image of an item.
`background-blend-mode`			Defines the background blend mode of an item.
`background-clip`			Defines the background clip of an item.
`left`			Defines the left position of an item.
`right`			Defines the right position of an item.
`top`			Defines the top position of an item.
`bottom`			Defines the bottom position of an item.
`width`			Defines the width of an item.
`height`			Defines the height of an item.
`src`			Defines the source URL of an item, usually an image. Example: https://example.com/image.jpg
`text-stroke`			Defines the text stroke of an item.
`-webkit-text-stroke`			Defines the text stroke of an item.
`-webkit-text-stroke-width`			Defines the text stroke width of an item.
`-webkit-text-stroke-color`			Defines the text stroke color of an item.
`paint-order`			Defines the paint order of an item.
`easing`			Sets the easing function for an animation
`outline`			Defines the outline of an item.
`outline-color`			Defines the outline color of an item.
`outline-width`			Defines the outline width of an item.
`outline-style`			Defines the outline style of an item.
`outline-offset`			Defines the outline offset of an item.
`rotate`			Defines the element 2D rotation
`scale`			Defines the element 2D scale
`center-x`			Defines the center x position of a circle or ellipse.
`center-y`			Defines the center y position of a circle or ellipse.
`radius`			Defines the radius of a circle.
`radius-x`			Defines the radius x of an ellipse.
`radius-y`			Defines the radius y of an ellipse.
`stroke-width`			Defines the stroke width of an item.
`stroke`			Defines the stroke color of an item.
`position`			Defines the CSS position of an item.
`justify-content`			Defines the justify content of an item inside a flex container.
`align-items`			Defines the align items of an item inside a flex container.
`direction`			Defines the direction of the animation.
`text`			Defines the text of an item.
`html`			Defines the HTML content of an item. Only available for shape/html component.
`points`			Defines the points of a polygon.
`fill`			Defines the fill color of a polygon.
`backdrop-filter`			Defines the backdrop filter of an item.
`max-font-size`			Defines the maximum font size of an item when font-size is auto.
`min-font-size`			Defines the minimum font size of an item when font-size is auto.
`box-sizing`			Defines the box sizing behavior of an item.

Component CSS properties#

See also#

Component CSS properties

See also