Row grids

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

Position and z-index

Control position with the codes start-0, end-0, top-0, bottom-0, and translate-middle;
.top-0 .start-0
.top-0 .end-0
.top-50 .start-50
.bottom-50 .end-50
.bottom-0 .start-0
.bottom-0 .end-0
.translate-middle

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
Example

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

Focus Rings

The .focus-ring helper removes the default outline on :focus, replacing it with a box-shadow that can be more broadly customized. The new shadow is made up of a series of CSS variables, inherited from the :root level, that can be modified for any element or component.

Primary focus

Secondary focus

Success focus

Danger focus

Warning focus

Info focus

Light focus

Dark focus

Background Tricks

The .bg-placeholder is used to create a placeholder background for elements. Use the .translucent-light or .translucent-dark classes (along with other supporting classes) to add a translucent background.

.translucent-light
.translucent-dark

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

Z-index Presets

We call these “low-level” z-index utilities because of their default values of -1 through 3, which we use for the layout of overlapping components. High-level z-index values are used for overlay components like modals and tooltips.
z-3
z-2
z-1
z-0
z-n1

Ratio & Object Fit

Use the .ratio class to create a responsive ratio for an element. Use the .object-fit class to control how an element is resized to fit its container.
1x1
4x3
16x9
21x9