Layout

Utility classes to provide an easy way to adjust the layout of the elements.

Utilities for all things related to size.

Position

html
<!-- Position Relative --> <engine:VisualElement class="relative" /> <!-- Position Absolute--> <engine:VisualElement class="absolute" />

Top / Right / Bottom / Left

Format: top-{value} / right-{value} / bottom-{value} / left-{value}

Uses same length variables mentioned at Styling/Size.

html
<!-- set left --> <engine:VisualElement class="left-4" /> <!-- set right--> <engine:VisualElement class="right-10p" /> <!-- set top --> <engine:VisualElement class="top-full" /> <!-- set bottom --> <engine:VisualElement class="bottom-20-neg" />

Flex

Flex Direction

html
<!-- flex-direction: row --> <engine:VisualElement class="flex-row" /> <!-- flex-direction: row-reverse --> <engine:VisualElement class="flex-row-reverse" /> <!-- flex-direction: column--> <engine:VisualElement class="flex-col" /> <!-- flex-direction: column-reverse --> <engine:VisualElement class="flex-col-reverse" />

Flex Grow & Shrink

Values: 0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15.

html
<!-- flex-grow --> <engine:VisualElement class="grow-4" /> <engine:VisualElement class="grow-15" /> <!-- flex-shrink --> <engine:VisualElement class="shrink-0" /> <engine:VisualElement class="shrink-9" />

Align Items

ClassProperties
items-autoalign-items: auto
items-startalign-items: flex-start
items-endalign-items: flex-end
items-centeralign-items: center
items-stretchalign-items: stretch

Justify Content

ClassProperties
justify-startjustify-content: flex-start
justify-centerjustify-content: center
justify-endjustify-content: flex-end
justify-betweenjustify-content: space-between
justify-aroundjustify-content: space-around
justify-evenlyjustify-content: space-evenly

Align Self

ClassProperties
self-autoalign-self: auto
self-startalign-self: flex-start
self-endalign-self: flex-end
self-centeralign-self: center
self-stretchalign-self: stretch

Align Content

ClassProperties
align-autoalign-content: auto
align-startalign-content: flex-start
align-endalign-content: flex-end
align-centeralign-content: center
align-stretchalign-content: stretch

Settings

Theme

Light

Contrast

Material

Dark

Dim

Material Dark

System

Sidebar(Light & Contrast only)

Light
Dark

Font Family

DM Sans

Wix

Inclusive Sans

AR One Sans

Direction

LTR
RTL