Flowkit (Beta)

Utilitity Classes

Utilities are a collection of modifier classes that fine-tune layouts and components and keep consistency. You can add a utility classes as a combo class to adjust a behavior of the main class or apply it as a main class to define the functionality of an element. Fo instance, if you want to add a shadow to a card, you can add shadow utility class as a combo class for a card:

All utility classes are prefixed with [Utility]. The naming of the utility class describes exactly what it is doing.

Margins and Paddings

Margins and paddings are applied to sections, containers, and other elements to define inner spacing or distance between elements.

Margin

Margin defines the space outside of an element.

Margin
Padding

Content

Utility classes use this structure: [Utility] Margin Direction Value

Margin Vertical

  • Direction: Top, Bottom
  • Value: 0, 0.5rem, 1rem, 2rem, 3rem, 4rem, 5rem, 6rem, 7rem, 8rem, Auto

Margin Horizontal

  • Direction: Left, Right, All
  • Value: 0, 0.5rem, 1rem, 2rem, Auto

Utility classes

ClassDescription
[Utility] Margin All 0Remove all margin
[Utility] Margin All 0.5remApply 0.5rem margin all sides
[Utility] Tablet Margin Top 0Top margin 0 on Tablet
[Utility] Mobile Margin Top 0Top margin 0 on Mobile

Padding

Padding defines the space inside of an element.

Margin
Padding

Content

Utility classes use this structure: [Utility] Padding Direction Value

Padding Vertical

  • Direction: Top, Bottom
  • Value: 0, 0.5rem, 1rem, 2rem, 3rem, 4rem, 5rem, 6rem, 7rem, 8rem

Padding Horizontal

  • Direction: Left, Right
  • Value: 1rem, 2rem

Padding Around

  • Direction: All
  • Value: 0, 0.5rem, 1rem, 2rem, 3rem, 4rem

Padding Utilities

ClassDescription
[Utility] Tablet Padding All 0Remove all padding on Tablet
[Utility] Tablet Padding All 1remPadding 1rem on Tablet

Responsive Spacing

On smaller screens (like Mobile Landscape), some margin and padding utility classes will use smaller spacing variables than their desktop counterparts.

For example:

[Utility] Margin Top 6rem
  • 6x on desktop,
  • 3x on mobile devices.

This behavior ensures better vertical rhythm and balance on smaller screens without needing to apply breakpoint-specific classes manually.

Display and Overflow

Utilities to control layout visibility and content flow.

ClassDescription
[Utility] Display BlockForces element to behave as block
[Utility] Display Inline BlockElement behaves like inline-block
[Utility] Display NoneHides element from layout
[Utility] Overflow ClipClips overflow without scroll
[Utility] Overflow HiddenHides overflow, no scroll
[Utility] Overflow VisibleMakes overflow content visible
[Utility] Overflow AutoScrollbars appear as needed
[Utility] Screen Reader Visible OnlyVisible to screen readers only

Position

Controls element positioning behavior across breakpoints.

Desktop

ClassDescription
[Utility] Position RelativeOffsets relative to normal position
[Utility] Position AbsoluteRemoves from flow, absolute position
[Utility] Position FixedFixed relative to viewport
[Utility] Position Fixed Fixed TopFixed to top edge
[Utility] Position Fixed Fixed LeftFixed to left edge
[Utility] Position Fixed Fixed RightFixed to right edge
[Utility] Position StickySticks to top on scroll
[Utility] Position Sticky Top 120Custom offset sticky
[Utility] Position Sticky Sticky DesktopSticky only on desktop
[Utility] Position StaticDefault positioning
[Utility] Z-Index 1Layer stacking with values 1–5

Tablet

ClassDescription
[Utility] Tablet Position AbsoluteSet position absolute on tablet
[Utility] Tablet Position RelativeSet position relative on tablet
[Utility] Tablet Position StaticSet position static on tablet

Mobile

ClassDescription
[Utility] Position Sticky Sticky MobileMobile-only sticky support

Transform

Controls element translation and rotation.

ClassDescription
[Utility] Move Up 15%Shifts element upward by 15%
[Utility] Move Up 50%Shifts element upward by 50%
[Utility] Move Down 15%Shifts element downward by 15%
[Utility] Move Down 25%Shifts element downward by 25%
[Utility] Move Down 50%Shifts element downward by 50%
[Utility] Rotate -12Rotates element left by 12 degrees
[Utility] Rotate -4.5Rotates element left by 4.5 degrees
[Utility] Rotate 12Rotates element right by 12 degrees
[Utility] Rotate 4.5Rotates element right by 4.5 degrees

Width

Controls fixed, responsive, and percentage-based width settings.

Desktop

