Átomos

Encabezados y textos

h1. Encabezado de primer nivel

h2. Encabezado de segundo nivel

h3. Encabezado de tercer nivel

h4. Encabezado de cuarto nivel

h5. Encabezado de quinto nivel
h6. Encabezado de sexto nivel

Párrafos (strong, em, mark, a)

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Delectus nihil nesciunt saepe perferendis repellat ratione aliquam expedita aliquid delenitiEnlace externo quasi animi laboriosam, molestias architecto recusandae dolor perspiciatis accusamus earum minima.

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Delectus nihil nesciunt saepe perferendis repellat ratione aliquam expedita aliquid deleniti quasi animi laboriosam, molestias architecto recusandae dolor perspiciatis accusamus earum minima.


Listas

  • Lorem ipsum dolor sit amet.
  • Esse necessitatibus, adipisci saepe laboriosam.
    • Lorem ipsum dolor sit.
    • Assumenda cumque tenetur quidem.
    • Corrupti enim rem voluptate.
  • Neque tempore est, natus ad!
  • Ex labore officiis, tempore nemo!
  • Vitae libero, quae doloribus dignissimos?
  1. Lorem ipsum dolor sit amet.
  2. Esse necessitatibus, adipisci saepe laboriosam.
    1. Lorem ipsum dolor sit.
    2. Assumenda cumque tenetur quidem.
    3. Corrupti enim rem voluptate.
  3. Neque tempore est, natus ad!
  4. Ex labore officiis, tempore nemo!
  5. Vitae libero, quae doloribus dignissimos?

.u-bullet

  • Lorem ipsum dolor sit amet.
  • Esse necessitatibus, adipisci saepe laboriosam.
    • Lorem ipsum dolor sit.
    • Assumenda cumque tenetur quidem.
    • Corrupti enim rem voluptate.
  • Neque tempore est, natus ad!
  • Ex labore officiis, tempore nemo!
  • Vitae libero, quae doloribus dignissimos?

Enlaces


Botones

.Button aplicado a distintos elementos

Button div
Button span Button link
Button span Button linkEnlace externo

Modificadores de .Button

Primario

Secundario

Inverso

Link

Todos los campos indicados con * son obligatorios

Etiquetas y campos
ERROR - Este campo es obligatorio
Advertencia - No se pudo validar el dato
Este es un texto de ayuda
Selectores
Campos combinados
Identificación de usuario:
Documento de Identidad:
Incluir dígito verificador
Identificación de usuario con mensaje de error:
Documento de identidad con mensaje de error:
Incluir dígito verificador
ERROR - Este campo es obligatorio
Fechas
Fecha con campos:
Fecha multicampo:
Ejemplo: 31 12 1980
Fecha con campos:
Fecha multicampo (mes con combo):
Ejemplo: marzo 31 1980
Archivos adjuntos
+ Agregar otro campo
Verificación de seguridad
Escribe la tercera palabra de: Hoy está lloviendo
Calendario
Calendario:
Junio 2023
LU
MA
MI
JU
VI
SA
DO
29
30
31
1
2
3
4
5
6
7
8
9
17
18
19
20
21
22
23
24
25
26
27
28
29
30
1
2
9 de Junio de 2023
Opciones
Grupo de opciones de radio button:
Grupo de opciones de etiquetas:
Grupo de opciones de checkboxes:
Grupo de opciones con error:
ERROR - Este campo es obligatorio
Valoración
¿Cómo calificarías esta gestión?:
Grupo de campos solo lectura
Nombre completo:
Juan Ignacio Rodríguez
Documento de Identidad:

4.520.878-4

Otro valor para el mismo campo

Fecha de Nacimiento:
12/10/1990
Tipos de datos especiales
Campos con indicadores
Icono rol validado Rol validado
Icono ayuda Ayuda
Grupo de campos anidados
Grupo de campos hijo 1
Grupo de campos hijo 2
+ Agregar otro grupo
Botón alineado con los campos
Formulario apilado

Íconos

Los íconos se encuentran en la carpeta /assets/icons y en dos formatos: svg y png.