Utilites provide easy wa to perform adjustment with additional classes created to perfor specific action. Please refer below utilites and their respective usage

Width & Height

Aurora-Fusion provides muletiple Width & Height classes. These classes use format (property)-(width percentage) format. Width percentage range as multipe of 10. The digits in classname denotes the percentage of width it will consume after applying the class. Below are the all classses available for width.

Width classes starts with .w- & height classes starts with .h-

While width percentage ranges as below:

• 10
• 20
• 25
• 30
• 40
• 50
• 60
• 70
• 75
• 80
• 90
• 100

Here is the example of single width class : .w-50

Margin & Padding

Positioning

These utility classes are named using the format (property)-(value)

Where property is one of the

• Position - Sets position type of element
• Sets offset directions like top , bottom , start , end

And value is one of the

• For Position - static, relative, absolute, fixed, sticky
• For offset values - 0, 50, 100 - which translate to % values like top: 50%

Below is the list of position types

• .position-static
• .position-relative
• .position-absolute
• .position-fixed
• .position-sticky

Below is the list of Top types. Similary you can use for bottom , start , end offsets

• .top-0
• .top-50
• .top-100

These are shortcut classes to commonly used fixed or sticky layouts

• .fixed-top
• .fixed-bottom
• .sticky-top
• .sticky-bottom

Border

These border classes are named using the format (property)-(value)

Where property is one of the

• border - for setting border style, width, color, & side

And value is one of the

• Style - solid, dashed, dotted, double, none
• Width - thick, thin
• Color - sub, success, warning, danger, info
• Side - top, Bottom, Start, End

Overflow

These overflow classes are named using the format (property)-(value)

Where property is one of the

• overflow - for controlling content overflow on elements

And value is one of the

• Behavior - auto, scroll, hidden, none
• Axis - x, y

• .overflow-auto - Enables scrollbars only when content overflows
• .overflow-hidden - Completely hides overflowing content
• .overflow-scroll - Always shows scrollbars
• .overflow-none - Disables scrolling without using hidden layout (uses clip)

• .overflow-x-auto - Enables horizontal scrolling when needed
• .overflow-y-auto - Enables vertical scrolling when needed
• .overflow-x-hidden - Hides horizontal overflow
• .overflow-y-hidden - Hides vertical overflow
• .overflow-x-scroll - Always show horizontal scrollbar
• .overflow-y-scroll - Always show vertical scrollbar
• .overflow-x-none - Disables horizontal scrolling using clip
• .overflow-y-none - Disables vertical scrolling using clip

Border Radius

These border radius classes are named using the format (property)-(value)

Where property is one of the

• rounded - for setting border-radius globally or on specific sides

And value is one of the

• Size - 0, 1, 2, 3, 4, 5
• Shape - circle, pill
• Side - top, bottom, start, end

• .rounded-0 - No rounding (square corners)
• .rounded-1 - Small border radius
• .rounded-2 - Default border radius
• .rounded-3 - Large border radius
• .rounded-4 - Extra large border radius
• .rounded-5 - 2x Extra large border radius

• .rounded-circle - Fully rounded (circular)
• .rounded-pill - Capsule-shaped (pill)

Apply radius to specific sides with optional size or shape

• .rounded-top - Default radius on top corners
• .rounded-top-0 to .rounded-top-5 - Sets varying sizes
• .rounded-top-circle, .rounded-top-pill - Shape-based rounding

• .rounded-bottom - Default radius on bottom corners
• .rounded-bottom-0 to .rounded-bottom-5 - Sets varying sizes
• .rounded-bottom-circle, .rounded-bottom-pill - Shape-based rounding

• .rounded-start - Default radius on left/start corners
• .rounded-start-0 to .rounded-start-5 - Sets varying sizes
• .rounded-start-circle, .rounded-start-pill - Shape-based rounding

• .rounded-end - Default radius on right/end corners
• .rounded-end-0 to .rounded-end-5 - Sets varying sizes
• .rounded-end-circle, .rounded-end-pill - Shape-based rounding

Shadow

These shadow classes are named using the format (property)-(value)

Where property is one of the

• shadow - for applying elevation effects to elements using box shadows

And value is one of the

• Size - sm, lg
• None - none to remove shadow

• .shadow - Applies default base shadow
• .shadow-sm - Applies subtle/small shadow
• .shadow-lg - Applies large/deep shadow

• .shadow-none - Removes any existing box shadow

Display

These display classes are named using the format (property)-(value)

Where property is one of the

