Unleash your potential

Go one step further with our solutions for creating an intuitive, personalized experience.

Haltura

Create libraries without coding.

Spartiapp

Create beautiful websites.
Log In
Alpha
Docs Creations Contact

Introduction

IntroductionInstallationBreakpoints

Components

AccordionAlertAutocompleteAvatarBadgeButtonCardCheckboxDividerDropdownFieldLayoutModalNavigationRadioSheetSkeletonSliderSnackbarSpinnerTableTabTooltipTypography

Utilities

ColorDisplayFlexboxOpacityPositionRadiusSizingSpacingTextVertical align

APIs

HalturaCookiesFrontierTour
Docs / web / sizing

Sizing

Resize components with Sizing classes.

Initializing the utility.

Use the width_[V], height_[V], min-width_[V], min-height_[V], max-width_[V] or max-height_[V] classes to resize components.
[V] is a value between 0 and 100 with a step of 5, and will be interpreted as a percentage.

colorradiussizing
<div class="width_5 max-width_75 bg_background-invert-20 radius_5" style="margin-bottom:.2rem;height:20px"></div>
<div class="width_25 bg_background-invert-20 radius_5" style="height:20px"></div>

Resize in pixel.

Use the width_[V]px, height_[V]px, min-width_[V]px, min-height_[V]px, max-width_[V]px or max-height_[V]px classes to resize components.
[V] is a value between 0 and 1500 with a step of 50, and will be interpreted in px.

colorradiussizing
<div class="width_150px bg_background-invert-20 radius_5" style="margin-bottom:.2rem;height:20px"></div>
<div class="width_100 max-width_200px height_50px bg_background-invert-20 radius_5"></div>

Resize in vw and vh.

Use the classes width_[V][U], height_[V][U], min-width_[V][U], min-height_[V], max-width_[V][U] or max-height_[V][U] to resize the components.
[U] is vw or vh,
[V] is a value between 0 and 100 with a step of 5, and will be interpreted as [U].

colorradiussizing
<div class="width_5vw max-width_150px bg_background-invert-20 radius_5" style="margin-bottom:.2rem;height:20px"></div>
<div class="width_25 bg_background-invert-20 radius_5" style="height:20px"></div>

Add breakpoint.

To go even further, you can control the resizing of the elements by taking into account the different supports.
Add in this case --[R] (R being the breakpoint).

colorradiussizing
<div class="width_100 max-width_150px--d bg_background-invert-20 radius_5" style="margin-bottom:.2rem;height:20px"></div>
<div class="width_25--t bg_background-invert-20 radius_5" style="height:20px"></div>
colorradiussizing
<div class="width_5 max-width_75 bg_background-invert-20 radius_5" style="margin-bottom:.2rem;height:20px"></div>
<div class="width_25 bg_background-invert-20 radius_5" style="height:20px"></div>
colorradiussizing
<div class="width_150px bg_background-invert-20 radius_5" style="margin-bottom:.2rem;height:20px"></div>
<div class="width_100 max-width_200px height_50px bg_background-invert-20 radius_5"></div>
colorradiussizing
<div class="width_5vw max-width_150px bg_background-invert-20 radius_5" style="margin-bottom:.2rem;height:20px"></div>
<div class="width_25 bg_background-invert-20 radius_5" style="height:20px"></div>
colorradiussizing
<div class="width_100 max-width_150px--d bg_background-invert-20 radius_5" style="margin-bottom:.2rem;height:20px"></div>
<div class="width_25--t bg_background-invert-20 radius_5" style="height:20px"></div>
Class Definition
width_[V] width : [V]% !important.
min-width_[V] min-width : [V]% !important.
max-width_[V] max-width : [V]% !important.
width_[V]px width : [V]px !important.
min-width_[V]px min-width : [V]px !important.
max-width_[V]px max-width : [V]px !important.
width_[V]vw width : [V]vw !important.
min-width_[V]vw min-width : [V]vw !important.
max-width_[V]vw max-width : [V]vw !important.
width_[V]vh width : [V]vh !important.
min-width_[V]vh min-width : [V]vh !important.
max-width_[V]vh max-width : [V]vh !important.
height_[V] height : [V]% !important.
min-height_[V] min-height : [V]% !important.
max-height_[V] max-height : [V]% !important.
height_[V]px height : [V]px !important.
min-height_[V]px min-height : [V]px !important.
max-height_[V]px max-height : [V]px !important.
height_[V]vw height : [V]vw !important.
min-height_[V]vw min-height : [V]vw !important.
max-height_[V]vw max-height : [V]vw !important.
height_[V]vh height : [V]vh !important.
min-height_[V]vh min-height : [V]vh !important.
max-height_[V]vh max-height : [V]vh !important.
width_[V]--[B] width : [V]% !important; at the breakpoint [B].
min-width_[V]--[B] min-width : [V]% !important; at the breakpoint [B].
max-width_[V]--[B] max-width : [V]% !important; at the breakpoint [B].
width_[V]px--[B] width : [V]px !important; at the breakpoint [B].
min-width_[V]px--[B] min-width : [V]px !important; at the breakpoint [B].
max-width_[V]px--[B] max-width : [V]px !important; at the breakpoint [B].
width_[V]vw--[B] width : [V]vw !important; at the breakpoint [B].
min-width_[V]vw--[B] min-width : [V]vw !important; at the breakpoint [B].
max-width_[V]vw--[B] max-width : [V]vw !important; at the breakpoint [B].
width_[V]vh--[B] width : [V]vh !important; at the breakpoint [B].
min-width_[V]vh--[B] min-width : [V]vh !important; at the breakpoint [B].
max-width_[V]vh--[B] max-width : [V]vh !important; at the breakpoint [B].
height_[V]--[B] height : [V]% !important; at the breakpoint [B].
min-height_[V]--[B] min-height : [V]% !important; at the breakpoint [B].
max-height_[V]--[B] max-height : [V]% !important; at the breakpoint [B].
height_[V]px--[B] height : [V]px !important; at the breakpoint [B].
min-height_[V]px--[B] min-height : [V]px !important; at the breakpoint [B].
max-height_[V]px--[B] max-height : [V]px !important; at the breakpoint [B].
height_[V]vw--[B] height : [V]vw !important; at the breakpoint [B].
min-height_[V]vw--[B] min-height : [V]vw !important; at the breakpoint [B].
max-height_[V]vw--[B] max-height : [V]vw !important; at the breakpoint [B].
height_[V]vh--[B] height : [V]vh !important; at the breakpoint [B].
min-height_[V]vh--[B] min-height : [V]vh !important; at the breakpoint [B].
max-height_[V]vh--[B] max-height : [V]vh !important; at the breakpoint [B].
Hello!

Haltura wants to provide you with an efficient experience by implementing cookies! Cookies are small files that help us to understand you better and to ensure the proper functioning of our technologies. You have the right to manage them as you wish!

Cookie settings

Important (Can't be disabled)