Skip to content


Style unit

Style units can be numeric or string. If numeric it will be measured as pixels. Otherwise, specify unit in a string, e.g. 100px, or 1.5em, etc.

Styles object

Styles to be applied to the object and/or children. Local styles will override any global styles. Some tile will not used some of the styles as it would caused a redundancy.

Name Description
height height in pixel for the object, e.g. "height": "100px", if there's platform specific, add platform suffix, e.g. "height-css": "100vh"
width height in pixel for the object, e.g. "height": "100px"
color color
margin margin, subset of css (top right bottom left), e.g 10px 5px 10px 5px
padding padding, subset of css (top right bottom left)
padding[Location] paddingTop, paddingRight, etc.
margin[Location] marginTop, marginRight, etc.
border border, subset of css, e.g. "border": "1px solid #ff0000" or "border": "solid"
borderLeft, borderRight, ... side specific border
borderRadius radi for the border, e.g. "borderRadius": "10px" or "borderRadius": "10px 25px" or "borderRadius": "10px 25px 10px 25px". See
backgroundColor background color
boxShadow xoffset yoffset blur? spread? color normal
fontSize Font size
lineHeight Line height multiplier where 1.0 is 1x the natural height of the text, 1.5 is 50% larger, ect.
fontFamily SourceSansSerif, OpenSans, NotoSansJP, MochiyPopOne, Lato, RecoletaAltSemiBold, GothamBold, GothamBook
transform transform object
backgroundImage image url
backgroundImageFit cover, contain, fill, fitWidth, fitHeight
backgroundImageAlignment center, centerLeft, centerRight, topRight, topCenter, ...
backgroundImageResize optimize - if set will optimize size for device
gradientByName gradient fill using named gradients found at
alignment topLeft, topCenter, topRight, centerLeft, center, centerRight, bottomLeft, bottomCenter, bottomRight
shadow Drop shaddow for text; object
decoration strikethrough, underline, overline

Shadow objects

  • offset: x, y offset
  • blur = bur px
  • color = hex color

Transform objects

  • kind: translate, rotationX, rotationY, skewX, skewY
  • translate = x, y, z
  • rotationX, rotationY = radians
  • skew, skewX, skewY = alpha, beta

Style example

  "styles": {
    "root": {
      "backgroundColor": "#fff"
    "element1": {
      "boder": "1px solid #ddd"
  "classes": {
    "root": "text-left"