ClassDescription
[Utility] Max Width XSRestricts max width to XS
[Utility] Max Width SMRestricts max width to SM
[Utility] Max Width MDRestricts max width to MD
[Utility] Max Width LGRestricts max width to LG
[Utility] Width AutoWidth auto based on content
[Utility] Width SMSmall fixed width
[Utility] Width MDMedium fixed width
[Utility] Width 35%Width set to 35%
[Utility] Width 40%Width set to 40%
[Utility] Width 60%Width set to 60%

Tablet

ClassDescription
[Utility] Tablet Width 50%Sets width to 50% on tablets
[Utility] Tablet Width 60%Sets width to 60% on tablets
[Utility] Tablet Width 100%Sets width to 100% on tablets

Mobile Landscape

ClassDescription
[Utility] Mobile Landscape Width 70%Sets width to 70%
[Utility] Mobile Landscape Width 80%Sets width to 80%
[Utility] Mobile Landscape Width 100%Sets width to 100%

Mobile Portrait

ClassDescription
[Utility] Mobile Portrait Width 100%Sets width to 100%

Height

Controls element height and minimum height behavior across breakpoints.

Desktop

ClassDescription
[Utility] Height 100%Full height of parent
[Utility] Min Height 100%Minimum height 100%
[Utility] Viewport Height 5050% of viewport height
[Utility] Viewport Height 100100% of viewport height

Tablet

ClassDescription
[Utility] Tablet Height AutoSets height auto on tablets
[Utility] Tablet Min Height AutoSets min-height auto on tablets

Border Radius

Controls element corner roundness using utility classes.

Component Specific

These are helpful when you need to customize or reset corners without affecting the base component class.

  • [Utility] Radius Card
  • [Utility] Radius Button

Size Specific

Use the [Utility] Radius Size format to control element corner roundness.
The Size follows t-shirt sizing convention: SM, MD, LG, XL, Round

Example: [Utility] Radius LG

Side-specific

These utilities give you full control when working with overlapping sections, containers with flush corners, or when selectively removing roundness.

  • [Utility] Radius All 0
  • [Utility] Radius Top 0
  • [Utility] Radius Right 0
  • [Utility] Radius Bottom 0
  • [Utility] Radius Left 0

Mask

Use utility mask classes [Utility] Mask (Direction) to apply directional fades to images or elements.
These are commonly paired with Overlay and Image

Apply one of the following as a combo class:

  • [Utility] Mask Top
  • [Utility] Mask Bottom
  • [Utility] Mask Left
  • [Utility] Mask Right
  • [Utility] Mask Horizontal Fade
  • [Utility] Mask Vertical Fade

Example:

Image [Utility] Mask Bottom

Overlay

Overlay classes are used to create translucent layers above content.
They are commonly used to improve readability on background images or to emphasize text.

ClassDescription
OverlayAdds a dark semi-transparent background
Inverse OverlayAdds a light semi-transparent background

Link Overlay

ClassDescription
[Utility] Link OverlayExpands a link to cover its entire container (use inside position: relative)

Overlay with Mask

Combine Overlay with directional mask utility classes to create faded on a side images or faded overlays.

Example:

  • Overlay [Utility] Mask Top
  • Overlay [Utility] Mask Left

Drop Shadow

Add subtle or strong depth to elements using drop shadow utility classes.

  • [Utility] Shadow XXS
  • [Utility] Shadow XS
  • [Utility] Shadow SM
  • [Utility] Shadow MD
  • [Utility] Shadow LG
  • [Utility] Shadow XL
  • [Utility] Shadow XXL

Typography

These utility classes allow you to control alignment and color of text elements globally or responsively.

Text Color

These utility classes are used to apply specific text colors to an element.

  • [Utility] Text Primary
  • [Utility] Text Secondary
  • [Utility] Text Inverse
  • [Utility] Text Inverse Secondary
  • [Utility] Text Accent Primary
  • [Utility] Text Accent Secondary
  • [Utility] Text Accent Tertiary
  • [Utility] Text Accent On Inverse
  • [Utility] Text Accent On Primary
  • [Utility] Text On Accent Primary
  • [Utility] Text On Accent Secondary

Text Alignment

Text alignment utilities let you override the default left-aligned behavior.

  • [Utility] Text Align Left
  • [Utility] Text Align Center
  • [Utility] Text Align Right

Responsive modifiers:

  • [Utility] Text Align Center Tablet
  • [Utility] Text Align Right Mobile

Misc

Other utility helpers for visual effects and behaviors.

ClassDescription
[Utility] Filter InvertInverts colors (dark/light mode)
[Utility] Text Decoration NoneRemoves underline from links or text
[Utility] Backdrop Filter BlurApplies backdrop blur filter
[Utility] Link Content BlockExpands link to fill container