Catálogo de componentes

Recopilación de la mayor parte de los componentes y sus usos más típicos.

Botones

Botones por defecto

Normal
Con icono
Con icono
Deshabilitado
Con icono
Con icono

Botones primarios

Deshabilitado
Con icono
Con icono

Botones transparentes

Normal
Con icono
Con icono
Deshabilitado
Con icono
Con icono

Botones alerta

Deshabilitado
Con icono
Con icono

Botones pequeños por defecto

Normal
Con icono
Con icono
Deshabilitado
Con icono
Con icono

Botones pequeños primarios

Deshabilitado
Con icono
Con icono

Botones pequeños transparentes

Normal
Con icono
Con icono
Deshabilitado
Con icono
Con icono

Botones pequeños alerta

Normal
Con icono
Con icono
Deshabilitado
Con icono
Con icono

Elementos de formulario

Inputs de texto

Hint texto descriptivo

Error: Error: Mensaje de error

Hint texto descriptivo

Error: Error: Mensaje de error

Hint texto descriptivo

Error: Error: Mensaje de error

Hint texto descriptivo

Error: Error: Mensaje de error

Error: Error: Error message goes here

Textarea y Character count

Hint texto descriptivo

Error: Error: Mensaje de error

Hint texto descriptivo

Error: Error: Mensaje de error

Puedes escribir hasta 10 caracteres

Puedes escribir hasta 10 caracteres

Hint texto descriptivo

Puedes escribir hasta 10 caracteres

Error: Error: Mensaje de error

Puedes escribir hasta 10 caracteres

Hint texto descriptivo

Error: Error: Mensaje de error

Puedes escribir hasta 10 caracteres

Hint texto descriptivo

Error: Error: Mensaje de error

Hint texto descriptivo

Error: Error: Mensaje de error

Error: Error: Error message goes here

Date input

Fecha de nacimiento
Fecha de nacimiento
Fecha de nacimiento

Por ejemplo, 31 3 1980

Fecha de nacimiento

Error: Error: Aqui va un mensaje de error

Fecha de nacimiento

Por ejemplo, 31 3 1980

Error: Error: Aqui va un mensaje de error

Fecha de nacimiento

Por ejemplo, 31 3 1980

Error: Error: Aqui va un mensaje de error

Hora de publicación

Por ejemplo, 14:30

Fecha de nacimiento

Por ejemplo, 31 3 1980

Hora de publicación

Por ejemplo, 14:30

File upload

Tu foto puede estar en tus Imágenes, Fotos, Descargas o el Escritorio. O en una aplicación como Fotos.

Tu foto puede estar en tus Imágenes, Fotos, Descargas o el Escritorio. O en una aplicación como Fotos.

Error: Error: Error message goes here

Error: Error: Error message goes here

Select

Hint texto descriptivo

Error: Error: Mensaje de error

Hint texto descriptivo

Error: Error: Mensaje de error

Hint texto descriptivo

Error: Error: Mensaje de error

Hint texto descriptivo

Error: Error: Mensaje de error

Error: Error: Error message goes here

Input group

Documento de identidad
Documento de identidad

Selecciona tu tipo de documento e introduce el número de documento sin espacios

Documento de identidad
Datos del solicitante

Error: Error: Aqui va un mensaje de error

Introduce cantidad

Checkboxes

Fieldset legend
Fieldset legend

Hint texto descriptivo

Fieldset legend

Hint texto descriptivo

Error: Error: Mensaje de error

Fieldset legend

Hint texto descriptivo

Hint texto descriptivo

Hint texto descriptivo

Fieldset legend
Fieldset legend
Error: Mensaje de error
Fieldset legend

Hint texto descriptivo

Fieldset legend

Hint texto descriptivo

Hint texto descriptivo

Hint texto descriptivo

Hint texto descriptivo

Radios

Fieldset legend
Fieldset legend

Hint texto descriptivo

Fieldset legend

Hint texto descriptivo

Error: Error: Mensaje de error

Fieldset legend

Hint texto descriptivo

Hint texto descriptivo

Fieldset legend

