1. Axs
  2. Utilities
  3. Helpers

Helpers helpers description

Row grids

Add borders to your columns by adding .row-grid to any .row, make sure to include .no-gutters modifer

Position and z-index

Control position with the codes pos-left, pos-right, pos-top, pos-botom; you can also control z-index values, which has 3 generic settings, going from higest value to lowest: z-index-space, z-index-cloud, z-index-ground, z-index-water
pos-top pos-left
pos-top pos-right
pos-bottom pos-left
pos-bottom pos-right

Demo window

Use demo window wrapper .demo-window to portray a focal point for images, demo objects, data, tables or layout properties. Place content inside .demo-window-content
You can place any html objects in here.

Opacity presets

Uniform widths to keep things aligned. See helpers.scss file for more details. You can also set .width-0 to remove any given width, or you can use .w-auto to undo explicitly specified widths
Class
.opacity-5

Hover background

Hover any background with .hover-bg
Parent class

bg-primary-500 color-fusion-300

Child class

hover-bg

Parent class

bg-info-500 color-fusion-300

Child class

hover-bg

Parent class

bg-warning-500 color-fusion-300

Child class

hover-bg

Parent class

bg-success-500 color-fusion-300

Child class

hover-bg

Parent class

bg-danger-500 color-fusion-300

Child class

hover-bg

Parent class

bg-fusion-500 color-white

Child class

hover-bg

Cursor pointers

Change your cursor pointer with these classes
cursor-auto
cursor-crosshair
cursor-default
cursor-e-resize
cursor-help
cursor-move
cursor-n-resize
cursor-ne-resize
cursor-nw-resize
cursor-pointer
cursor-progress
cursor-s-resize
cursor-se-resize
cursor-sw-resize
cursor-text
cursor-w-resize
cursor-wait
cursor-inherit

Shadow Presets

Add shadow presets for depth on elements
Class

.shadow-none

Class

.shadow-1

Class

.shadow-2

Class

.shadow-3

Class

.shadow-4

Class

.shadow-5

Class

.shadow-sm

Class

.shadow

Class

.shadow-lg

Class

.shadow-inset-1

Class

.shadow-inset-2

Class

.shadow-inset-3

Class

.shadow-inset-4

Class

.shadow-inset-5

Shadow Hovers

a
Class

.shadow-hover-1

Class

.shadow-hover-2

Class

.shadow-hover-3

Class

.shadow-hover-4

Class

.shadow-hover-5

Class

.shadow-sm-hover

Class

.shadow-hover

Class

.shadow-lg-hover

Class

.shadow-hover-inset-1

Class

.shadow-hover-inset-2

Class

.shadow-hover-inset-3

Class

.shadow-hover-inset-4

Class

.shadow-hover-inset-5

Child Hover

Hide and display child elements on hover
Children is hidden on hover .hide-child-on-hover
This element is visible .hide-on-hover-parent
Children is shown on hover .show-child-on-hover
This element is hidden .show-on-hover-parent

Gradient presets

There are 8 different gradients that you can mix and match with different background colors. The gradient classes are .bg-primary-gradient, .bg-info-gradient, .bg-success-gradient, .bg-warning-gradient, .bg-danger-gradient, .bg-fusion-gradient, .bg-brand-gradient, and .bg-trans-gradient (which requires .text-white modifier)

Header 3 Subheader text

Paragraph text, in bold, italic, and underlined