Flowkit v2.0.0

Utility Classes

All utility classes use descriptive naming that describes exactly what they are doing.

Utilities are a collection of modifier classes that fine-tune layouts and components and keep consistency. You can add a utility class 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. For instance, if you want to add a shadow to a card, you can add shadow utility class as a combo class for a card:

Margins and Padding

Margins and padding 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: margin-direction_value

Margin All

  • Value: none, xxsmall, xsmall, small, medium, large, xlarge, xxlarge, auto

Example: margin_xxsmall , margin_none

Margin Vertical

  • Direction: top, bottom
  • Value: none, xxsmall, xsmall, small, medium, large, xlarge, xxlarge, auto

Example: margin-top_xsmall , margin-bottom_large

Margin Horizontal

  • Direction: left, right, all
  • Value: none, xxsmall, xsmall, small, medium, auto

Example: margin-right_small , margin-left_auto

Padding

Padding defines the space inside of an element.

Margin
Padding

Content

Utility classes use this structure: padding-direction_value

Padding Vertical

  • Direction: top, bottom
  • Value: none, xxsmall, xsmall, small, medium, large, xlarge, xxlarge

Example: padding-top_small

Padding Horizontal

  • Direction: left, right
  • Value: none, xxsmall, xsmall, small, medium, large

Example: padding-right_xsmall

Padding Around

  • Value: none, xxsmall, xsmall, small, medium, large, xlarge, xxlarge

Example: padding_none , padding_large

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:

margin-top_xlarge
  • 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
display_blockForces element to behave as block
display_inline-blockElement behaves like inline-block
display_noneHides element from layout
overflow_clipClips overflow without scroll
overflow_hiddenHides overflow, no scroll
overflow_visibleMakes overflow content visible
overflow_autoScrollbars appear as needed
screen-readerVisible to screen readers only

Position

Controls element positioning behavior across breakpoints.

Desktop

ClassDescription
position_relativeOffsets relative to normal position
position_absoluteRemoves from flow, absolute position
position_fixedFixed relative to viewport
position_fixed is-topFixed to top edge
position_fixed is-leftFixed to left edge
position_fixed is-rightFixed to right edge
position_stickySticks to top on scroll
position_sticky is-top_largeCustom offset sticky
position_sticky is-desktop-onlySticky only on desktop
position_staticDefault positioning
z-index_1Layer stacking with values 1–5

Tablet

ClassDescription
position_absolute_tabletSet position absolute on tablet
position_relative_tabletSet position relative on tablet
position_static_tabletSet position static on tablet

Mobile

ClassDescription
position_sticky_mobileMobile-only sticky support

Transform

Controls element translation and rotation.

ClassDescription
move-up_15percentShifts element upward by 15%
move-up_50percentShifts element upward by 50%
move-down_15percentShifts element downward by 15%
move-down_25percentShifts element downward by 25%
move-down_50percentShifts element downward by 50%
rotate_-12degRotates element left by 12 degrees
rotate_-4.5degRotates element left by 4.5 degrees
rotate_12degRotates element right by 12 degrees
rotate_4.5degRotates element right by 4.5 degrees

Width

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

Desktop

ClassDescription
max-width_xsmallRestricts max width to xsmall
max-width_smallRestricts max width to small
max-width_mediumRestricts max width to medium
max-width_largeRestricts max width to large
width_autoWidth auto based on content
width_smallSmall fixed width
width_mediumMedium fixed width
width_35percentWidth set to 35%
width_40percentWidth set to 40%
width_50percentWidth set to 50%
width_60percentWidth set to 60%
width_100percentWidth set to 100%

Tablet

ClassDescription
width_50percent_tabletSets width to 50% on tablets
width_60percent_tabletSets width to 60% on tablets
width_100percent_tabletSets width to 100% on tablets

Mobile Landscape

ClassDescription
width_70percent_mobile-lSets width to 70%
width_80percent_mobile-lSets width to 80%
width_100percent_mobile-lSets width to 100%

Mobile Portrait

ClassDescription
width_100percent_mobileSets width to 100%

Height

Controls element height and minimum height behavior across breakpoints.

Desktop

ClassDescription
height_100percentFull height of parent
height_100dvhFull dynamic viewport height
min-height_100percentMinimum height 100%
min-height_100dvhMinimum height 100% dynamic viewport
height_50vh50% of viewport height
height_100vh100% of viewport height

Tablet

ClassDescription
height_auto_tabletSets height auto on tablets
min-height_auto_tabletSets 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.

  • radius_card
  • radius_button

Size Specific

Use the radius_size format to control element corner roundness.
The size follows t-shirt sizing convention: small, medium, large, xlarge, round

Example: radius_large

Side-specific

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

  • radius_all-0
  • radius_top-0
  • radius_right-0
  • radius_bottom-0
  • radius_left-0

Mask

Use utility mask classes 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:

  • mask_top
  • mask_bottom
  • mask_left
  • mask_right
  • mask_fade-horizontal
  • mask_fade-vertical

Example:

image mask_bottom

Overlay

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

ClassDescription
overlayAdds a dark semi-transparent background
overlay is-inverseAdds a light semi-transparent background
overlay_opacity-lowAdds a low opacity overlay

Link Overlay

ClassDescription
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 mask_top
  • overlay mask_left

Drop Shadow

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

  • shadow_xxsmall
  • shadow_xsmall
  • shadow_small
  • shadow_medium
  • shadow_large
  • shadow_xlarge
  • shadow_xxlarge

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.

  • text-color_primary
  • text-color_secondary
  • text-color_inverse
  • text-color_inverse-secondary
  • text-color_accent-primary
  • text-color_accent-secondary
  • text-color_accent-tertiary
  • text-color_accent-on-inverse
  • text-color_accent-on-primary
  • text-color_on-accent-primary
  • text-color_on-accent-secondary
  • text-color_on-overlay

Text Alignment

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

  • text-align_left
  • text-align_center
  • text-align_right

Responsive modifiers:

  • text-align_center_tablet
  • text-align_center_mobile-l
  • text-align_center_mobile

Misc

ClassDescription
events_noneDisables pointer events
events_autoEnables pointer events