Class Names

July 14, 2025, 5:01 a.m.

Use the following classnames to apply styles in the page builder's Drag&Drop interface, specifically in style manager tab of the Drag&Drop control panel.

Text Color

Sets the text color. (note: only 21 #named-colors are supported)

Class Pattern: <colorName>

<div class="red">Example</div>

Example

Text Color (Hover)

Changes text color on hover.

Class Pattern: <colorName>hov

<div class="bluehov">Example</div>

Example

Before Pseudo Text Color

Sets color on :before content.

Class Pattern: <colorName>_b

<div class="orange_b">Example</div>

Background Color

Sets the background color.

Class Patterns: <namedColor>bg or clr<n>bg

<div class="greenbg">Example</div>

Example

Background Color (Hover)

Sets the background on hover.

Class Patterns: <namedColor>bghov or clr<n>bghov

<div class="greenbghov">Example</div>

Example

Before Pseudo Background

Sets background on :before.

Class Patterns: <namedColo>bg_b or clr<n>bg_b

<div class="bluebg_b">Example</div>

Variable Colors (numberedColors)

Sets the color for Text or Bg based on the SiteSettings' colors which are numberedColors (see the pattern).
notes:
- by default, each Site has 6 colors for each set/mode, however, a site could be set to have more colors, if you are a site admin you can set in the site-settings.
- variable colors can be used in place of namedColors mentioned in this page.
- when you set a variable color in the siteSettings, you can give it an alpha (ttparency).

Class Pattern: clr<n> or clr<n>bg or clr<n>[other constants like bghov, brdr, ...etc.]

<div class="clr2 clr1bg">Example</div>

Example

<div class="clr3 clr4bg">Example</div>

Example

Stroke Color (for text)

Sets the given color stroke (frame) with a fixed width, note that this works best with the font-size classes (fs<n>) and the text color (clr<n> or <namedColor>)

Class Patterns:
<namedColor>strk or clr<n>strk or clr<n>trstrk

<div class="bluestrk">Blue Stroke</div>

Blue Stroke

<div class="redstrk">red Stroke</div>

Blue Stroke

<div class="redstrk yellow">red Stroke with yellow color</div>

Blue Stroke

<div class="clr3strk">3rd dynamic site color Stroke</div>

clr3 Stroke

<div class="clr3trstrk">3rd color with a bit of transparency</div>

clr3tr Stroke

Border Color

Sets the border color. (note: this classname category is related and depending on border-width classnames and border-style classnames which are limited to "solid", "dotted" and "dashed")

Class Patterns:
<namedColor>_brdr or clr<n>_brdr

<div class="blue_brdr">Example</div>

Example that does not work without dependencies of this classnames category

<div class="blue_brdr brdr3 solid">Example</div>

Example that does work due to the combination with dependencies (brdr<n> solid)

Border Color (Hover)

Similar to "Border Color", except is changes the border color when hovered.

Class Patterns: <namedColor>_brdrhov or clr<n>_brdrhov

<div class="red_brdrhov brdr9 solid">Example</div>

Example

Border Color (Sides)

Sets border color for specific sides: top, right, bottom, left.

Class Patterns:
<namedColor>_brdrt or clr<n>_brdrt
<namedColor>_brdrr or clr<n>_brdrr
<namedColor>_brdrb or clr<n>_brdrb
<namedColor>_brdrl or clr<n>_brdrl

<div class="purple_brdrt green_brdrr yellow_brdrb red_brdrl solid brdr9">Example</div>

Example

Border Width

Sets border width in "em" unit multiplied by 0.01 which mean 13 is 1.3em.

notes:
- this classname category is related and depending on border-style classnames which are limited to "solid", "dotted" and "dashed".
- You can specificly set the border width for each side, similar to border color (i.e. brdr_b55 will set the border-bottom-width to 5.5em)

Class Patterns: brdr<n>

<div class="solid brdr13">border Width 1.3em</div>

border Width 1.3em

Border Radius (Curving Corners)

Sets border radius to the given number multiplied by 0.1em, if no such className provided, the default is 0.2em

Class Patterns: brdr_r<n>

<div class="brdr_r11">border radius 1.1em</div>

border radius 1.1em

<div class="brdr_r25">border radius 2.5em</div>

border radius 2.5em

<div class="brdr_r0">border radius 0.0em</div>

border radius 0.0em

Gradient Colors

Sets Text/Bg color to a mixture of two named colors in a specified angle degree.

Class Patterns: <colorName#1>_<colorName#2>_<angleDegree>

<div class="red_green_150">Sets the text color to a gradient of two colors with specific angle</div>

Sets the text color to a gradient of two colors with specific angle, note, the background color is set to transparent and does not accept any other backgound colors to be set

<div class="red_green_150bg">Sets the background color to a gradient of two colors with specific angle</div>

Sets the background color to a gradient of two namedColors with specific angle

<div class="clr5_clr2tr_150bg">Sets the background color to a gradient of two colors with specific angle</div>

Sets the background color to a gradient of two numberedColors with specific angle

Rotation

rotates the select elements by giving angle degree (note: the angle degree value should be any dividable by 10 value starting from 10 to 360 and -10 to -360

Class Patterns:rot_<angleDegree>

<div class="rot10">Example Long text for observation</div>

Rotates clockwise

<div class="rot-10">Example Long text for observation</div>

Rotates counter clockwise

Opacity

sets the opaque percentage of selected element (opacity is opposite to ttparency)

Class Patterns:op<n> while n not greater than 10 and not smaller than 0

<div class="op5">Example Long text for observation</div>

Sets the opaque of the entire element (text/bg/bg-image ..etc.)

Aspect-Ratio

sets the ratio of width value compared to the height value of selected element

Class Patterns:ar<n> while n not greater than 10 and not smaller than 0

<div class="ar5">aspect-ratio 0.5 means width is half of the height</div>

aspect-ratio 0.5 means width is half of the height, this also mean, if the width had been set to a value, the height would be doubled, if the height had been set, the width will be half of that size

Width

Sets the width property for the selected element, with either of the following units:

setting by EM unit, which mean the percent of parent's font-size. (note: only up to 10 em is supported).
Setting by percentage, as how shown in the following list:

.q_w{width:25%} Quarter of parent's available width
.t_w{width:33.33%} One-Third of parent's available width
.h_w{width:50%} Half of parent's available width
.tt_w{width:66.6%} Two-Third of parent's available width
.tq_w{width:75%} Three-Quarter of parent's available width
.f_w{width:100%} Full of parent's available width

className patterns:

EM-based unit: w<n> while n is not greater than 100 and not smaller than 0, n is multiplied by 0.01 to form precise value starting from 0.01em to 10.00em.
Percentage-based: <part>_w while part is any of [q, t, h, tt, f]

<div class="w55">Example Long text for observation</div>

width set to 5.5em

<div class="t_w">Example Long text for observation</div>

width set to third of parent's availablewwidth

Height

Sets the height of the selected element based on the parent font-size. (note: only up to 10 em is supported).

className patterns: h<n> while n is not greater than 100 and not smaller than 0, n is multiplied by 0.01 to form precise value starting from 0.01em to 10.00em.

<div class="h50">Example Long text for observation</div>

height been set to 5em

Floated Columns

(note: the elements applied this className category on, will be floated to the left, if you want to float to the right, add another className called "right")

Class Patterns:col<n> while n is any of [.5, 1 , 1.5 , 2 , 2.5 , 3 , 3.5 , 4 , 4.5 , 5 , 5.5 , 6 , 6.5 , 7 , 7.5 , 8 , 8.5 , 9 , 9.5 , 10 , 10.5 , 11 , 11.5 , 12]

<div class="col13">Example Long text for observation</div>

Example Long text for observation

Padding

Sets the space between the content of an element and its border.

Class Pattern: p<n> while n is not greater than 100 and not smaller than 0, n is multiplied by 0.01 to form precise value starting from 0.01em to 10.00em.

<div class="p5">padding is 0.5em</div>

padding is 0.5em

Margin

Margin Sets the space outside an element’s border. It controls how much space separates an element from other elements. Spacing elements apart, Creating whitespace, Centering elements (with auto )

Class Patterns: m<n> while n is not greater than 100 and not smaller than 0, n is multiplied by 0.01 to form precise value starting from 0.01em to 10.00em.

<div class="m55">Margin is 0.5em</div>

Margin is 0.5em

Flex

Sets the property "display" to "flex", used to arrange items in a flexible flow, making it easy to align, space, and distribute items—even when their sizes change. (note: can be used with className "wrap" to make the flex-flow: wrap)

ClassName: flex

<div class="flex">Example Long text for observation</div>

Flex (centered vertically and horizontally)

Similar to "flex" with additional two properties to center the items in the assigned element vertically and horizontally (note: to get more control add className "wrap" as well)

ClassName: c_flex

<div class="c_flex wrap gp5">Example Long text for observation</div>

<div class="c_flex gp5">Example Long text for observation</div>

Font-Size

sets the font-size property to the selected element using EM unit

Class Pattern: fs<n> while n is not greater than 100 and not smaller than 0, is multiplied by 0.01 to form precise value starting from 0.01em to 10.00em.

<div class="fs18">FontSize set to 1.8em</div>

FontSize set to 1.8em

Line-Height

sets the line-height property to the selected element using EM unit

Class Pattern: lh<n> while n is not greater than 100 and not smaller than 0, is multiplied by 0.01 to form precise value starting from 0.01em to 10.00em.

<div class="lh18">FontSize set to 1.8em</div>

LineHeight been set to 1.8em

Responsiveness related ClassNames

This category of classNames is responsible of the responsiveness, which mean the layout remains elegant in all expected or targeted device sizes. in AZ cloud, the main supported device-sizes are the following (along with their names/titles):

Extra Wide screen (min-width: 1921px): this is the default size of all none-prefixed classNames
Wide screen (min-width: 1441px): prefixed with w_<className>
Desktop screen (min-width: 993px) and (max-width: 1440px): prefixed with desk_<className>
Tablet screen (min-width: 481px) and (max-width: 992px): prefixed with tab_<className>
Mobile screen (max-width: 480px): prefixed with mob_<className>

Examples

width (responsive)

<div class="q_w w_t_w tab_h_w mob_f_w">a text content</div>

this element will have different width on different screensizes, on extra wide screen will have quarter width, on wide screens will have third of the width, on tablets will have half of the width and on mobile will have full width (try resize the screen or this window to test that)

border colors (responsive)

<div class="brdr5 solid black_brdr w_red_brdr desk_yellow_brdr tab_green_brdr mob_orange_brdr">content</div>

this element will have different border colors on different screensizes, on extra wide screen will be black, on wide screens will be red, on desktop will be yellow, on tablets will be green and on mobile will be orange (try resize the screen or this window to test that)

Common ClassNames

Notifications and alerts

(success/yes/ok) Block

<div class="ok">OK description</div>

Normal text with sub-text

(fail/no/serious) Block

<div class="no">No description</div>

Normal text with sub-text

(warn) Block

<div class="warn">Warning description</div>

Warning description

(highlighted) text

<div class="highlighted">Highlighted description</div>

Normal text with highlighted sub-text

(Danger) text

<div class="danger">Danger description</div>

Danger description

(Info) text

<div class="info">Information description</div>

Information description

Other (non-categorised) common classNames

To be listed soon..

Animation ClassNames

Mandatory className dependencies the animation depends on are ["az_anim" or "az_anim_hov"], while optional dependencies are ["dur_<n>", "repeat_<n>" or "infinite, "delay<n>"], which mean when you set an animation className like "spin" it will only work and animate when the mandatory dependency classNames are also present in the given component/element..!

Cube Rotate

<div class="cube_rotate az_anim dur_5 infinite">Foo</div>

Fron

Bottom

Top

Left

Right

Back

Blink Text

<div class="blink_txt az_anim dur_1 infinite">Foo</div>

Foo

Blink Background

<div class="blink_bg az_anim infinite">Foo</div>

Foo

Blink Box Shadow

<div class="blink_b_shadow az_anim dur_5 infinite">Foo</div>

Foo

Blink Border Right

<div class="blink_brdr_r az_anim dur_500 infinite">Foo</div>

Foo

Bounce

<div class="bounce az_anim dur_2 infinite">Foo</div>

Foo

Flash

<div class="flash az_anim dur_2 infinite">Foo</div>

Foo

Pulse

<div class="pulse az_anim dur_2 infinite">Foo</div>

Foo

RubberBand

<div class="rubberBand az_anim dur_2 infinite">Foo</div>

Foo

ShakeX

<div class="shakeX az_anim dur_2 infinite">Foo</div>

Foo

ShakeY

<div class="shakeY az_anim dur_2 infinite">Foo</div>

Foo

HeadShake

<div class="headShake az_anim dur_2 infinite">Foo</div>

Foo

Swing

<div class="swing az_anim dur_2 infinite">Foo</div>

Foo

Tada

<div class="tada az_anim dur_2 infinite">Foo</div>

Foo

Wobble

<div class="wobble az_anim dur_2 infinite">Foo</div>

Foo

Jello

<div class="jello az_anim dur_2 infinite">Foo</div>

Foo

BackInDown

<div class="backInDown az_anim dur_2 infinite">Foo</div>

Foo

BackInLeft

<div class="backInLeft az_anim dur_2 infinite">Foo</div>

Foo

BackInRight

<div class="backInRight az_anim dur_2 infinite">Foo</div>

Foo

BackInUp

<div class="backInUp az_anim dur_2 infinite">Foo</div>

Foo

BackOutDown

<div class="backOutDown az_anim dur_2 infinite">Foo</div>

Foo

BackOutLeft

<div class="backOutLeft az_anim dur_2 infinite">Foo</div>

Foo

BackOutRight

<div class="backOutRight az_anim dur_2 infinite">Foo</div>

Foo

BackOutUp

<div class="backOutUp az_anim dur_2 infinite">Foo</div>

Foo

BounceIn

<div class="bounceIn az_anim dur_2 infinite">Foo</div>

Foo

BounceInDown

<div class="bounceInDown az_anim dur_2 infinite">Foo</div>

Foo

BounceInLeft

<div class="bounceInLeft az_anim dur_2 infinite">Foo</div>

Foo

BounceInRight

<div class="bounceInRight az_anim dur_2 infinite">Foo</div>

Foo

BounceInUp

<div class="bounceInUp az_anim dur_2 infinite">Foo</div>

Foo

BounceOut

<div class="bounceOut az_anim dur_2 infinite">Foo</div>

Foo

BounceOutDown

<div class="bounceOutDown az_anim dur_2 infinite">Foo</div>

Foo

BounceOutLeft

<div class="bounceOutLeft az_anim dur_2 infinite">Foo</div>

Foo

BounceOutRight

<div class="bounceOutRight az_anim dur_2 infinite">Foo</div>

Foo

BounceOutUp

<div class="bounceOutUp az_anim dur_2 infinite">Foo</div>

Foo

HeartBeat

<div class="heartBeat az_anim dur_2 infinite">Foo</div>

Foo

BeatFade

<div class="beatFade az_anim dur_2 infinite">Foo</div>

Foo

FadeIn

<div class="fadeIn az_anim dur_2 infinite">Foo</div>

Foo

FadeInDown

<div class="fadeInDown az_anim dur_2 infinite">Foo</div>

Foo

FadeInDownBig

<div class="fadeInDownBig az_anim dur_2 infinite">Foo</div>

Foo

FadeInLeft

<div class="fadeInLeft az_anim dur_2 infinite">Foo</div>

Foo

FadeInLeftBig

<div class="fadeInLeftBig az_anim dur_2 infinite">Foo</div>

Foo

FadeInRight

<div class="fadeInRight az_anim dur_2 infinite">Foo</div>

Foo

FadeInRightBig

<div class="fadeInRightBig az_anim dur_2 infinite">Foo</div>

Foo

FadeInUp

<div class="fadeInUp az_anim dur_2 infinite">Foo</div>

Foo

FadeInUpBig

<div class="fadeInUpBig az_anim dur_2 infinite">Foo</div>

Foo

FadeInTopLeft

<div class="fadeInTopLeft az_anim dur_2 infinite">Foo</div>

Foo

FadeInTopRight

<div class="fadeInTopRight az_anim dur_2 infinite">Foo</div>

Foo

FadeInBottomLeft

<div class="fadeInBottomLeft az_anim dur_2 infinite">Foo</div>

Foo

FadeInBottomRight

<div class="fadeInBottomRight az_anim dur_2 infinite">Foo</div>

Foo

FadeOut

<div class="fadeOut az_anim dur_2 infinite">Foo</div>

Foo

FadeOutDown

<div class="fadeOutDown az_anim dur_2 infinite">Foo</div>

Foo

FadeOutDownBig

<div class="fadeOutDownBig az_anim dur_2 infinite">Foo</div>

Foo

FadeOutLeft

<div class="fadeOutLeft az_anim dur_2 infinite">Foo</div>

Foo

FadeOutLeftBig

<div class="fadeOutLeftBig az_anim dur_2 infinite">Foo</div>

Foo

FadeOutRight

<div class="fadeOutRight az_anim dur_2 infinite">Foo</div>

Foo

FadeOutRightBig

<div class="fadeOutRightBig az_anim dur_2 infinite">Foo</div>

Foo

FadeOutUp

<div class="fadeOutUp az_anim dur_2 infinite">Foo</div>

Foo

FadeOutUpBig

<div class="fadeOutUpBig az_anim dur_2 infinite">Foo</div>

Foo

FadeOutTopLeft

<div class="fadeOutTopLeft az_anim dur_2 infinite">Foo</div>

Foo

FadeOutTopRight

<div class="fadeOutTopRight az_anim dur_2 infinite">Foo</div>

Foo

FadeOutBottomRight

<div class="fadeOutBottomRight az_anim dur_2 infinite">Foo</div>

Foo

FadeOutBottomLeft

<div class="fadeOutBottomLeft az_anim dur_2 infinite">Foo</div>

Foo

Flip

<div class="flip az_anim dur_2 infinite">Foo</div>

Foo

FlipInX

<div class="flipInX az_anim dur_2 infinite">Foo</div>

Foo

FlipInY

<div class="flipInY az_anim dur_2 infinite">Foo</div>

Foo

FlipOutX

<div class="flipOutX az_anim dur_2 infinite">Foo</div>

Foo

FlipOutY

<div class="flipOutY az_anim dur_2 infinite">Foo</div>

Foo

LightSpeedInRight

<div class="lightSpeedInRight az_anim dur_2 infinite">Foo</div>

Foo

LightSpeedInLeft

<div class="lightSpeedInLeft az_anim dur_2 infinite">Foo</div>

Foo

LightSpeedOutRight

<div class="lightSpeedOutRight az_anim dur_2 infinite">Foo</div>

Foo

LightSpeedOutLeft

<div class="lightSpeedOutLeft az_anim dur_2 infinite">Foo</div>

Foo

RotateIn

<div class="rotateIn az_anim dur_2 infinite">Foo</div>

Foo

RotateInDownLeft

<div class="rotateInDownLeft az_anim dur_2 infinite">Foo</div>

Foo

RotateInDownRight

<div class="rotateInDownRight az_anim dur_2 infinite">Foo</div>

Foo

RotateInUpLeft

<div class="rotateInUpLeft az_anim dur_2 infinite">Foo</div>

Foo

RotateInUpRight

<div class="rotateInUpRight az_anim dur_2 infinite">Foo</div>

Foo

RotateOut

<div class="rotateOut az_anim dur_2 infinite">Foo</div>

Foo

RotateOutDownLeft

<div class="rotateOutDownLeft az_anim dur_2 infinite">Foo</div>

Foo

RotateOutDownRight

<div class="rotateOutDownRight az_anim dur_2 infinite">Foo</div>

Foo

RotateOutUpLeft

<div class="rotateOutUpLeft az_anim dur_2 infinite">Foo</div>

Foo

RotateOutUpRight

<div class="rotateOutUpRight az_anim dur_2 infinite">Foo</div>

Foo

Hinge

<div class="hinge az_anim dur_2 infinite">Foo</div>

Foo

JackInTheBox

<div class="jackInTheBox az_anim dur_2 infinite">Foo</div>

Foo

RollIn

<div class="rollIn az_anim dur_2 infinite">Foo</div>

Foo

RollOut

<div class="rollOut az_anim dur_2 infinite">Foo</div>

Foo

ZoomIn

<div class="zoomIn az_anim dur_2 infinite">Foo</div>

Foo

ZoomInDown

<div class="zoomInDown az_anim dur_2 infinite">Foo</div>

Foo

ZoomInLeft

<div class="zoomInLeft az_anim dur_2 infinite">Foo</div>

Foo

ZoomInRight

<div class="zoomInRight az_anim dur_2 infinite">Foo</div>

Foo

ZoomInUp

<div class="zoomInUp az_anim dur_2 infinite">Foo</div>

Foo

ZoomOut

<div class="zoomOut az_anim dur_2 infinite">Foo</div>

Foo

ZoomOutDown

<div class="zoomOutDown az_anim dur_2 infinite">Foo</div>

Foo

ZoomOutLeft

<div class="zoomOutLeft az_anim dur_2 infinite">Foo</div>

Foo

ZoomOutRight

<div class="zoomOutRight az_anim dur_2 infinite">Foo</div>

Foo

ZoomOutUp

<div class="zoomOutUp az_anim dur_2 infinite">Foo</div>

Foo

SlideInDown

<div class="slideInDown az_anim dur_2 infinite">Foo</div>

Foo

SlideInLeft

<div class="slideInLeft az_anim dur_2 infinite">Foo</div>

Foo

SlideInRight

<div class="slideInRight az_anim dur_2 infinite">Foo</div>

Foo

SlideInUp

<div class="slideInUp az_anim dur_2 infinite">Foo</div>

Foo

SlideOutDown

<div class="slideOutDown az_anim dur_2 infinite">Foo</div>

Foo

SlideOutLeft

<div class="slideOutLeft az_anim dur_2 infinite">Foo</div>

Foo

SlideOutRight

<div class="slideOutRight az_anim dur_2 infinite">Foo</div>

Foo

SlideOutUp

<div class="slideOutUp az_anim dur_2 infinite">Foo</div>

Foo

SlideThroughLeft

<div class="slideThroughLeft az_anim dur_2 infinite">Foo</div>

Foo

SlideThroughRight

<div class="slideThroughRight az_anim dur_2 infinite">Foo</div>

Foo

SlideThroughUp

<div class="slideThroughUp az_anim dur_2 infinite">Foo</div>

Foo

SlideThroughDown

<div class="slideThroughDown az_anim dur_2 infinite">Foo</div>

Foo

ScaleIn

<div class="scaleIn az_anim dur_2 infinite">Foo</div>

Foo

GradientShift text

<div class="absolute az_anim dur_2 gradientShift infinite red_green_150">Foo</div>

Foo

GradientShift bg

<div class="absolute az_anim dur_2 gradientShift infinite red_black_150bg">Foo</div>

Foo

FadeEffect

<div class="fadeEffect az_anim dur_2 infinite">Foo</div>

Foo

Spin

<div class="spin az_anim dur_2 infinite">Foo</div>

Foo

Spin background image

<div class="spinBg az_anim dur_2 infinite">Foo</div>

Foo

Spin Conic Gradient

<div class="spinConicGrad az_anim dur_2 infinite">Foo</div>

Foo