Contornos

Os contornos são utilizados com o intuito de oferecerem destaque e serem mais perceptíveis pelos utilizadores. Geralmente utilizados em caixas de seleção, caixas de texto estes elementos criam uma experiência de utilização mais intuitiva e agradável, tornando a navegação mais leve e eficiente.

Os contornos devem assumir respeitar a hierarquia estabelecida, devendo assumir valores entre 4px e 32px.

rounded-S

4 PX

rounded-M

8 PX

rounded-L

12 PX

rounded-XL

16 PX

rounded-XXL

32 PX

                                        
<div class="gra-row-bs">
    <div class="gra-col-bs-xl-5 gra-col-bs-ld-3 gra-col-bs-md-2">
        <div class="columnRow gra-background-blue-500 gra-text-blue-100 gra-rounded-s">rounded-S</div>
    </div>
    <div class="gra-col-bs-xl-5 gra-col-bs-ld-3 gra-col-bs-md-2">
        <div class="columnRow gra-background-blue-500 gra-text-blue-100 gra-rounded-m">rounded-M</div>
    </div>
    <div class="gra-col-bs-xl-5 gra-col-bs-ld-3 gra-col-bs-md-2">
        <div class="columnRow gra-background-blue-500 gra-text-blue-100 gra-rounded-l">rounded-L</div>
    </div>
    <div class="gra-col-bs-xl-5 gra-col-bs-ld-3 gra-col-bs-md-2">
        <div class="columnRow gra-background-blue-500 gra-text-blue-100 gra-rounded-xl">rounded-XL</div>
    </div>
    <div class="gra-col-bs-xl-5 gra-col-bs-ld-3 gra-col-bs-md-2">
        <div class="columnRow gra-background-blue-500 gra-text-blue-100 gra-rounded-xxl">rounded-XXL</div>
    </div>
</div>