• d - for controlling the display behavior of elements

And value is one of the

• Type - block, inline-block, flex, inline-flex
• Visibility - none to hide elements

• .d-block - Displays the element as a block
• .d-inline-block - Displays the element as an inline-level block container
• .d-flex - Displays the element as a flex container
• .d-inline-flex - Displays the element as an inline-level flex container

• .d-none - Completely hides the element from the layout

Flex & Float

These classes are named using the format (property)-(value)

Where property is one of the

• flex - for setting flex layout direction
• float - for floating elements

And value is one of the

• Direction - row, column
• Side - start, end

• .flex-row - Applies display: flex in row direction with 8px gap
• .flex-column - Applies display: flex in column direction with 8px gap

• .float-start - Floats the element to the left
• .float-end - Floats the element to the right

Vertical & Horizontal Alignment

These alignment classes are named using the format (property)-(value)

Where property is one of the

• v-align - for inline or table-cell vertical alignment
• justify-content - for horizontal alignment in flex containers
• align-items - for vertical alignment in flex containers
• align-content - for vertical alignment across lines in flex-wrap layouts
• align-self - for aligning a single item independently

And value is one of the

• Vertical - top, middle, bottom, baseline, text-top, text-bottom
• Horizontal - start, end, center, between, around, stretch, baseline, auto

• .v-align-baseline - Aligns with the baseline of the parent
• .v-align-top - Aligns to the top of the line box
• .v-align-middle - Aligns to the middle of the line box
• .v-align-bottom - Aligns to the bottom of the line box
• .v-align-text-top - Aligns to the top of the parent text
• .v-align-text-bottom - Aligns to the bottom of the parent text

• .justify-content-start - Aligns items to the start of the main (horizontal) axis
• .justify-content-end - Aligns items to the end of the main axis
• .justify-content-center - Centers items horizontally
• .justify-content-between - Places space between items
• .justify-content-around - Places space around items
• .justify-content-aunly - Places equal space between and around items (note: check for typo — likely meant to be evenly)

• .align-items-start - Aligns items to the start of the cross (vertical) axis
• .align-items-end - Aligns items to the end of the cross axis
• .align-items-center - Centers items vertically
• .align-items-baseline - Aligns items along the text baseline
• .align-items-stretch - Stretches items to fill container height

• .align-content-start - Aligns rows to the top
• .align-content-end - Aligns rows to the bottom
• .align-content-center - Centers rows vertically
• .align-content-between - Distributes space between rows
• .align-content-around - Distributes space around rows
• .align-content-stretch - Stretches rows to fill vertical space

• .align-self-auto - Resets to default alignment
• .align-self-start - Aligns the item to the top of the cross axis
• .align-self-end - Aligns the item to the bottom of the cross axis
• .align-self-center - Centers the item on the cross axis
• .align-self-baseline - Aligns the item to its text baseline
• .align-self-stretch - Stretches the item to fill available space

Text Utilities

These text utility classes are named using the format (property)-(value)

Where property is one of the

• text - for alignment, color, weight, size, and effects
• line - for controlling line height

And value is one of the

• Alignment - start, end, center
• Size - xs, sm, lg, xl, 2xl, 3xl, 4xl
• Weight - light, normal, medium, bold
• Line Height - tight, normal, loose
• Color - success, warning, danger, info, accent, neutral
• Effect - glow, clear, subbed

• .text-start - Aligns text to the left
• .text-end - Aligns text to the right
• .text-center - Centers the text

• .text-xs - 8px font size
• .text-sm - 10px font size
• .text-lg - 16px font size
• .text-xl - 20px font size
• .text-2xl - 24px font size
• .text-3xl - 32px font size
• .text-4xl - 40px font size

• .line-tight - Sets line height to 1.2
• .line-normal - Sets line height to 1.5
• .line-loose - Sets line height to 1.75

• .text-light - Applies font-weight: 300
• .text-normal - Applies font-weight: 400
• .text-medium - Applies font-weight: 500
• .text-bold - Applies font-weight: 600

• .text-success - Success color (e.g., green)
• .text-warning - Warning color (e.g., yellow)
• .text-danger - Danger color (e.g., red)
• .text-info - Info color (e.g., blue)
• .text-accent - Accent color (theme-based highlight)
• .text-neutral - Subdued neutral text color

• .text-glow - Applies glowing text-shadow effect
• .text-clear - Removes underline or other decorations
• .text-subbed - Applies smaller font, uppercase, spaced subtext styling