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 or image_cover to define the image element.
Radius
All images — including elements with the tag Image, or using the classes image and image_cover — have rounded corners applied through the variable Image Radius.
To override this and make the corners square, use the combo class radius_all-0
Aspect Ratio
Aspect ratio combo classes must be applied on top of the image_cover 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:
- ratio_1x1
- ratio_16x9
- ratio_3x2
- ratio_4x3
- ratio_2x2.5
- ratio_2x3
Exasmple:
image_cover ratio_2x3Responsive 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
- ratio_3x2_tablet
- ratio_1x1_tablet
Mobile Landscape
- ratio_auto_mobile-l
These modifiers are added in combination with the base image_cover 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 is-xsmall
- icon is-small
- icon is-large
- icon is-xlarge
Surface Modifiers
Use these to ensure icons maintain clarity and contrast when placed on dark or colored backgrounds.
- icon on-inverse
- 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 is-background
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 on-accent-primary is-backgroundAvatars
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.
- avatar is-small
- avatar is-large