# Helpers

###### Quickly fix layouts, manage positions, add shadows, and more

## 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
Select range
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)
Step 1: Select Background
Step 2: Select Gradient

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

#### Hi Sunny,

how can I help you today?
Analyze my data

Create a new report

Summarize my Calendar

App Builder
Unlock limitless design potential with 16+ layout combinations and extensive customization options—tailor your dashboard to fit your exact needs.
Header position fixed
Navigation full height
Navigation position fixed
Navigation collapsed
Navigation Minified
Dark Navigation
Colorblind Mode
High Contrast Mode