Go one step further with our solutions for creating an intuitive, personalized experience.
Rounding management allows you to better define your components, making it easier for your users to analyze them.
To manage the rounding of your components, you go through 5 classes from this structure radius_[value].
<div class="radius-block-documentation radius_0"></div>
<div class="radius-block-documentation radius_5"></div>
<div class="radius-block-documentation radius_10"></div>
<div class="radius-block-documentation radius_15"></div>
<div class="radius-block-documentation radius_btn"></div>
<div class="radius-block-documentation radius_global"></div>
<div class="radius-block-documentation radius_full"></div>
<div class="radius-block-documentation radius_rounded"></div>
You can extend the class to handle rounding according to breakpoints radius_[value]--[breakpoint] (breakpoint can be s, m, t, d or l).
<div class="radius-block-documentation radius_0--l"></div>
<div class="radius-block-documentation radius_5--t"></div>
<div class="radius-block-documentation radius_10--t"></div>
<div class="radius-block-documentation radius_15--t"></div>
<div class="radius-block-documentation radius_btn--s"></div>
<div class="radius-block-documentation radius_global--m"></div>
<div class="radius-block-documentation radius_full--d"></div>
<div class="radius-block-documentation radius_rounded--l"></div>
Sometimes you will need to target one of the corners specifically. Here is the complete class radius-[corner]_[value]--[breakpoint].
corner corresponds to the different corners:
- tr: top-right.
- br : bottom-right.
- bl : bottom-left.
- tl : top-left.
<div class="radius-tr_0"></div>
<div class="radius-br_rounded"></div>
<div class="radius-bl_5--l"></div>
<div class="radius-tl_full--m"></div>
<div class="radius-block-documentation radius_0"></div>
<div class="radius-block-documentation radius_5"></div>
<div class="radius-block-documentation radius_10"></div>
<div class="radius-block-documentation radius_15"></div>
<div class="radius-block-documentation radius_btn"></div>
<div class="radius-block-documentation radius_global"></div>
<div class="radius-block-documentation radius_full"></div>
<div class="radius-block-documentation radius_rounded"></div>
<div class="radius-block-documentation radius_0--l"></div>
<div class="radius-block-documentation radius_5--t"></div>
<div class="radius-block-documentation radius_10--t"></div>
<div class="radius-block-documentation radius_15--t"></div>
<div class="radius-block-documentation radius_btn--s"></div>
<div class="radius-block-documentation radius_global--m"></div>
<div class="radius-block-documentation radius_full--d"></div>
<div class="radius-block-documentation radius_rounded--l"></div>
| Class | Definition |
|---|---|
| radius_0 | Cancels the rounding. |
| radius_5 | Created rounding of 5px. |
| radius_10 | Created rounding of 10px. |
| radius_15 | Created rounding of 15px. |
| radius_20 | Created rounding of 20px. |
| radius_25 | Created rounding of 25px. |
| radius_30 | Created rounding of 30px. |
| radius_35 | Created rounding of 35px. |
| radius_40 | Created rounding of 40px. |
| radius_45 | Created rounding of 45px. |
| radius_50 | Created rounding of 50px. |
| radius_btn | Apply the rounding of the buttons. |
| radius_global | Apply global rounding. |
| radius_full | border-radius: 100%. |
| radius_rounded | border-radius: 500px. |
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