Hint texto descriptivo

Fieldset legend

Hint texto descriptivo

Fieldset legend

o bien

Fieldset legend
Fieldset legend
Error: Mensaje de error
Fieldset legend

Hint texto descriptivo

Fieldset legend

Hint texto descriptivo

Hint texto descriptivo

Hint texto descriptivo

Hint texto descriptivo

Tree

Selecciona organismo

Selecciona el organismo al que perteneces.

Selecciona organismo

Selecciona el organismo al que perteneces.

Selecciona organismo
Selecciona organismo

Selecciona el organismo al que perteneces.

Listbox por defecto

Normal

Label

  • Opción 1
  • Opción 2
  • Opción 3
  • Opción 4
  • Opción 5

Label

  • Opción 1
  • Opción 2
  • Opción 3
  • Opción 4
  • Opción 5

Label

  • Opción 1
  • Opción 2
  • Opción 3
  • Opción 4
  • Opción 5

Label

  • Opción 1
  • Opción 2
  • Opción 3
  • Opción 4
  • Opción 5
:active

Label

  • Opción 1
  • Opción 2
  • Opción 3
  • Opción 4
  • Opción 5

Label

  • Opción 1
  • Opción 2
  • Opción 3
  • Opción 4
  • Opción 5

Label

  • Opción 1
  • Opción 2
  • Opción 3
  • Opción 4
  • Opción 5

Label

  • Opción 1
  • Opción 2
  • Opción 3
  • Opción 4
  • Opción 5
:hover

Label

  • Opción 1
  • Opción 2
  • Opción 3
  • Opción 4
  • Opción 5

Label

  • Opción 1
  • Opción 2
  • Opción 3
  • Opción 4
  • Opción 5

Label

  • Opción 1
  • Opción 2
  • Opción 3
  • Opción 4
  • Opción 5

Label

  • Opción 1
  • Opción 2
  • Opción 3
  • Opción 4
  • Opción 5
:focus

Label

  • Opción 1
  • Opción 2
  • Opción 3
  • Opción 4
  • Opción 5

Label

  • Opción 1
  • Opción 2
  • Opción 3
  • Opción 4
  • Opción 5

Label

  • Opción 1
  • Opción 2
  • Opción 3
  • Opción 4
  • Opción 5

Label

  • Opción 1
  • Opción 2
  • Opción 3
  • Opción 4
  • Opción 5
Disabled

Label

  • Opción 1
  • Opción 2
  • Opción 3
  • Opción 4
  • Opción 5

Label

  • Opción 1
  • Opción 2
  • Opción 3
  • Opción 4
  • Opción 5

Label

  • Opción 1
  • Opción 2
  • Opción 3
  • Opción 4
  • Opción 5

Label

  • Opción 1
  • Opción 2
  • Opción 3
  • Opción 4
  • Opción 5

Listbox variaciones

Primario

Label

  • Opción 1
  • Opción 2
  • Opción 3
  • Opción 4
  • Opción 5

Label

  • Opción 1
  • Opción 2
  • Opción 3
  • Opción 4
  • Opción 5

Label

  • Opción 1
  • Opción 2
  • Opción 3
  • Opción 4
  • Opción 5

Label

  • Opción 1
  • Opción 2
  • Opción 3
  • Opción 4
  • Opción 5
Transparent

Label

  • Opción 1
  • Opción 2
  • Opción 3
  • Opción 4
  • Opción 5

Label

  • Opción 1
  • Opción 2
  • Opción 3
  • Opción 4
  • Opción 5

Label

  • Opción 1
  • Opción 2
  • Opción 3
  • Opción 4
  • Opción 5

Label

  • Opción 1
  • Opción 2
  • Opción 3
  • Opción 4
  • Opción 5
Header

Label

  • Opción 1
  • Opción 2
  • Opción 3
  • Opción 4
  • Opción 5

Label

  • Opción 1
  • Opción 2
  • Opción 3
  • Opción 4
  • Opción 5

Label

  • Opción 1
  • Opción 2
  • Opción 3
  • Opción 4
  • Opción 5

