Skip to main content

Foundation

Radius

Property will increase the element consistency and visibility

banner-Radius

Usage

Radius is the blunt part of the corner of a component that affects the shape and visibility of the content inside. This is the variant of radius we use globally for property the component. You can chek out the guideline for more detail description.

import LegionUI

Preview

ShapeFunc NameRoundedPixels
<img src=”https://teddys-minio-teddys-dev.vsan-apps.playcourt.id/legion/foundation/radius/LGNRadius1.png” alt=“preview shape />radius1()0.125 rem2px
<img src=”https://teddys-minio-teddys-dev.vsan-apps.playcourt.id/legion/foundation/radius/LGNRadius2.png” alt=“preview shape />radius2()0.25 rem4px
<img src=”https://teddys-minio-teddys-dev.vsan-apps.playcourt.id/legion/foundation/radius/LGNRadius3.png” alt=“preview shape />radius3()0.375 rem6px
<img src=”https://teddys-minio-teddys-dev.vsan-apps.playcourt.id/legion/foundation/radius/LGNRadius4.png” alt=“preview shape />radius4()0.5 rem8px
<img src=”https://teddys-minio-teddys-dev.vsan-apps.playcourt.id/legion/foundation/radius/LGNRadius5.png” alt=“preview shape />radius5()0.75 rem12px
<img src=”https://teddys-minio-teddys-dev.vsan-apps.playcourt.id/legion/foundation/radius/LGNRadius6.png” alt=“preview shape />radius6()1 rem16px
<img src=”https://teddys-minio-teddys-dev.vsan-apps.playcourt.id/legion/foundation/radius/LGNRadius7.png” alt=“preview shape />radius7()1.5 rem24px
content.radius1()
content.radius2()
content.radius3()
content.radius4()
content.radius5()
content.radius6()
content.radius7()