Radios de borde
Los radios de borde estandarizan la curvatura de las esquinas de los componentes y los planos, para asegurar consistencia y coherencia dentro del sistema Obelisco. Al aplicar el radio de bordes en diferentes componentes, estados y casos de uso, permite mejorar la claridad de los componentes y secciones para favorecer la legibilidad y navegación dentro de los criterios de accesibilidad.
xs
1pxsm
2pxmd
4pxlg
6pxxl
8px2xl
12px3xl
16px4xl
20px5xl
24px6xl
32px7xl
64px8xl
128pxpill
9999px (pill)Clases y valores de radio de borde
| Clase | Valor |
|---|---|
.border-radius-xs | 1px |
.border-radius-sm | 2px |
.border-radius-md | 4px |
.border-radius-lg | 6px |
.border-radius-xl | 8px |
.border-radius-2xl | 12px |
.border-radius-3xl | 16px |
.border-radius-4xl | 20px |
.border-radius-5xl | 24px |
.border-radius-6xl | 32px |
.border-radius-7xl | 64px |
.border-radius-8xl | 128px |
.border-radius-pill | 9999px |
Valores aplicados a cada componente (Versión 1.12.0 en adelante)
| Componente | Detalle | Valor |
|---|---|---|
| Acceso | - | 3xl |
| Alertas | - | 3xl |
| Banner | Sin cambios | |
| Barra de progreso | Sin cambios | |
| Botón | - | pill |
| Citas | Sin cambios | |
| Colapsable | - | 3xl |
| Desplegable de navegación | Estado cerrado • estado abierto | pill • 3xl |
| Desplegable de selección | Estado cerrado • estado abierto | pill • 3xl |
| Enlace | Sin cambios | |
| Etiqueta | Sin cambios | |
| Inputs | - | pill |
| Input (Textarea) | - | 3xl |
| Listas | Sin cambios | |
| Mapa | - | 3xl |
| Mensajes de estado | - | pill |
| Migas de pan | Sin cambios | |
| Modal | - | 3xl • pill |
| Navegación y pestañas | Sin cambios | |
| Paginado | - | pill |
| Spinner | Sin cambios | |
| Switch | Sin cambios | |
| Tarjetas | - | 6xl |
| Tooltip | Sin cambios | |
| Accesos | Organismo | 3xl |
| Calendario | Organismo | Sin cambios |
| Carrusel | Controlador de carrusel (botones e indicadores) • Tarjetas verticales | pill • 6xl |
| Pasos de formulario | Organismo | Sin cambios |
| Pie de página (Footer) | Desktop • Tablet y mobile | 7xl • 6xl |
| Tablas | Organismo | 3xl |