Class Names
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
Blue Stroke
Blue Stroke
<div class="redstrk">red Stroke</div>
Blue Stroke
Blue Stroke
Blue Stroke
<div class="redstrk yellow">red Stroke with yellow color</div>
Blue Stroke
Blue Stroke
Blue Stroke
<div class="clr3strk">3rd dynamic site color Stroke</div>
clr3 Stroke
clr3 Stroke
clr3 Stroke
<div class="clr3trstrk">3rd color with a bit of transparency</div>
clr3tr Stroke
clr3tr Stroke
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>
SlideInLeft
<div class="slideInLeft az_anim dur_2 infinite">Foo</div>
SlideInRight
<div class="slideInRight az_anim dur_2 infinite">Foo</div>
SlideInUp
<div class="slideInUp az_anim dur_2 infinite">Foo</div>
SlideOutDown
<div class="slideOutDown az_anim dur_2 infinite">Foo</div>
SlideOutLeft
<div class="slideOutLeft az_anim dur_2 infinite">Foo</div>
SlideOutRight
<div class="slideOutRight az_anim dur_2 infinite">Foo</div>
SlideOutUp
<div class="slideOutUp az_anim dur_2 infinite">Foo</div>
SlideThroughLeft
<div class="slideThroughLeft az_anim dur_2 infinite">Foo</div>
SlideThroughRight
<div class="slideThroughRight az_anim dur_2 infinite">Foo</div>
SlideThroughUp
<div class="slideThroughUp az_anim dur_2 infinite">Foo</div>
SlideThroughDown
<div class="slideThroughDown az_anim dur_2 infinite">Foo</div>
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
Foo
Spin Conic Gradient
<div class="spinConicGrad az_anim dur_2 infinite">Foo</div>
Foo