Label

  • Opción 1
  • Opción 2
  • Opción 3
  • Opción 4
  • Opción 5
Pequeño

Label

  • Opción 1
  • Opción 2
  • Opción 3
  • Opción 4
  • Opción 5

Label

  • Opción 1
  • Opción 2
  • Opción 3
  • Opción 4
  • Opción 5

Label

  • Opción 1
  • Opción 2
  • Opción 3
  • Opción 4
  • Opción 5

Label

  • Opción 1
  • Opción 2
  • Opción 3
  • Opción 4
  • Opción 5
Pequeño tiene selección

Label

  • Opción 1
  • Opción 2
  • Opción 3
  • Opción 4
  • Opción 5

Label

  • Opción 1
  • Opción 2
  • Opción 3
  • Opción 4
  • Opción 5

Label

  • Opción 1
  • Opción 2
  • Opción 3
  • Opción 4
  • Opción 5

Label

  • Opción 1
  • Opción 2
  • Opción 3
  • Opción 4
  • Opción 5

Cabecera de página para sitios web o portales

Cabecera de página para apps

Migas de pan

Paginación

Selecciona una página para cargar datos

Posición de paginación: 10 - 20 de 64

Selecciona una página para cargar datos

Posición de paginación: 0 - 10 de 64

Selecciona una página para cargar datos

Items por página:

  • 10
  • 25
  • 50
  • 75
  • 100

Posición de paginación: 10 - 20 de 64

Pie de página

Normal
:active
:hover
:focus
Disabled
Primario
Transparent
Header
Pequeño
Pequeño tiene selección
Por defecto
Transparent
Header
Pequeño
Pequeño tiene selección
Filtrado y ordenación de listado de items

Mostrar y ocultar

Acordeones

Cabecera del acordeón

Collapsible

Details

Descripción breve

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse feugiat, lectus ut viverra laoreet, ante nisl rutrum lorem, vitae venenatis risus mi eget nisi.

Descripción breve

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse feugiat, lectus ut viverra laoreet, ante nisl rutrum lorem, vitae venenatis risus mi eget nisi.

Toggle

  • Notificar por email

Tabs

Contenido

Tab 1

Panel 1. Lorem ipsum dolor sit, amet, consectetur adipisicing elit. Est quis exercitationem, nesciunt nulla quisquam temporibus. Provident animi dolor veniam, et quas consequuntur. Reiciendis eius in, nostrum porro? Quaerat, temporibus, optio?

Contenido

Tab 1

Panel 1. Lorem ipsum dolor sit, amet, consectetur adipisicing elit. Est quis exercitationem, nesciunt nulla quisquam temporibus. Provident animi dolor veniam, et quas consequuntur. Reiciendis eius in, nostrum porro? Quaerat, temporibus, optio?

Ejemplo en uso real:

Contenido

Cambios

  • Ley 38/2003, de 17 de noviembre, General de Subvenciones. (BOE nº 276 de 18 de noviembre de 2003) y su Reglamento de desarrollo aprobado por Real Decreto 887/2006, de 21 de julio.

    Ver detalles de la normativa

  • Ley 5/2015, de 25 de marzo, de Subvenciones de Aragón. (BOA nº 68 de 10 de abril de 2015).
    Ver detalles de la normativa

Cambios realizados hace 2 horas

Datos

Pills

Por defecto
Por defecto
Icono dcha
Icono izda
Type button :active
Type button :hover
Type button :focus
Estilos
Primario
Aviso
Éxito
Alerta
Pequeños por defecto
Pequeña
Icono dcha
Icono izda
Pequeños con estilos
Primario
Aviso
Éxito
Alerta

Description list

término
definición por defecto
término
definición por defecto
término
definición por defecto
término
definición por defecto
término
definición por defecto
término
definición grande
término
definición grande
término
definición grande
término
definición grande

Ejemplos en caso real:

