Flowkit (Beta)Components

Images

Class Naming

Images are styled using reusable classes that control fitting behavior and aspect ratio. They also apply consistent styling like border-radius using a design token.

Image Fit

Use the base class Image to define the image element.
Use the combo class Cover Image to ensure the image covers its container fully.

Radius

All images — including elements with the tag Image, or using the classes Image and Cover Image — have rounded corners applied through the variable Image Radius.

To override this and make the corners square, use the combo class [Utility] Radius All 0

Aspect Ratio

Aspect ratio combo classes must be applied on top of the Cover Image class to take effect.

Why? Because the image needs to stretch to fill the area defined by the ratio box — if only the ratio is set without forcing coverage, the image may not respect the ratio area.

Available combo classes:

  • [Utility] Aspect 1x1
  • [Utility] Aspect 16x9
  • [Utility] Aspect 3x2
  • [Utility] Aspect 4x3
  • [Utility] Aspect 2x2.5
  • [Utility] Aspect 2x3

Exasmple:

Cover Image [Utility] Aspect 2x3

Responsive Modifiers

You can use responsive combo classes to change aspect ratio behavior on different breakpoints. For example, you may want to simplify layouts on smaller screens or reset custom ratios back to auto.

Tablet

  • [Utility] Tablet Aspect 3x2
  • [Utility] Tablet Aspect 1x1

Mobile Landscape

  • [Utility] Mobile Landscape Aspect Auto

These modifiers are added in combination with the base Cover Image class and optionally other aspect combo classes.

Icons

Icons are scalable, visual indicators used throughout the UI. They rely on a base class for consistent sizing and alignment, and support modifiers for scale and contextual styling.

The base class is Icon

Size Modifiers

These adjust the scale of the icon element relative to the surrounding layout.

  • Icon Extra Small
  • Icon Small
  • Icon Large
  • Icon Extra Large

Surface Modifiers

Use these to ensure icons maintain clarity and contrast when placed on dark or colored backgrounds.

  • Icon On Inverse Icon
  • Icon On Accent Primary
  • Icon On Accent Secondary
  • Icon On Accent Tertiary

Enhancing Visibility with Icon Container

You can wrap the icon with an additional background highlight using the combo class
Icon Container

This applies a soft tint using the icon’s color, creating a subtle button-like effect that draws visual attention without overwhelming the interface.

This can be combined with any surface modifier. For example:

Icon Icon On Accent Primary Icon Container

Avatars

Avatars are circular images used to visually represent a user, team, or content author. The base class defines the image as an avatar, and combo classes adjust the size.

The base class is Avatar

Size Modifiers

Use these modifiers to adjust the avatar size while keeping alignment and proportions consistent across the UI.

  • Small Avatar
  • Large Avatar