Backgrounds
| Virtual property |
CSS mapping |
| bg |
background: var(--asm-background) !important;
|
| bg-attachment |
background-attachment: var(--asm-background-attachment) !important;
|
| bg-blend |
background-blend-mode: var(--asm-background-blend-mode) !important;
|
| bg-clip |
background-clip: var(--asm-background-clip) !important;
|
| bg-color |
background-color: var(--asm-background-color) !important;
|
| bg-image |
background-image: var(--asm-background-image) !important;
|
| img |
--asm-background-image: url(<value>);
background-image: var(--asm-background-image) !important;
|
| bg-position |
background-position: var(--asm-background-position) !important;
|
| bg-repeat |
background-repeat: var(--asm-background-repeat) !important;
|
| bg-size |
background-size: var(--asm-background-size) !important;
|
<div x-style="bg-position:center; img:'https://...'; mx:auto; ..."></div>
Gradients
| Virtual property |
CSS mapping |
| gradient |
--asm-background-image: linear-gradient(<value>);
background-image: var(--asm-background-image) !important;
|
| radial-gradient |
--asm-background-image: radial-gradient(<value>);
background-image: var(--asm-background-image) !important;
|
| conic-gradient |
--asm-background-image: conic-gradient(<value>);
background-image: var(--asm-background-image) !important;
|
<div x-style="flex; justify-content:center">
<div x-style="gradient:red, blue; ..."></div>
<div x-style="radial-gradient:red, blue; ..."></div>
<div x-style="conic-gradient:red, blue; ..."></div>
</div>
Borders
| Virtual property |
CSS mapping |
| b |
border: var(--asm-border) !important;
|
| bc |
border-color: var(--asm-border-color) !important;
|
| bs |
border-style: var(--asm-border-style) !important;
|
| bw |
border-width: var(--asm-border-width) !important;
|
| bt |
border-top: var(--asm-border-top) !important;
|
| bl |
border-left: var(--asm-border-left) !important;
|
| br |
border-right: var(--asm-border-right) !important;
|
| bb |
border-bottom: var(--asm-border-bottom) !important;
|
| bt-color |
border-top-color: var(--asm-border-top-color) !important;
|
| bt-style |
border-top-style: var(--asm-border-top-style) !important;
|
| bt-width |
border-top-width: var(--asm-border-top-width) !important;
|
| bl-color |
border-left-color: var(--asm-border-left-color) !important;
|
| bl-style |
border-left-style: var(--asm-border-left-style) !important;
|
| bl-width |
border-left-width: var(--asm-border-left-width) !important;
|
| br-color |
border-right-color: var(--asm-border-right-color) !important;
|
| br-style |
border-right-style: var(--asm-border-right-style) !important;
|
| br-width |
border-right-width: var(--asm-border-right-width) !important;
|
| bb-color |
border-bottom-color: var(--asm-border-bottom-color) !important;
|
| bb-style |
border-bottom-style: var(--asm-border-bottom-style) !important;
|
| bb-width |
border-bottom-width: var(--asm-border-bottom-width) !important;
|
Border radius
| Virtual property |
CSS mapping |
| radius |
border-radius: var(--asm-border-radius) !important;
|
| radius:<preset> |
--asm-border-radius: var(--border-radius-<preset>);
border-radius: var(--asm-border-radius) !important;
|
| radius-top |
border-top-left-radius: var(--asm-border-top-left-radius) !important;
border-top-right-radius: var(--asm-border-top-right-radius) !important;
|
| radius-top:<preset> |
--asm-border-top-left-radius: var(--border-radius-<preset>);
--asm-border-top-right-radius: var(--border-radius-<preset>);
border-top-left-radius: var(--asm-border-top-left-radius) !important;
border-top-right-radius: var(--asm-border-top-right-radius) !important;
|
| radius-bottom |
border-bottom-left-radius: var(--asm-border-bottom-left-radius) !important;
border-bottom-right-radius: var(--asm-border-bottom-right-radius) !important;
|
| radius-bottom:<preset> |
--asm-border-bottom-left-radius: var(--border-radius-<preset>);
--asm-border-bottom-right-radius: var(--border-radius-<preset>);
border-bottom-left-radius: var(--asm-border-bottom-left-radius) !important;
border-bottom-right-radius: var(--asm-border-bottom-right-radius) !important;
|
| radius-left |
border-bottom-left-radius: var(--asm-border-bottom-left-radius) !important;
border-top-left-radius: var(--asm-border-top-left-radius) !important;
|
| radius-left:<preset> |
--asm-border-top-left-radius: var(--border-radius-<preset>);
--asm-border-bottom-left-radius: var(--border-radius-<preset>);
border-top-left-radius: var(--asm-border-top-left-radius) !important;
border-bottom-left-radius: var(--asm-border-bottom-left-radius) !important;
|
| radius-right |
border-bottom-right-radius: var(--asm-border-bottom-right-radius) !important;
border-top-right-radius: var(--asm-border-top-right-radius) !important;
|
| radius-tl:<preset> |
--asm-border-bottom-right-radius: var(--border-radius-<preset>);
--asm-border-top-right-radius: var(--border-radius-<preset>);
border-bottom-right-radius: var(--asm-border-bottom-right-radius) !important;
border-top-right-radius: var(--asm-border-top-right-radius) !important;
|
| radius-bl |
border-bottom-left-radius: var(--asm-border-bottom-left-radius) !important;
|
| radius-bl:<preset> |
--asm-border-bottom-left-radius: var(--border-radius-<preset>);
border-bottom-left-radius: var(--asm-border-bottom-left-radius) !important;
|
| radius-br |
border-bottom-right-radius: var(--asm-border-bottom-right-radius) !important;
|
| radius-br:<preset> |
--asm-border-bottom-right-radius: var(--border-radius-<preset>);
border-bottom-right-radius: var(--asm-border-bottom-right-radius) !important;
|
| radius-tl |
border-top-left-radius: var(--asm-border-top-left-radius) !important;
|
| radius-tl:<preset> |
--asm-border-top-left-radius: var(--border-radius-<preset>);
border-top-left-radius: var(--asm-border-top-left-radius) !important;
|
| radius-tr |
border-top-right-radius: var(--asm-border-top-right-radius) !important;
|
| radius-tr:<preset> |
--asm-border-top-right-radius: var(--border-radius-<preset>);
border-top-right-radius: var(--asm-border-top-right-radius) !important;
|
The following preset values are available for all radius properties: none, xs, sm, md, xl, and pill.
The default value for the radius property is sm.
<div x-style="^space-y:1rem">
<div x-style="radius:none; ..."></div>
<div x-style="radius:xs; ..."></div>
<div x-style="radius:sm; ..."></div>
<div x-style="radius; ..."></div>
<div x-style="radius:md; ..."></div>
<div x-style="radius:lg; ..."></div>
<div x-style="radius:pill; ..."></div>
</div>
Margins
| Virtual property |
CSS mapping |
| m |
margin: var(--asm-margin) !important;
|
| m:<number> |
--asm-margin: calc(<number> * var(--unit-size));
margin: var(--asm-margin) !important;
|
| mt |
margin-top: var(--asm-margin-top) !important;
|
| mt:<number> |
--asm-margin-top: calc(<number> * var(--unit-size));
margin: var(--asm-margin-top) !important;
|
| mb |
margin-bottom: var(--asm-margin-bottom) !important;
|
| mb:<number> |
--asm-margin-bottom: calc(<number> * var(--unit-size));
margin: var(--asm-margin-bottom) !important;
|
| ml |
margin-left: var(--asm-margin-left) !important;
|
| ml:<number> |
--asm-margin-left: calc(<number> * var(--unit-size));
margin: var(--asm-margin-left) !important;
|
| mr |
margin-right: var(--asm-margin-right) !important;
|
| mr:<number> |
--asm-margin-right: calc(<number> * var(--unit-size));
margin: var(--asm-margin-right) !important;
|
| mx |
margin-left: var(--asm-margin-left) !important;
margin-right: var(--asm-margin-right) !important;
|
| mx:<number> |
--asm-margin-left: calc(<number> * var(--unit-size));
--asm-margin-right: calc(<number> * var(--unit-size));
margin-left: var(--asm-margin-left) !important;
margin-right: var(--asm-margin-right) !important;
|
| my |
margin-top: var(--asm-margin-top) !important;
margin-bottom: var(--asm-margin-bottom) !important;
|
| my:<number> |
--asm-margin-top: calc(<number> * var(--unit-size));
--asm-margin-bottom: calc(<number> * var(--unit-size));
margin-top: var(--asm-margin-top) !important;
margin-bottom: var(--asm-margin-bottom) !important;
|
You can set both positive and negative numbers with margin properties.
Paddings
| Virtual property |
CSS mapping |
| p |
padding: var(--asm-padding) !important;
|
| p:<number> |
--asm-padding: calc(<number> * var(--unit-size));
padding: var(--asm-padding) !important;
|
| pt |
padding-top: var(--asm-padding-top) !important;
|
| pt:<number> |
--asm-padding-top: calc(<number> * var(--unit-size));
padding-top: var(--asm-padding-top) !important;
|
| pb |
padding-bottom: var(--asm-padding-bottom) !important;
|
| pb:<number> |
--asm-padding-bottom: calc(<number> * var(--unit-size));
padding-bottom: var(--asm-padding-bottom) !important;
|
| pl |
padding-left: var(--asm-padding-left) !important;
|
| pl:<number> |
--asm-padding-left: calc(<number> * var(--unit-size));
padding-left: var(--asm-padding-left) !important;
|
| pr |
padding-right: var(--asm-padding-right) !important;
|
| pr:<number> |
--asm-padding-right: calc(<number> * var(--unit-size));
padding-right: var(--asm-padding-right) !important;
|
| px |
padding-left: var(--asm-padding-left) !important;
padding-right: var(--asm-padding-right) !important;
|
| px:<number> |
--asm-padding-left: calc(<number> * var(--unit-size));
--asm-padding-right: calc(<number> * var(--unit-size));
padding-left: var(--asm-padding-left) !important;
padding-right: var(--asm-padding-right) !important;
|
| py |
padding-top: var(--asm-padding-top) !important;
padding-bottom: var(--asm-padding-bottom) !important;
|
| py:<number> |
--asm-padding-top: calc(<number> * var(--unit-size));
--asm-padding-bottom: calc(<number> * var(--unit-size));
padding-top: var(--asm-padding-top) !important;
padding-bottom: var(--asm-padding-bottom) !important;
|
You can set only positive numbers with padding properties.
Sizing
| Virtual property |
CSS mapping |
| w |
width: var(--asm-width) !important;
|
| min-w |
min-width: var(--asm-min-width) !important;
|
| max-w |
max-width: var(--asm-max-width) !important;
|
| h |
height: var(--asm-height) !important;
|
| min-h |
min-height: var(--asm-min-height) !important;
|
| max-h |
max-height: var(--asm-max-height) !important;
|
Text
| Virtual property |
CSS mapping |
| decoration |
text-decoration: var(--asm-text-decoration) !important;
|
| ws |
white-space: var(--asm-white-space) !important;
|
| leading |
line-height: var(--asm-line-height) !important;
|
| tracking |
letter-spacing: var(--asm-letter-spacing) !important;
|
| break |
--asm-overflow-wrap: normal;
--asm-word-break: normal;
overflow-wrap: var(--asm-overflow-wrap) !important;
word-break: var(--asm-word-break) !important;
|
| break:all |
--asm-word-break: break-all;
word-break: var(--asm-word-break) !important;
|
| break:words |
--asm-overflow-wrap: break-word;
overflow-wrap: var(--asm-overflow-wrap) !important;
|
| truncate |
--asm-overflow: hidden;
--asm-text-overflow: ellipsis;
--asm-white-space: nowrap;
overflow: var(--asm-overflow) !important;
text-overflow: var(--asm-text-overflow) !important;
white-space: var(--asm-white-space) !important;
|
| text |
font-size: var(--asm-font-size) !important;
|
| text:<preset> |
--asm-font-size: var(--font-size-<preset>);
--asm-line-height: var(--font-size-leading-<preset>);
font-size: var(--asm-font-size) !important;
line-height: var(--asm-line-height) !important;
|
| uppercase |
--asm-text-transform: uppercase;
text-transform: var(--asm-text-transform) !important;
|
| lowercase |
--asm-text-transform: lowercase;
text-transform: var(--asm-text-transform) !important;
|
| capitalize |
--asm-text-transform: capitalize;
text-transform: var(--asm-text-transform) !important;
|
| normal-case |
--asm-text-transform: none;
text-transform: var(--asm-text-transform) !important;
|
| uppercase |
--asm-text-transform: uppercase;
text-transform: var(--asm-text-transform) !important;
|
| variant |
font-variant-numeric: var(--asm-font-variant-numeric) !important;
|
The truncate, uppercase, lowercase, capitalize, and normal-case properties
must be used without arguments.
The break property does not allow other arguments except all and words.
This virtual property can also be used without arguments.
The text property accepts the following preset arguments: xs, sm, base, lg, xl, 2xl, 3xl, 4xl, 5xl,
6xl, 7xl, 8xl, and 9xl. These preset values can also be used as arguments for font-size property.
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
<div x-style="truncate; uppercase; text:xs; ...">
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
</div>
Display
| Virtual property |
CSS mapping |
| block |
--asm-display: block;
display: var(--asm-display) !important;
|
| inline-block |
--asm-display: inline-block;
display: var(--asm-display) !important;
|
| grid |
--asm-display: grid;
display: var(--asm-display) !important;
|
| inline-grid |
--asm-display: inline-grid;
display: var(--asm-display) !important;
|
| flex |
--asm-display: flex;
display: var(--asm-display) !important;
|
| inline-flex |
--asm-display: inline-flex;
display: var(--asm-display) !important;
|
| hidden |
--asm-display: none;
display: var(--asm-display) !important;
|
Position
| Virtual property |
CSS mapping |
| static |
--asm-position: static;
position: var(--asm-position) !important;
|
| absolute |
--asm-position: absolute;
position: var(--asm-position) !important;
|
| fixed |
--asm-position: fixed;
position: var(--asm-position) !important;
|
| relative |
--asm-position: relative;
position: var(--asm-position) !important;
|
| sticky |
--asm-position: sticky;
position: var(--asm-position) !important;
|
Visibility
| Virtual property |
CSS mapping |
| visible |
--asm-visibility: visible;
visibility: var(--asm-visibility) !important;
|
| invisible |
--asm-visibility: hidden;
visibility: var(--asm-visibility) !important;
|
Layout
| Virtual property |
CSS mapping |
| z |
z-index: var(--asm-z-index) !important;
|
| v-align |
vertical-align: var(--asm-vertical-align) !important;
|
| inset |
top: var(--asm-top) !important;
right: var(--asm-right) !important;
bottom: var(--asm-bottom) !important;
left: var(--asm-left) !important;
|
| inset-x |
right: var(--asm-right) !important;
left: var(--asm-left) !important;
|
| inset-y |
top: var(--asm-top) !important;
bottom: var(--asm-bottom) !important;
|
Flex
| Virtual property |
CSS mapping |
| flex-dir |
flex-direction: var(--asm-flex-direction) !important;
|
| flex-col |
--asm-flex-direction: column;
flex-direction: var(--asm-flex-direction) !important;
|
| flex-row |
--asm-flex-direction: row;
flex-direction: var(--asm-flex-direction) !important;
|
| row-reverse |
--asm-flex-direction: row-reverse;
flex-direction: var(--asm-flex-direction) !important;
|
| col-reverse |
--asm-flex-direction: column-reverse;
flex-direction: var(--asm-flex-direction) !important;
|
Grid
| Virtual property |
CSS mapping |
| grid-rows |
--asm-grid-template-rows: repeat(<value>, minmax(0, 1fr));
grid-template-rows: var(--asm-grid-template-rows) !important;
|
| row-start |
grid-row-start: var(--asm-grid-row-start) !important;
|
| row-span |
--asm-grid-row-end: repeat(span <value>);
grid-grid-row-end: var(--asm-grid-row-end) !important;
|
| grid-cols |
--asm-grid-template-columns: repeat(<value>, minmax(0, 1fr));
grid-template-columns: var(--asm-grid-template-columns) !important;
|
| col-start |
grid-column-start: var(--asm-grid-column-start) !important;
|
| col-span |
--asm-grid-column-end: repeat(span <value>);
grid-grid-column-end: var(--asm-grid-column-end) !important;
|
| col-gap |
column-gap: var(--asm-column-gap) !important;
|
| grid-flow |
grid-auto-flow: var(--asm-grid-auto-flow) !important;
|
| auto-cols |
grid-auto-columns: var(--asm-grid-auto-columns) !important;
|
| auto-rows |
grid-auto-rows: var(--asm-grid-auto-rows) !important;
|
Effects
| Virtual property |
CSS mapping |
| backdrop |
backdrop-filter: var(--asm-backdrop-filter) !important;
|
| shadow |
box-shadow: var(--asm-box-shadow) !important;
|
| shadow:<preset> |
--asm-box-shadow: var(--shadow-<preset>);
box-shadow: var(--asm-box-shadow) !important;
|
| e:<preset> |
--asm-box-shadow: var(--elevation-<preset>);
box-shadow: var(--asm-box-shadow) !important;
|
| ring |
--asm-box-shadow: 0 0 0 <value>;
box-shadow: var(--asm-box-shadow) !important;
|
