Controls

Reusable UI control definitions for properties.config.json

Use these in your properties.config.json with "globalControl": "Name".

Alignment

globalControl	Description
AlignContent	AlignContent
AlignItems	AlignItems
AlignItemsBasic	AlignItemsBasic
AlignSelf	AlignSelf
JustifyContent	JustifyContent
JustifyItems	JustifyItems
JustifySelf	JustifySelf

Animations

globalControl	Description
AnimationEffects	AnimationEffects
AnimationSettings	AnimationSettings
Reveals	Reveals
ScrollAnimation_Opacity	ScrollAnimation_Opacity
ScrollAnimation_Rotate	ScrollAnimation_Rotate
ScrollAnimation_Scale	ScrollAnimation_Scale
ScrollAnimation_Translate	ScrollAnimation_Translate

Background

globalControl	Description
Background	Background
BackgroundButton	BackgroundButton
BackgroundColor	BackgroundColor
BackgroundContainer	BackgroundContainer
BackgroundGradient	BackgroundGradient
BackgroundImage	BackgroundImage
BackgroundOnlyColor	BackgroundOnlyColor
BackgroundTransparent	BackgroundTransparent
BackgroundVideo	BackgroundVideo
Background_Color	Background_Color
Background_Gradient	Background_Gradient
Background_Gradient_Container	Background_Gradient_Container
Background_Image	Background_Image
Background_Image_CMS	Background_Image_CMS
Background_SVG	Background_SVG
Background_Video	Background_Video
Border	Border
BorderColor	BorderColor
BorderHover	BorderHover
BorderRadius	BorderRadius
BorderStyle	BorderStyle
BorderWidth	BorderWidth
Borders	Borders
BordersContainer	BordersContainer
BordersInput	BordersInput
Outline	Outline
OutlineColor	OutlineColor
OutlineOffset	OutlineOffset
OutlineStyle	OutlineStyle
OutlineWidth	OutlineWidth

Core

globalControl	Description
BackdropBlur	BackdropBlur
Blur	Blur
BoxShadow	BoxShadow
Brightness	Brightness
CSSClasses	CSSClasses
ControlType	ControlType
DropShadow	DropShadow
Effects	Effects
Filters	Filters
HTMLTag	HTMLTag
HoverGroup	HoverGroup
ID	ID
Image	Image
MenuItem	MenuItem
ObjectFit	ObjectFit
ObjectPosition	ObjectPosition
Opacity	Opacity
Saturate	Saturate

Grid & Flex

globalControl	Description
ActAsGridOrFlexItem	ActAsGridOrFlexItem
ColEnd	ColEnd
ColStart	ColStart
Columns	Columns
FlexDirection	FlexDirection
FlexItem	FlexItem
GridItem	GridItem
Order	Order
RowEnd	RowEnd
RowStart	RowStart
Rows	Rows

Interactive

globalControl	Description
ButtonFontAndTextStyles	ButtonFontAndTextStyles
Filter	Filter
InputFontAndTextStyles	InputFontAndTextStyles
Link	Link

Layout

globalControl	Description
AspectRatio	AspectRatio
Container	Container
Hidden	Hidden
Inset	Inset
Isolation	Isolation
Layout	Layout
Overflow	Overflow
Position	Position
TopRightBottomLeft	TopRightBottomLeft
Visibility	Visibility
ZIndex	ZIndex

Overlay

globalControl	Description
Overlay	Overlay
Overlay_Color	Overlay_Color
Overlay_Gradient	Overlay_Gradient
Overlay_Image	Overlay_Image

Sizing

globalControl	Description
Height	Height
MaxHeight	MaxHeight
MaxWidth	MaxWidth
MinHeight	MinHeight
MinWidth	MinWidth
Sizing	Sizing
SizingContainer	SizingContainer
SizingImage	SizingImage
SizingInput	SizingInput
SizingSVG	SizingSVG
Width	Width

Spacing

globalControl	Description
Margin	Margin
Padding	Padding
Spacing	Spacing
SpacingButton	SpacingButton
SpacingContainer	SpacingContainer
SpacingInput	SpacingInput

Transforms

globalControl	Description
Rotate	Rotate
Scale	Scale
Skew	Skew
TransformOrigin	TransformOrigin
Transforms	Transforms
Translate	Translate

Transitions

globalControl	Description
Delay	Delay
Duration	Duration
Property	Property
TimingFunction	TimingFunction
Transitions	Transitions

Typography

globalControl	Description
HeadingColor	HeadingColor
TextColor	TextColor
TextColorHover	TextColorHover
TextDecoration	TextDecoration
TextFontsAndTextStyles	TextFontsAndTextStyles
TextSimple	TextSimple
TextStyles	TextStyles
Typography	Typography

Quick Usage

{
  "globalControl": "Spacing"
}

With overrides:

{
  "globalControl": "BackgroundColor",
  "themeColor": {
    "default": {
      "name": "brand",
      "shade": 500
    }
  }
}