Gestiona
Innovación, investigación y universidad
Solicitantes
Pymes, autónomos, organizaciones
Resuelve
Transporte y minas
Tipo de servicio
Procedimiento, Común, Interno, Inicio de instancia
Código de procedimiento
G00345-BX
Nombre del procedimiento
Resolución definitiva
CSV
CSVK45WT8V5T110CPPC
Fecha de captura
13 de Diciembre de 2021. A las 11:48:08
Categoría
Documento simple
Activo no corriente
3045,45€
Activo corriente
14,32€
Total activo
279,67€
Capital
100.704,23€
Patrimonio neto
2.345,74€
Consolidación de cuentas
Si

Status

Completo

Incompleto

Subiendo (20%)

Error

Atención

Status items

Titulo

Titulo

Icono y enlace Hint texto descriptivo

Status

Término
Definición
Término
Definición
Término
Definición

Status

Autorización para la consulta de datos de las personas de la unidad familiar. (Documento condicionado)

Personas de la unidad familiar

2 personas añadidas

Aportado

Autorización para la consulta de datos de las personas de la unidad familiar

Descargar modelo

Datos adicionales del solicitante

Iniciado

Datos adicionales del solicitante

Aportado

Datos adicionales del solicitante

Error: Es necesario aportar este documento para enviar el trámite

Incompleto

Datos adicionales del solicitante

Subiendo (20%)

Datos adicionales del solicitante

Error: Se ha producido un error al subir el archivo

Error

Acreditación
Mediante archivo adjunto Modelo de solicitud (PDF, 200Kb)

Completo

Nombre
Ana
Apellidos
Pérez Escribano
Número de identificación
72882918B

Incompleto

Items

Entidades locales de la Comunidad Autónoma de Aragón

Registro de alta de la asociación

Documento acreditativo de registro de alta de la asociación

Entidades locales de la Comunidad Autónoma de Aragón

  • Desde modelo
  • Obligatorio previo a resolución
  • Condicionado

Registro de alta de la asociación

Modelo: Modelo de fianza (PDF, 20Kb)

Registro de alta de la asociación

Entidades locales de la Comunidad Autónoma de Aragón

Entidades locales de la Comunidad Autónoma de Aragón

Resolución de años anteriores

Resolución años anteriores (PDF, 20Kb)

Lista de admitidos y excluidos de la convocatoria publicado en el BOA

http://www.boa.aragon.es/cgi-bin/EBOA/BRSCGI?CMD=VEROBJ&MLKOB=1119520063030&type=pdf

Datos de la empresa

  • 12 campos
  • Con dependencia
  • Tabla de datos

Resolución de años anteriores

Resolución años anteriores (PDF, 20Kb)

Registro de alta de la asociación

Documento acreditativo de registro de alta de la asociación

  • Desde modelo
  • Obligatorio previo a resolución
  • Condicionado

Modelo: Modelo de fianza (PDF, 20Kb)

Tablas

Enero 85€ 95€
Febrero 75€ 55€
Marzo 165€ 125€
Mes Precio bruto Precio neto
Enero 85€ 95€
Febrero 75€ 55€
Marzo 165€ 125€
Enero 85€ 95€
Febrero 75€ 55€
Marzo 165€ 125€
Caption 1: Meses y precios
Mes Precio bruto Precio neto
Enero 85€ 95€
Febrero 75€ 55€
Marzo 165€ 125€
Seleccionar fila Mes Pulsa para ordenar por esta columna Precio bruto Pulsa para ordenar por esta columna Precio neto Pulsa para ordenar por esta columna
Enero 85€ 95€
Febrero 75€ 55€
Marzo 165€ 125€
Month you apply Rate for bicycles Rate for vehicles
January 85€ 95€
February 75€ 55€
March 165€ 125€
Seleccionar fila Row number Month you apply Pulsa para ordenar por esta columna Rate for bicycles Pulsa para ordenar por esta columna Rate for vehicles Pulsa para ordenar por esta columna Rate for column A Pulsa para ordenar por esta columna Rate for column B Pulsa para ordenar por esta columna Rate for column C Pulsa para ordenar por esta columna Rate for column D Pulsa para ordenar por esta columna Rate for column E Pulsa para ordenar por esta columna