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 (transparency).

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

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>_brdr_t or clr<n>_brdr_t
<namedColor>_brdr_r or clr<n>_brdr_r
<namedColor>_brdr_b or clr<n>_brdr_b
<namedColor>_brdr_l or clr<n>_brdr_l

<div class="purple_brdr_t green_brdr_r yellow_brdr_b red_brdr_l 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

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_clr6_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 transparency)

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">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

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

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)