Vista General

Version 1.0.0

Esta biblioteca de patrones contiene los componentes básicos de la Universidad Iberoamericana León, la versión web de nuestras aplicaciones de Android e iOS. La centralización de estos componentes de HTML, JS y las utilidades de CSS nos ayuda a forjar una experiencia de usuario consistente que siempre está actualizada con nuestras últimas pautas de marca.

Estas pautas visuales forman un sistema visual armonioso en el que podemos ser modulares y tambien reflexivos en cuanto a cómo usamos cada componente.

Requerimientos Mínimos

Se recomienda contar con un servidor con las siguientes características

  • Ubuntu – 22.04^
  • Apache2 - 2.4.29^
  • MySQL server 5.7^
  • PHP – 8.0^

Uso e Instalación

  1. Incluye CSS y JS de Ibero System.

    Coloca la etiqueta <link> en el <head> para el CSS, y el <script> para los paquetes de JavaScript necesarios antes del cierre del </body>.

  2. ¡Hola, mundo! Abre la página en el navegador que prefieras para ver tu página con Ibero System. Ahora puedes comenzar a construir con Ibero System creando tus propias plantillas y agregando docenas de componentes.

01 cuadrícula

01 contenedores

Los contenedores son un bloque de construcción fundamental de Ibero System que contienen, rellenan y alinean su contenido dentro de un dispositivo o ventana gráfica determinada.

¿Cómo funcionan?

Los contenedores son el elemento de diseño más básico en el Sistema y son requeridos cuando se usa nuestro sistema de cuadrícula predeterminado. Los contenedores se utilizan para contener, rellenar y (a veces) centrar el contenido dentro de ellos. Si bien los contenedores pueden anidarse, la mayoría de los diseños no requieren un contenedor anidado.

Contenedor Predeterminado

Nuestra clase predeterminada .container es un contenedor responsivo de ancho fijo, lo que significa que su max-width cambia en cada punto de interrupción (media-query).

Ejemplo de Uso

Aqui irá tu contenido...

Regresar al Principio 
<div class="container">
    <div class="grid">
        <p class="uia-docs-contrast">Aqui irá tu contenido...</p>
    </div>
</div>

02 grid

¿Cómo funciona?

El concepto es sencillo: necesita envolver la clase .col en algun elemento con clase .grid. Para utilizar contenedores se pueden personalizar de acuerdo a la vista con la clase .container.

¿Qué podemos esperar del funcionamiento?
  1. Cada columna tiene el mismo ancho que todas las demás celdas de la cuadrícula.
  2. Puede agregar clases de tamaño a columnas individuales.
  3. Para diseños responsivos, puede agregar clases basadas en "media queries".
  4. Acomodo superior, inferior o medio. Para la cuadrícula. Y para las columnas.
  5. Las cuadrículas se pueden anidar, siempre, directamente en una columna.

El sistema de clase .grid se puede concatenar con otras propiedades para manipular las columnas de forma más precisa. Para concatenar sólo se agrega -{propiedad} después de la clase .grid. Por ejemplo: .grid-noWrap o .grid-reverse

Ejemplo de Uso

col-12

col-11

col-1

col-10

col-2

col-9

col-3

col-8

col-4

col-7

col-5

col-6

col-6

col-5

col-7

col-4

col-8

col-3

col-9

col-2

col-10

col-1

col-11

Contenido

Contenido

Contenido

Contenido

Contenido

Contenido

Contenido

Contenido

Contenido

Contenido

Contenido

Contenido

Contenido

Contenido

Regresar al Principio 
<div class="grid">
    <div class="col-12">
        <div class="demo">
            <p class="mb-0">col-12</p>
        </div>
    </div>
    <div class="col-11_md-10_xs-8">
        <div class="demo">
            <p class="mb-0">col-11</p>
        </div>
    </div>
    <div class="col-1_md-2_xs-4">
        <div class="demo">
            <p class="mb-0">col-1</p>
        </div>
    </div>
    <div class="col-10_xs-7">
        <div class="demo">
            <p class="mb-0">col-10</p>
        </div>
    </div>
    <div class="col-2_xs-5">
        <div class="demo">
            <p class="mb-0">col-2</p>
        </div>
    </div>
    <div class="col-9">
        <div class="demo">
            <p class="mb-0">col-9</p>
        </div>
    </div>
    <div class="col-3">
        <div class="demo">
            <p class="mb-0">col-3</p>
        </div>
    </div>
    <div class="col-8">
        <div class="demo">
            <p class="mb-0">col-8</p>
        </div>
    </div>
    <div class="col-4">
        <div class="demo">
            <p class="mb-0">col-4</p>
        </div>
    </div>
    <div class="col-7">
        <div class="demo">
            <p class="mb-0">col-7</p>
        </div>
    </div>
    <div class="col-5">
        <div class="demo">
            <p class="mb-0">col-5</p>
        </div>
    </div>
    <div class="col-6">
        <div class="demo">
            <p class="mb-0">col-6</p>
        </div>
    </div>
    <div class="col-6">
        <div class="demo">
            <p class="mb-0">col-6</p>
        </div>
    </div>
    <div class="col-5">
        <div class="demo">
            <p class="mb-0">col-5</p>
        </div>
    </div>
    <div class="col-7">
        <div class="demo">
            <p class="mb-0">col-7</p>
        </div>
    </div>
    <div class="col-4">
        <div class="demo">
            <p class="mb-0">col-4</p>
        </div>
    </div>
    <div class="col-8">
        <div class="demo">
            <p class="mb-0">col-8</p>
        </div>
    </div>
    <div class="col-3">
        <div class="demo">
            <p class="mb-0">col-3</p>
        </div>
    </div>
    <div class="col-9">
        <div class="demo">
            <p class="mb-0">col-9</p>
        </div>
    </div>
    <div class="col-2_xs-5">
        <div class="demo">
            <p class="mb-0">col-2</p>
        </div>
    </div>
    <div class="col-10_xs-7">
        <div class="demo">
            <p class="mb-0">col-10</p>
        </div>
    </div>
    <div class="col-1_md-2_xs-4">
        <div class="demo">
            <p class="mb-0">col-1</p>
        </div>
    </div>
    <div class="col-11_md-10_xs-8">
        <div class="demo">
            <p class="mb-0">col-11</p>
        </div>
    </div>
</div>

<hr>

<div class="grid-6_sm-2">
    <!-- first row -->
    <div class="col-8_sm-12">
        <div class="demo">
            <p class="mb-0">Contenido</p>
        </div>
    </div>
    <div class="col">
        <div class="demo">
            <p class="mb-0">Contenido</p>
        </div>
    </div>
    <div class="col">
        <div class="demo">
            <p class="mb-0">Contenido</p>
        </div>
    </div>
    <!-- second row -->
    <div class="col">
        <div class="demo">
            <p class="mb-0">Contenido</p>
        </div>
    </div>
    <div class="col-5_sm-6">
        <div class="demo">
            <p class="mb-0">Contenido</p>
        </div>
    </div>
    <div class="col-2">
        <div class="demo">
            <p class="mb-0">Contenido</p>
        </div>
    </div>
    <div class="col-1_sm-4">
        <div class="demo">
            <p class="mb-0">Contenido</p>
        </div>
    </div>
    <div class="col">
        <div class="demo">
            <p class="mb-0">Contenido</p>
        </div>
    </div>
    <!-- third row -->
    <div class="col">
        <div class="demo">
            <p class="mb-0">Contenido</p>
        </div>
    </div>
    <div class="col">
        <div class="demo">
            <p class="mb-0">Contenido</p>
        </div>
    </div>
    <div class="col">
        <div class="demo">
            <p class="mb-0">Contenido</p>
        </div>
    </div>
    <div class="col">
        <div class="demo">
            <p class="mb-0">Contenido</p>
        </div>
    </div>
    <div class="col">
        <div class="demo">
            <p class="mb-0">Contenido</p>
        </div>
    </div>
    <div class="col">
        <div class="demo">
            <p class="mb-0">Contenido</p>
        </div>
    </div>
</div>

grid alineación horizontal

Puedes alinear las columnas en su plano horizontal concatenando las propiedades -center o -right a la clase .grid. De manera predeterminada se alinean al lado izquierdo.

Funciona de forma similar a la alineación de texto y mientras más columnas agregues se irán agregando con esa alineación hasta llegar a las 12 permitidas por fila.

Ejemplo de Uso

(predeterminado)

.grid-center

.grid-right

Regresar al Principio 
<div class="grid-3">
    <div class="col">
        <div class="demo">
            <p class="mb-0">(predeterminado)</p>
        </div>
    </div>
</div>
<div class="grid-3-center">
    <div class="col">
        <div class="demo">
            <p class="mb-0">.grid-center</p>
        </div>
    </div>
</div>
<div class="grid-3-right">
    <div class="col">
        <div class="demo">
            <p class="mb-0">.grid-right</p>
        </div>
    </div>
</div>

grid alineación vertical

Puedes alinear las columnas en su plano vertical concatenando las propiedades -middle o -bottom a la clase .grid. De manera predeterminada se alinean superiormente.

Ejemplo de Uso

(predeterminado)

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dicta, dolorum eius esse id labore odit placeat tempora! Alias aliquam aut eaque nulla repudiandae, temporibus voluptatum.

...

.grid-middle

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dicta, dolorum eius esse id labore odit placeat tempora! Alias aliquam aut eaque nulla repudiandae, temporibus voluptatum.

...

.grid-bottom

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dicta, dolorum eius esse id labore odit placeat tempora! Alias aliquam aut eaque nulla repudiandae, temporibus voluptatum.

...

Regresar al Principio 
<div class="grid">
    <div class="col">
        <div class="demo">
            <p class="mb-0">(predeterminado)</p>
        </div>
    </div>
    <div class="col">
        <div class="demo">
            <p class="mb-0">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dicta, dolorum eius esse id labore odit placeat tempora! Alias aliquam aut eaque nulla repudiandae, temporibus voluptatum.</p>
        </div>
    </div>
    <div class="col">
        <div class="demo">
            <p class="mb-0">...</p>
        </div>
    </div>
</div>

<hr>

<div class="grid-middle">
    <div class="col">
        <div class="demo">
            <p class="mb-0">.grid-middle</p>
        </div>
    </div>
    <div class="col">
        <div class="demo">
            <p class="mb-0">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dicta, dolorum eius esse id labore odit placeat tempora! Alias aliquam aut eaque nulla repudiandae, temporibus voluptatum.</p>
        </div>
    </div>
    <div class="col">
        <div class="demo">
            <p class="mb-0">...</p>
        </div>
    </div>
</div>

<hr>

<div class="grid-bottom">
    <div class="col">
        <div class="demo">
            <p class="mb-0">.grid-bottom</p>
        </div>
    </div>
    <div class="col">
        <div class="demo">
            <p class="mb-0">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dicta, dolorum eius esse id labore odit placeat tempora! Alias aliquam aut eaque nulla repudiandae, temporibus voluptatum.</p>
        </div>
    </div>
    <div class="col">
        <div class="demo">
            <p class="mb-0">...</p>
        </div>
    </div>
</div>

grid distribución

Puedes distribuir las columnas en su plano horizontal puedes concatenar las propiedades -spaceBetween, -spaceAround o -center a la clase .grid.

  • spaceBetween separa los elementos de forma pareja en la fila disponible. Le agrega espacio "entre" las columnas
  • spaceAround separa los elementos de forma proporcional en la fila. Le agrega espacio "alrededor" de las columnas
  • center es la misma propiedad para alinear columnas.
Ejemplo de Uso

col-2

col-2

col-2

col-2

col-2

col-2

col-2

col-2

col-2

Regresar al Principio 
<div class="grid-spaceBetween">
    <div class="col-2">
        <div class="demo">
            <p class="mb-0">col-2</p>
        </div>
    </div>
    <div class="col-2">
        <div class="demo">
            <p class="mb-0">col-2</p>
        </div>
    </div>
    <div class="col-2">
        <div class="demo">
            <p class="mb-0">col-2</p>
        </div>
    </div>
</div>

<hr>

<div class="grid-spaceAround">
    <div class="col-2">
        <div class="demo">
            <p class="mb-0">col-2</p>
        </div>
    </div>
    <div class="col-2">
        <div class="demo">
            <p class="mb-0">col-2</p>
        </div>
    </div>
    <div class="col-2">
        <div class="demo">
            <p class="mb-0">col-2</p>
        </div>
    </div>
</div>

<hr>

<div class="grid-center">
    <div class="col-2">
        <div class="demo">
            <p class="mb-0">col-2</p>
        </div>
    </div>
    <div class="col-2">
        <div class="demo">
            <p class="mb-0">col-2</p>
        </div>
    </div>
    <div class="col-2">
        <div class="demo">
            <p class="mb-0">col-2</p>
        </div>
    </div>
</div>

grid misma altura

Puedes crear columnas que tengan la misma altura en su plano horizontal concatenando -equalHeight a la clase .grid. De esta forma tendrás la clase compuesta .grid-equalHeight

Ejemplo de Uso

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dicta, dolorum eius esse id labore odit placeat tempora!

Regresar al Principio 
<div class="grid-equalHeight">
    <div class="col">
        <div class="demo">
            <p class="mb-0"></p>
        </div>
    </div>
    <div class="col">
        <div class="demo">
            <p class="mb-0">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dicta, dolorum eius esse id labore odit placeat tempora!</p>
        </div>
    </div>
    <div class="col">
        <div class="demo">
            <p class="mb-0"></p>
        </div>
    </div>
    <div class="col">
        <div class="demo">
            <p class="mb-0"></p>
        </div>
    </div>
</div>

grid sin medianil

Puedes crear columnas que no tengan medianil (espaciado) concatenando -noGutter a la clase .grid. De esta forma tendrás la clase compuesta .grid-noGutter

Esta clase compuesta es muy útil para crear galerías u otros acomodos que no requieran de medianiles.

Ejemplo de Uso
col-12
col-6
col-6
col-4
col-8
col-3
col-9
col-1
col-11
Regresar al Principio 
<div class="grid-noGutter withBorder">
    <div class="col-12">
        <div class="demo border-light">
            col-12
        </div>
    </div>
    <div class="col-6">
        <div class="demo border-light">
            col-6
        </div>
    </div>
    <div class="col-6">
        <div class="demo border-light">
            col-6
        </div>
    </div>
    <div class="col-4">
        <div class="demo border-light">
            col-4
        </div>
    </div>
    <div class="col-8">
        <div class="demo border-light">
            col-8
        </div>
    </div>
    <div class="col-3">
        <div class="demo border-light">
            col-3
        </div>
    </div>
    <div class="col-9">
        <div class="demo border-light">
            col-9
        </div>
    </div>
    <div class="col-1">
        <div class="demo border-light">
            col-1
        </div>
    </div>
    <div class="col-11">
        <div class="demo border-light">
            col-11
        </div>
    </div>
</div>

<hr>

<div class="grid-6-noGutter-noBottom">
    <div class="col">
        <img src="https://source.unsplash.com/26MJGnCM0Wc/220x220" alt="" class="img-fluid">
    </div>
    <div class="col">
        <img src="https://source.unsplash.com/Hcfwew744z4/220x220" alt="" class="img-fluid">
    </div>
    <div class="col">
        <img src="https://source.unsplash.com/k41cAJvJ7h0/220x220" alt="" class="img-fluid">
    </div>
    <div class="col">
        <img src="https://source.unsplash.com/95YRwf6CNw8/220x220" alt="" class="img-fluid">
    </div>
    <div class="col">
        <img src="https://source.unsplash.com/2xU7rYxsTiM/220x220" alt="" class="img-fluid">
    </div>
    <div class="col">
        <img src="https://source.unsplash.com/m_HRfLhgABo/220x220" alt="" class="img-fluid">
    </div>
    <div class="col">
        <img src="https://source.unsplash.com/m_HRfLhgABo/220x220" alt="" class="img-fluid">
    </div>
    <div class="col">
        <img src="https://source.unsplash.com/2xU7rYxsTiM/220x220" alt="" class="img-fluid">
    </div>
    <div class="col">
        <img src="https://source.unsplash.com/95YRwf6CNw8/220x220" alt="" class="img-fluid">
    </div>
    <div class="col">
        <img src="https://source.unsplash.com/k41cAJvJ7h0/220x220" alt="" class="img-fluid">
    </div>
    <div class="col">
        <img src="https://source.unsplash.com/Hcfwew744z4/220x220" alt="" class="img-fluid">
    </div>
    <div class="col">
        <img src="https://source.unsplash.com/26MJGnCM0Wc/220x220" alt="" class="img-fluid">
    </div>
</div>

02 átomos

botones

botones bordes

Para reemplazar las clases de modificador predeterminadas del botón utiliza la clase.btn-outline-* para eliminar todas las imágenes y colores de fondo en cualquier botón.

Ejemplo de Uso
Seguimiento de solicitud Seguimiento de solicitud Seguimiento de solicitud Seguimiento de solicitud
Regresar al Principio 
<a href="" class="btn btn-outline-primary text-uppercase">Seguimiento de solicitud </a>
<a href="" class="btn btn-outline-secondary">Seguimiento de solicitud</a>
<a href="" class="btn btn-outline-dark text-uppercase">Seguimiento de solicitud</a>
<a href="" class="btn btn-outline-grey">Seguimiento de solicitud</a>

botones con iconos

Puedes agregar íconos a cualquier botón ya sea alineado a la izquierda o a la derecha

Si prefieres solamente usar el ícono, puedes hacerlo con las clases .btn regulares o agregar .btn-icon para hacerlo redondeado.

Ejemplo de Uso
Enviar mensaje Ir a correo electrónico Enviar mensaje

Regresar al Principio 
<a href="javascript:void(0)" class="btn btn-primary text-uppercase"><ion-icon name="megaphone-outline"></ion-icon> Enviar mensaje</a>
<a href="javascript:void(0)" class="btn btn-secondary"><ion-icon name="mail-unread-outline"></ion-icon> Ir a correo electrónico</a>

<button class="btn btn-outline-primary text-uppercase">Ver resultado del partido <ion-icon name="open-outline"></ion-icon></button>
<button class="btn btn-secondary"><ion-icon name="cog-outline"></ion-icon> Configuración de cuenta</button>

<a href="javascript:void(0)" class="btn btn-outline-primary btn-lg"><ion-icon name="megaphone-outline"></ion-icon> Enviar mensaje</a>
<hr>
<a href="javascript:void(0)" class="btn btn-primary btn-sm"><ion-icon name="open-outline"></ion-icon></a>
<a href="javascript:void(0)" class="btn btn-outline-primary "><ion-icon name="open-outline"></ion-icon></a>
<a href="javascript:void(0)" class="btn btn-secondary btn-lg"><ion-icon name="open-outline"></ion-icon></a>
<br>
<a href="javascript:void(0)" class="btn btn-primary btn-icon btn-sm"><ion-icon name="open-outline"></ion-icon></a>
<a href="javascript:void(0)" class="btn btn-outline-primary  btn-icon"><ion-icon name="open-outline"></ion-icon></a>
<a href="javascript:void(0)" class="btn btn-secondary btn-icon btn-lg"><ion-icon name="open-outline"></ion-icon></a>
Ejemplo de Uso
Seguimiento de solicitud Seguimiento de solicitud
Regresar al Principio 
<a href="" class="btn btn-link">Seguimiento de solicitud</a>
<a href="" class="btn btn-link text-uppercase">Seguimiento de solicitud</a>

botones principales

Las clases .btn están diseñadas para usarse con el elemento <button>. Sin embargo, también puede usar estas clases en elementos <a> o <input> (aunque algunos navegadores pueden aplicar una representación ligeramente diferente).

Al usar clases de botón en elementos <a> que se usan para activar la funcionalidad en la página (como el contenido colapsado), en lugar de vincular a nuevas páginas o secciones dentro de la página actual, estos vínculos se les debe asignar un role="button" para transmitir adecuadamente su propósito a las tecnologías de asistencia, como los lectores de pantalla.

Ejemplo de Uso
Seguimiento de solicitud Seguimiento de solicitud
Regresar al Principio 
<a href="" class="btn btn-primary text-uppercase">Seguimiento de solicitud</a>
<a href="" class="btn btn-secondary text-uppercase">Seguimiento de solicitud</a>
<button class="btn btn-dark">Seguimiento de solicitud</button>
<button class="btn btn-grey">Seguimiento de solicitud</button>

botones tamaños

Los botones se pueden adaptar a diferentes usos y contextos. Para cambiar el tamaño utiliza las clases <btn-lg> y <btn-sm> para hacerlos más grandes o pequeños respectivamente.

Ejemplo de Uso
Seguimiento de solicitud Seguimiento de solicitud Seguimiento de solicitud Seguimiento de solicitud
Regresar al Principio 
<a href="" class="btn btn-primary btn-lg text-uppercase">Seguimiento de solicitud</a>
<a href="" class="btn btn-secondary btn-lg">Seguimiento de solicitud</a>

<a href="" class="btn btn-primary btn-sm text-uppercase">Seguimiento de solicitud</a>
<a href="" class="btn btn-secondary btn-sm">Seguimiento de solicitud</a>

colores

escalas

Ejemplo de Uso
--uia-grey-100
--uia-grey-200
--uia-grey-300
--uia-grey-400
--uia-grey-500
--uia-grey-600
--uia-grey-700
--uia-grey-800
--uia-grey-900
Regresar al Principio 
<div class="p-3 bg-grey-100">--uia-grey-100</div>
<div class="p-3 bg-grey-200">--uia-grey-200</div>
<div class="p-3 bg-grey-300">--uia-grey-300</div>
<div class="p-3 bg-grey-400">--uia-grey-400</div>
<div class="p-3 bg-grey-500">--uia-grey-500</div>
<div class="p-3 bg-grey-600">--uia-grey-600</div>
<div class="p-3 bg-grey-700">--uia-grey-700</div>
<div class="p-3 bg-grey-800">--uia-grey-800</div>
<div class="p-3 bg-grey-900">--uia-grey-900</div>

neutrales

Ejemplo de Uso
Claro --uia-light
Oscuro --uia-black
Fondo --uia-body
Regresar al Principio 
<div class="p-3 mb-3 bg-white text-dark">Claro  --uia-light</div>
<div class="p-3 mb-3 bg-black text-white">Oscuro  --uia-black</div>
<div class="p-3 mb-3 bg-body text-dark">Fondo  --uia-body</div>

principales

Ibero System, está respaldado por un sistema de colores que tematiza nuestros estilos y componentes. Esto permite una personalización y extensión más completas para el proyecto.

Estos colores se pueden acceder por medio de variables CSS en cualquier elemento que pueda utilizar el atributo color, background-color y border-color entre otros.

Ejemplo de Uso
Principal --uia-primary
Secundario --uia-secondary
Éxito --uia-green
Regresar al Principio 
<div class="p-3 mb-3 bg-primary text-white">Principal  --uia-primary</div>
<div class="p-3 mb-3 bg-secondary text-white">Secundario --uia-secondary</div>
<div class="p-3 mb-3 bg-green text-white">Éxito  --uia-green</div>

secundarios

Ejemplo de Uso
Éxito --uia-success
Advertencia --uia-warning
Alerta / Error --uia-danger
Información --uia-info
Regresar al Principio 
<div class="p-3 mb-3 bg-success text-white">Éxito  --uia-success</div>
<div class="p-3 mb-3 bg-warning text-dark">Advertencia  --uia-warning</div>
<div class="p-3 mb-3 bg-danger text-white">Alerta / Error --uia-danger</div>
<div class="p-3 mb-3 bg-info text-dark">Información  --uia-info</div>

generales

divisores

Ejemplo de Uso
Regresar al Principio 
<hr>

sombras

Si bien las sombras en los componentes están deshabilitadas de forma predeterminada, se puede agregar o eliminar rápidamente una sombra con la clase .shadow. Incluye soporte para .shadow-none y dos tamaños predeterminados sm y lg

Ejemplo de Uso
Sin Sombra
Sombra Pequeña
Sombra Regular
Sombra Grande
Regresar al Principio 
<div class="shadow-none p-3 mb-4 bg-light">Sin Sombra</div>
<div class="shadow-sm p-3 mb-4 bg-body">Sombra Pequeña</div>
<div class="shadow p-3 mb-4 bg-body">Sombra Regular</div>
<div class="shadow-lg p-3 mb-4 bg-body">Sombra Grande</div>

utilidades

Puedes asignar fácilmente valores margin o padding a un elemento o un subconjunto con clases abreviadas. Incluye soporte para propiedades individuales, todas las propiedades y propiedades verticales y horizontales.

Las clases se nombran usando el formato {propiedad}{lado}-{tamaño}

Donde propiedad es una de:

  • m - para clases que establecen margin
  • p - para clases que establecen padding

Donde lado es uno de:

  • t - para clases que establecen margin-top o padding-top
  • b - para clases que establecen margin-bottom o padding-bottom
  • s - (inicio) para las clases que establecen margin-left o padding-left
  • e - (fin) para las clases que configuran margin-right o padding-right
  • x: para clases que establecen tanto *-left como *-right
  • y - para clases que establecen tanto *-top como *-bottom
  • en blanco: para clases que establecen un margin o padding en los 4 lados del elemento

Donde tamaño es uno de:

  • 0: para clases que eliminan el margin o el relleno estableciéndolo en 0
  • 1 - (por defecto) para las clases que establecen el margin o padding en .25
  • 2 - (por defecto) para las clases que establecen el margin o padding en .5
  • 3 - (por defecto) para las clases que establecen el margin o padding en 1
  • 4 - (por defecto) para las clases que establecen el margin o padding en 1.5
  • 5 - (por defecto) para las clases que establecen el margin o padding en 3
  • auto: para clases que establecen el margin en automático

íconos

Íconos de diseño premium para usar en aplicaciones web, iOS, Android y de escritorio. Soporte para SVG y fuente web. Completamente de código abierto, con licencia MIT y construido por Ionic.

Ejemplo de Uso

Estilos

Colores

Ancho de Línea

Tamaño de Fuente

SVG's Personalizados

SVG's Personalizados: colors

Aria

Regresar al Principio 
<div class="icons-sizer">
    <ion-icon name="accessibility-outline"></ion-icon>
    <ion-icon name="add-outline"></ion-icon>
    <ion-icon name="add-circle-outline"></ion-icon>
    <ion-icon name="airplane-outline"></ion-icon>
    <ion-icon name="alarm-outline"></ion-icon>
    <ion-icon name="albums-outline"></ion-icon>
    <ion-icon name="alert-outline"></ion-icon>
    <ion-icon name="alert-circle-outline"></ion-icon>
    <ion-icon name="alert-circle-outline"></ion-icon>
    <ion-icon name="analytics-outline"></ion-icon>
    <ion-icon name="aperture-outline"></ion-icon>
    <ion-icon name="apps-outline"></ion-icon>
    <ion-icon name="archive-outline"></ion-icon>
    <ion-icon name="arrow-back-outline"></ion-icon>
    <ion-icon name="arrow-back-circle-outline"></ion-icon>
    <ion-icon name="arrow-down-outline"></ion-icon>
    <ion-icon name="arrow-down-circle-outline"></ion-icon>
    <ion-icon name="arrow-forward-outline"></ion-icon>
    <ion-icon name="arrow-forward-circle-outline"></ion-icon>
    <ion-icon name="arrow-redo-outline"></ion-icon>
    <ion-icon name="arrow-redo-circle-outline"></ion-icon>
    <ion-icon name="arrow-undo-outline"></ion-icon>
    <ion-icon name="arrow-undo-circle-outline"></ion-icon>
    <ion-icon name="arrow-up-outline"></ion-icon>
    <ion-icon name="arrow-up-circle-outline"></ion-icon>
    <ion-icon name="at-outline"></ion-icon>
    <ion-icon name="at-circle-outline"></ion-icon>
    <ion-icon name="attach-outline"></ion-icon>
    <ion-icon name="backspace-outline"></ion-icon>
    <ion-icon name="bag-outline"></ion-icon>
    <ion-icon name="bag-add-outline"></ion-icon>
    <ion-icon name="bag-check-outline"></ion-icon>
    <ion-icon name="bag-handle-outline"></ion-icon>
    <ion-icon name="bag-remove-outline"></ion-icon>
    <ion-icon name="balloon-outline"></ion-icon>
    <ion-icon name="ban-outline"></ion-icon>
    <ion-icon name="bandage-outline"></ion-icon>
    <ion-icon name="bar-chart-outline"></ion-icon>
    <ion-icon name="barbell-outline"></ion-icon>
    <ion-icon name="barcode-outline"></ion-icon>
    <ion-icon name="baseball-outline"></ion-icon>
    <ion-icon name="basket-outline"></ion-icon>
    <ion-icon name="basketball-outline"></ion-icon>
    <ion-icon name="battery-charging-outline"></ion-icon>
    <ion-icon name="battery-dead-outline"></ion-icon>
    <ion-icon name="battery-full-outline"></ion-icon>
    <ion-icon name="battery-half-outline"></ion-icon>
    <ion-icon name="beaker-outline"></ion-icon>
    <ion-icon name="bed-outline"></ion-icon>
    <ion-icon name="beer-outline"></ion-icon>
    <ion-icon name="bicycle-outline"></ion-icon>
    <ion-icon name="bluetooth-outline"></ion-icon>
    <ion-icon name="boat-outline"></ion-icon>
    <ion-icon name="body-outline"></ion-icon>
    <ion-icon name="bonfire-outline"></ion-icon>
    <ion-icon name="book-outline"></ion-icon>
    <ion-icon name="bookmark-outline"></ion-icon>
    <ion-icon name="bookmarks-outline"></ion-icon>
    <ion-icon name="bowling-ball-outline"></ion-icon>
    <ion-icon name="briefcase-outline"></ion-icon>
    <ion-icon name="browsers-outline"></ion-icon>
    <ion-icon name="brush-outline"></ion-icon>
    <ion-icon name="bug-outline"></ion-icon>
    <ion-icon name="build-outline"></ion-icon>

    <p>Estilos</p>
    <ion-icon name="accessibility-outline"></ion-icon>
    <ion-icon name="accessibility"></ion-icon>
    <ion-icon name="accessibility-sharp"></ion-icon>

    <p>Colores</p>
    <ion-icon color="primary" name="cellular"></ion-icon>
    <ion-icon color="secondary" name="at"></ion-icon>
    <ion-icon color="tertiary" name="call"></ion-icon>
    <ion-icon color="success" name="football"></ion-icon>
    <ion-icon color="warning" name="analytics"></ion-icon>
    <ion-icon color="danger" name="grid"></ion-icon>
    <ion-icon color="light" name="funnel"></ion-icon>
    <ion-icon color="medium" name="watch"></ion-icon>
    <ion-icon color="dark" name="toggle"></ion-icon>

    <p>Ancho de Línea</p>
    <ion-icon name="heart-outline" style="--ionicon-stroke-width: 8px"></ion-icon>

    <p>Tamaño de Fuente</p>
    <ion-icon name="book" style="font-size: 50px"></ion-icon>
    <ion-icon src="./assets/icons/ionicons/bug_report.svg" style="font-size: 50px"></ion-icon>

    <p>SVG's Personalizados</p>
    <ion-icon src="./assets/icons/ionicons/bug_report.svg"></ion-icon>
    <ion-icon src="./assets/icons/ionicons/chat.svg"></ion-icon>
    <ion-icon src="./assets/icons/ionicons/commute.svg"></ion-icon>
    <ion-icon src="./assets/icons/ionicons/copyright.svg"></ion-icon>
    <ion-icon src="./assets/icons/ionicons/done_all.svg"></ion-icon>
    <ion-icon src="./assets/icons/ionicons/lock_open.svg"></ion-icon>
    <ion-icon src="./assets/icons/ionicons/toll.svg"></ion-icon>
    <ion-icon src="./assets/icons/ionicons/web_asset.svg"></ion-icon>
    <ion-icon src="./assets/icons/ionicons/work_outline.svg"></ion-icon>

    <p>SVG's Personalizados: colors</p>
    <ion-icon color="primary" src="./assets/icons/ionicons/bug_report.svg"></ion-icon>
    <ion-icon color="secondary" src="./assets/icons/ionicons/chat.svg"></ion-icon>
    <ion-icon color="tertiary" src="./assets/icons/ionicons/commute.svg"></ion-icon>
    <ion-icon color="success" src="./assets/icons/ionicons/copyright.svg"></ion-icon>
    <ion-icon color="warning" src="./assets/icons/ionicons/done_all.svg"></ion-icon>
    <ion-icon color="danger" src="./assets/icons/ionicons/lock_open.svg"></ion-icon>
    <ion-icon color="light" src="./assets/icons/ionicons/toll.svg"></ion-icon>
    <ion-icon color="medium" src="./assets/icons/ionicons/web_asset.svg"></ion-icon>
    <ion-icon color="dark" src="./assets/icons/ionicons/work_outline.svg"></ion-icon>

    <p>Aria</p>
    <ion-icon name="cellular"></ion-icon>
    <ion-icon name="cellular" aria-label="Mobile data"></ion-icon>
    <ion-icon name="cellular" aria-hidden="true"></ion-icon>
</div>

logotipos

Logotipo Ibero

Ejemplo de Uso
Regresar al Principio 
<a href="#" class="logo hide-text"><h1>Universidad Iberoamericana León</h1></a>
<a href="#" class="logo logo-main hide-text"><h1>Universidad Iberoamericana León</h1></a>
<a href="#" class="logo logo-secondary hide-text"><h1>Universidad Iberoamericana León</h1></a>

<a href="#" class="logo logo-small hide-text"><h1>Universidad Iberoamericana León</h1></a>

tipografía

alineaciones

Realinee fácilmente el texto a los componentes con clases de alineación de texto. Las alineaciones usan el atributo !important por lo que sobreescriben y toman precendencia a otras clases en el elemento.

Ejemplo de Uso

Comienza el texto alineado en todos los tamaños de ventana.

Texto alineado al centro en todos los tamaños de ventana.

Terminar texto alineado en todos los tamaños de ventana.

Regresar al Principio 
<p class="text-start">Comienza el texto alineado en todos los tamaños de ventana.</p>
<p class="text-center">Texto alineado al centro en todos los tamaños de ventana.</p>
<p class="text-end">Terminar texto alineado en todos los tamaños de ventana.</p>

listas

lista viñetas

Ejemplo de Uso
  • Elemento de lista 1
  • Elemento de lista 1
    • Elemento de lista 2
    • Elemento de lista 2
      • Elemento de lista 3
      • Elemento de lista 3
    • Elemento de lista 2
    • Elemento de lista 2
  • Elemento de lista 1
  • Elemento de lista 1
Regresar al Principio 
<ul>
  <li>Elemento de lista 1</li>
  <li>Elemento de lista 1
    <ul>
      <li>Elemento de lista 2</li>
      <li>Elemento de lista 2
        <ul>
          <li>Elemento de lista 3</li>
          <li>Elemento de lista 3</li>
        </ul>
      </li>
      <li>Elemento de lista 2</li>
      <li>Elemento de lista 2</li>
    </ul>
  </li>
  <li>Elemento de lista 1</li>
  <li>Elemento de lista 1</li>
</ul>

lista alineada

Ejemplo de Uso
  • Este es un elemento de lista.
  • Y otro.
  • Pero se muestran en línea.
Regresar al Principio 
<ul class="list-inline">
    <li>Este es un elemento de lista.</li>
    <li>Y otro.</li>
    <li>Pero se muestran en línea.</li>
 </ul>

lista de definiciones

Ejemplo de Uso
Descripción nombre/título
Descripción descripción/valor
Descripción nombre/título
Descripción descripción/valor
Descripción descripción/valor
Descripción nombre/título
Descripción nombre/título
Descripción descripción/valor
Regresar al Principio 
<dl>
  <dt>Descripción nombre/título</dt>
  <dd>Descripción descripción/valor</dd>
  <dt>Descripción nombre/título</dt>
  <dd>Descripción descripción/valor</dd>
  <dd>Descripción descripción/valor</dd>
  <dt>Descripción nombre/título</dt>
  <dt>Descripción nombre/título</dt>
  <dd>Descripción descripción/valor</dd>
</dl>

lista ordenada

Ejemplo de Uso
  1. Elemento de lista 1
  2. Elemento de lista 1
    1. Elemento de lista 2
    2. Elemento de lista 2
      1. Elemento de lista 3
      2. Elemento de lista 3
    3. Elemento de lista 2
    4. Elemento de lista 2
  3. Elemento de lista 1
  4. Elemento de lista 1
Regresar al Principio 
<ol>
  <li>Elemento de lista 1</li>
  <li>Elemento de lista 1
    <ol>
      <li>Elemento de lista 2</li>
      <li>Elemento de lista 2
        <ol>
          <li>Elemento de lista 3</li>
          <li>Elemento de lista 3</li>
        </ol>
      </li>
      <li>Elemento de lista 2</li>
      <li>Elemento de lista 2</li>
    </ol>
  </li>
  <li>Elemento de lista 1</li>
  <li>Elemento de lista 1</li>
</ol>

lista sin estilos

Ejemplo de Uso
  • Esta es una lista.
  • Parece completamente sin estilo.
  • Estructuralmente, sigue siendo una lista.
  • Sin embargo, este estilo sólo se aplica a los elementos secundarios inmediatos.
  • Listas anidadas:
    • no se ven afectados por este estilo
    • seguirá mostrando una viñeta
    • y tener un margen izquierdo apropiado
  • Esto aún puede ser útil en algunas situaciones.
Regresar al Principio 
<ul class="list-unstyled">
    <li>Esta es una lista.</li>
    <li>Parece completamente sin estilo.</li>
    <li>Estructuralmente, sigue siendo una lista.</li>
    <li>Sin embargo, este estilo sólo se aplica a los elementos secundarios inmediatos.</li>
    <li>Listas anidadas:
        <ul>
        <li>no se ven afectados por este estilo</li>
        <li>seguirá mostrando una viñeta</li>
        <li>y tener un margen izquierdo apropiado</li>
        </ul>
    </li>
    <li>Esto aún puede ser útil en algunas situaciones.</li>
</ul>
<hr>
<ul class="list-unstyled">
    <li class="list-title">Vinculación</li>
    <li><a href="#">Bolsa de Trabajo</a></li>
    <li><a href="#">Puerto Interior G100</a></li>
    <li><a href="#">Prácticas Profesionales</a></li>
    <li><a href="#">Parque Ibero Innovación</a></li>
</ul>

textos

Estilo para elementos HTML5 en línea comunes.

Tenga en cuenta que esas etiquetas deben usarse con fines semánticos:

  • <mark> representa texto que está marcado o resaltado para fines de referencia o notación.
  • <small> representa comentarios secundarios y letra pequeña, como derechos de autor y texto legal.
  • <s> representa elementos que ya no son relevantes o ya no son precisos.
  • <u> representa un tramo de texto en línea que debe representarse de manera que indique que tiene una anotación no textual.

Si se quiere aplicar estilo al texto, deben usar las siguientes clases en su lugar:

  • .mark aplicará los mismos estilos que <mark>.
  • .small aplicará los mismos estilos que <small>.
  • .text-decoration-underline aplicará los mismos estilos que <u>.
  • .text-decoration-line-through aplicará los mismos estilos que <s>.

Aunque no se muestra arriba, también pueden usarse las etiquetas <b> y <i> en HTML5. <b> está pensado para resaltar palabras o frases sin transmitir una importancia adicional, mientras que <i> es principalmente para voz en off, términos técnicos, etc.

Ejemplo de Uso

Puedes usar la etiqueta de marca para resaltar texto.

Esta línea de texto debe tratarse como texto eliminado.

Esta línea de texto debe tratarse como si ya no fuera precisa.

Esta línea de texto debe tratarse como una adición al documento.

Esta línea de texto aparecerá subrayada.

Esta línea de texto debe tratarse como letra pequeña.

Esta línea aparece en negrita.

Esta línea aparece como texto en cursiva.

Regresar al Principio 
<p>Puedes usar la etiqueta de marca para <mark>resaltar</mark> texto.</p>
<p><del>Esta línea de texto debe tratarse como texto eliminado.</del></p>
<p><s>Esta línea de texto debe tratarse como si ya no fuera precisa.</s></p>
<p><ins>Esta línea de texto debe tratarse como una adición al documento.</ins></p>
<p><u>Esta línea de texto aparecerá subrayada.</u></p>
<p><small>Esta línea de texto debe tratarse como letra pequeña.</small></p>
<p><strong>Esta línea aparece en negrita.</strong></p>
<p><em>Esta línea aparece como texto en cursiva.</em></p>

transformaciones

Transforma los textos de tus componentes con clases de capitalización de texto. Las transformaciones usan el atributo !important por lo que sobreescriben y toman precendencia a otras clases en el elemento.

Ten en cuenta que .text-capitalize sólo cambia la primera letra de cada palabra, dejando intactas las mayúsculas y minúsculas de cualquier otra letra.

Ejemplo de Uso

Texto en minúsculas.

Texto en mayúsculas.

Texto en mayúsculas.

Regresar al Principio 
<p class="text-lowercase">Texto en minúsculas.</p>
<p class="text-uppercase">Texto en mayúsculas.</p>
<p class="text-capitalize">Texto en mayúsculas.</p>

títulos

Escala Tipográfica

La “escala Ibero” se basa en una sola ecuación. La fórmula de nuestra escala se creó para proporcionar una jerarquía geométrica para todo tipo de experiencias.

La fórmula asume el valor base del texto como "B", "p" la proporción común incremental y "n" la cantidad de elementos en la escala. Siendo B=16px y p=1.250

La proporción común se basa en teoría musical usando la escala mayor de DO

Fórmula

Bn=redondear(B×p)

B1 = (16×1.250) 20px

B2 = (20×1.250) 25px

Familia de Tipografías

Fuente Primaria

Inter Regular

Inter es una familia de fuentes variable cuidadosamente elaborada y diseñada para pantallas de computadora.

Inter presenta una altura x alta para facilitar la legibilidad del texto en mayúsculas y minúsculas. También se proporcionan varias características de OpenType, como alternativas contextuales que ajustan la puntuación según la forma de los glifos circundantes, cero recortado para cuando necesite desambiguar "0" de "o", números tabulares, etc.

El proyecto Inter está dirigido por Rasmus Andersson, un fabricante de software sueco que vive en San Francisco. Para contribuir, consulte github.com/rsms/inter

Licencia

Estas fuentes tienen licencia de Open Font License. Puede usarlos en sus productos y proyectos: impresos o digitales, comerciales o de otro tipo.

Ejemplo de Uso

Display 2

95px

Universidad Iberoamericana León

Display 1

76px

Universidad Iberoamericana León

h1

61px

Universidad Iberoamericana León

h2

49px

Universidad Iberoamericana León

h3

39px

Universidad Iberoamericana León

h4

31px

Universidad Iberoamericana León

h5

25px

Universidad Iberoamericana León

h6

20px

Universidad Iberoamericana León

p

16px

Universidad Iberoamericana León

small

13px

Universidad Iberoamericana León

small uppercase

13px

Universidad Iberoamericana León

Subtítulo

13px

Universidad Iberoamericana León
Regresar al Principio 
<div class="grid">
    <div class="col-2">
        <p class="mb-0">Display 2</p>
        <p class="mt-0">95px</p>
    </div>
    <div class="col">
        <h1 class="display-2 mt-0">Universidad Iberoamericana León</h1>
    </div>
</div>

<div class="grid">
    <div class="col-2">
        <p class="mb-0">Display 1</p>
        <p class="mt-0">76px</p>
    </div>
    <div class="col">
        <h1 class="display-1 mt-0">Universidad Iberoamericana León</h1>
    </div>
</div>

<div class="grid">
    <div class="col-2">
        <p class="mb-0">h1</p>
        <p class="mt-0">61px</p>
    </div>
    <div class="col">
        <h1 class="mt-0">Universidad Iberoamericana León</h1>
    </div>
</div>

<div class="grid">
    <div class="col-2">
        <p class="mb-0">h2</p>
        <p class="mt-0">49px</p>
    </div>
    <div class="col">
        <h2 class="mt-0">Universidad Iberoamericana León</h2>
    </div>
</div>

<div class="grid">
    <div class="col-2">
        <p class="mb-0">h3</p>
        <p class="mt-0">39px</p>
    </div>
    <div class="col">
        <h3 class="mt-0">Universidad Iberoamericana León</h3>
    </div>
</div>

<div class="grid">
    <div class="col-2">
        <p class="mb-0">h4</p>
        <p class="mt-0">31px</p>
    </div>
    <div class="col">
        <h4 class="mt-0">Universidad Iberoamericana León</h4>
    </div>
</div>

<div class="grid">
    <div class="col-2">
        <p class="mb-0">h5</p>
        <p class="mt-0">25px</p>
    </div>
    <div class="col">
        <h5 class="mt-0">Universidad Iberoamericana León</h5>
    </div>
</div>

<div class="grid">
    <div class="col-2">
        <p class="mb-0">h6</p>
        <p class="mt-0">20px</p>
    </div>
    <div class="col">
        <h6 class="mt-0">Universidad Iberoamericana León</h6>
    </div>
</div>

<div class="grid">
    <div class="col-2">
        <p class="mb-0">p</p>
        <p class="mt-0">16px</p>
    </div>
    <div class="col">
        <p class="mt-0">Universidad Iberoamericana León</p>
    </div>
</div>

<div class="grid">
    <div class="col-2">
        <p class="mb-0">small</p>
        <p class="mt-0">13px</p>
    </div>
    <div class="col">
        <small class="mt-0">Universidad Iberoamericana León</small>
    </div>
</div>

<div class="grid">
    <div class="col-2">
        <p class="mb-0">small uppercase</p>
        <p class="mt-0">13px</p>
    </div>
    <div class="col">
        <small class="text-uppercase mt-0">Universidad Iberoamericana León</small>
    </div>
</div>

<div class="grid">
    <div class="col-2">
        <p class="mb-0">Subtítulo</p>
        <p class="mt-0">13px</p>
    </div>
    <div class="col">
        <small class="subtitle text-uppercase mt-0">Universidad Iberoamericana León</small>
    </div>
</div>

03 moléculas

formularios

campos acomodos

Cada grupo de campos de formulario debe residir en un elemento <form>. Este Sistema de Diseño no proporciona un estilo predeterminado para el elemento <form>, pero hay algunas funciones del navegador que se proporcionan de forma predeterminada.

Dado que este Sistema aplica display: block y width: 100% a casi todos nuestros controles de formulario, los formularios se apilarán verticalmente de forma predeterminada. Se pueden usar las clases de la cuadrícula para variar este diseño según el formulario.

Ejemplo de Uso

Introduce tu nombre completo.

Regresar al Principio 
<div class="grid">
    <div class="col-4">
        <div class="form-wrap">
            <label class="form-label" for="form-input">Nombre <span class="text-info">(Opcional)</span></label> 
            <input class="form-control" type="text" value="">
            <p class="form-help">Introduce tu nombre completo.</p>
        </div>
    </div>
    <div class="col-8">
        <div class="form-wrap">
            <label class="form-label" for="form-input">Correo Electrónico <span class="text-red">*</span></label> 
            <input class="form-control" type="email" value="">
        </div>
    </div>

    <div class="col-6">
        <div class="form-wrap">
            <label class="form-label" for="form-input">Contraseña <span class="text-red">*</span></label> 
            <input class="form-control" type="password" value="">
        </div>
    </div>
    <div class="col-6">
        <div class="form-wrap">
            <label class="form-label" for="form-input">Confirmar Contraseña <span class="text-red">*</span></label> 
            <input class="form-control" type="password" value="">
        </div>
    </div>

    <div class="col-12">
        <div class="form-wrap form-check mt-0">
            <input class="form-check-input" type="checkbox" value="" id="checkboxDefault">
            <label class="form-check-label" for="checkboxDefault">
                Acepto los términos y condiciones. Léelos <a href="#">aquí</a>
            </label>
        </div>
    </div>
    
    <div class="col-12">
        <button class="btn btn-primary">Registrar Cuenta <ion-icon name="log-in-outline"></ion-icon></button>
    </div>
</div>

campos predeterminados

Ejemplo de Uso

Un texto de ayuda que puede ser útil en varios casos.

Este tipo de campos no se pueden editar manualmente.

Este tipo de campos no se envian en el formulario al publicarse la información.

Regresar al Principio 
<div class="form-wrap">
  <label class="form-label" for="form-input">Campo de texto</label> 
  <input class="form-control" type="text" value="">
  <p class="form-help">Un texto de ayuda que puede ser útil en varios casos.</p>
</div>

<div class="form-wrap">
  <label class="form-label" for="form-input">Campo de texto con placeholders</label> 
  <input class="form-control" type="text" placeholder="Soy un texto de tipo placeholder" value="">
</div>

<div class="form-wrap">
  <label class="form-label" for="form-input">Campo de texto de sólo lectura</label> 
  <input class="form-control" type="text" readonly="" value="Este campo es de sólo lectura">
  <p class="form-help">Este tipo de campos no se pueden editar manualmente.</p>
</div>

<div class="form-wrap">
  <label class="form-label" for="form-input">Campo de texto deshabilitado</label> 
  <input class="form-control" type="text" disabled="" value="Este campo está deshabilitado">
  <p class="form-help">Este tipo de campos no se envian en el formulario al publicarse la información.</p>
</div>

<div class="form-wrap">
  <label class="form-label" for="form-input">Campo requerido <span class="text-red">*</span></label> 
  <input class="form-control" type="text" required="" value="">
</div>

<div class="form-wrap">
  <label class="form-label" for="form-input">Campo de E-mail</label> 
  <input class="form-control" type="email" value="">
</div>

<div class="form-wrap">
  <label class="form-label" for="form-input">Campo de tipo búsqueda</label> 
  <input class="form-control" type="search" value="">
</div>

<div class="form-wrap">
  <label class="form-label" for="form-input">Campo de reconocimiento vocal</label> 
  <input class="form-control" type="text" x-webkit-speech="" value="">
</div>

<div class="form-wrap">
  <label class="form-label" for="form-input">Campo de teléfono</label> 
  <input class="form-control" type="tel" value="">
</div>

<div class="form-wrap">
  <label class="form-label" for="form-input">Campo de URL</label> 
  <input class="form-control" type="url" value="" placeholder="http://">
</div>

<div class="form-wrap">
  <label class="form-label" for="form-input">Campo de Contraseña</label> 
  <input class="form-control" type="password" value="contraseña" placeholder="">
</div>

<div class="form-wrap">
  <label class="form-label" for="form-input">Campo de Archivo</label> 
  <input class="form-control" type="file" value="">
</div>

<div class="form-wrap">
  <label class="form-label" for="form-input">Campo de área de texto</label> 
  <textarea class="form-control" cols="30" rows="5" >Este es un texto dentro del área de texto.</textarea>
</div>

<div class="form-wrap">
  <label class="form-label" for="form-input">Campo de Colores</label> 
  <input class="form-control" type="color" value="#UIA92J">
</div>

<div class="form-wrap">
  <label class="form-label" for="form-input">Campo Numérico</label> 
  <input class="form-control" type="number" value="5" min="0" max="10">
</div>

<div class="form-wrap">
  <label class="form-label" for="form-input">Campo de Fecha</label> 
  <input class="form-control" type="date" value="15/01/1993">
</div>

campos rangos

Ejemplo de Uso
20
Regresar al Principio 
<div class="form-wrap">
    <label class="form-label" for="form-input">Rango</label> 
    <input id="range-input" class="form-range" type="range" value="20" min="0" max="100">
    <output>20</output>
</div>

<script>
if (document.querySelector) {
    document.querySelector('#range-input').onchange = function(e) {
    e.target.nextElementSibling.innerText = e.target.value;
    }
}
</script>

campos selectores

Ejemplo de Uso
Regresar al Principio 
<div class="form-wrap">
<label class="form-label" for="form-input">Campo de Selecciones</label> 
<select class="form-select">
    <option selected="selected">Opción número 1</option>
    <option>Opción número 2</option>
    <option>Opción número 3</option>
    <option>Opción número 4</option>
    <option>Opción número 5</option>
</select>
</div>

<div class="form-wrap">
<label class="form-label" for="form-input">Campo de Selecciones</label> 
<select class="form-select" multiple size="5">
    <option selected="selected">Opción número 1</option>
    <option>Opción número 2</option>
    <option>Opción número 3</option>
    <option>Opción número 4</option>
    <option>Opción número 5</option>
</select>
</div>

campos verificadores

Ejemplo de Uso
Regresar al Principio 
<div class="form-wrap form-check">
    <input class="form-check-input" type="radio" name="flexRadioDefault" id="radioDefault">
    <label class="form-check-label" for="radioDefault">
        Radio normal
    </label>
</div>
<div class="form-wrap form-check">
    <input class="form-check-input" type="radio" name="flexRadioDefault" id="radioSelected" checked>
    <label class="form-check-label" for="radioSelected">
        Radio seleccionado
    </label>
</div>

<hr>

<div class="form-wrap form-check">
    <input class="form-check-input" type="checkbox" value="" id="checkboxDefault">
    <label class="form-check-label" for="checkboxDefault">
        Checkbox normal
    </label>
</div>

<div class="form-wrap form-check">
    <input class="form-check-input" type="checkbox" value="" id="checkboxSelected" checked>
    <label class="form-check-label" for="checkboxSelected">
        Checkbox seleccionado
    </label>
</div>

indicadores

barra de progreso

Los componentes de progreso se construyen con dos elementos HTML, algo de CSS para establecer el ancho y algunos atributos. No usamos el elemento <progress> de HTML5 , asegurándose de que puede apilar barras de progreso, animarlas y colocar etiquetas de texto sobre ellas.

  • Usamos la clase .progress como contenedor para indicar el valor máximo de la barra de progreso.
  • Usamos la .progress-bar interna para indicar el progreso hasta el momento.
  • La clase .progress-bar requiere un estilo en línea, una clase de utilidad o CSS personalizado para establecer su ancho.
  • La clase .progress-bar también requiere algunos atributos como role y aria para que sea accesible en dispositivos especiales.
Ejemplo de Uso
Regresar al Principio 
<div class="progress mb-3">
    <div class="progress-bar" role="progressbar" aria-valuenow="0" aria-valuemin="0" aria-valuemax="100"></div>
</div>

<div class="progress mb-3">
    <div class="progress-bar" role="progressbar" style="width: 25%" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100"></div>
</div>

<div class="progress mb-3">
    <div class="progress-bar" role="progressbar" style="width: 50%" aria-valuenow="50" aria-valuemin="0" aria-valuemax="100"></div>
</div>

<div class="progress mb-3">
    <div class="progress-bar" role="progressbar" style="width: 75%" aria-valuenow="75" aria-valuemin="0" aria-valuemax="100"></div>
</div>

<div class="progress mb-3">
    <div class="progress-bar" role="progressbar" style="width: 100%" aria-valuenow="100" aria-valuemin="0" aria-valuemax="100"></div>
</div>

elementos de carga

Los "spinners" de Ibero System se pueden usar para mostrar el estado de carga. Están construidos solo con HTML y CSS, lo que significa que no se necesita JavaScript para crearlos. Su apariencia, alineación y tamaño se pueden personalizar fácilmente con las clases de utilidad.

Por motivos de accesibilidad, cada "spinner" incluye role="status" y un <span class="visually-hidden">Cargando...</span> . Este elemento es opcional, pero recomendado.

Ejemplo de Uso

Colores

"Spinner" de pulso

Colores

Regresar al Principio 
<div class="spinner-ibero" role="status">
    <span class="visually-hidden">Cargando...</span>
</div>

<p class="mb-1 mt-4">Colores</p>
<div class="spinner-ibero text-red" role="status">
    <span class="visually-hidden">Cargando...</span>
</div>

<div class="spinner-ibero text-secondary" role="status">
    <span class="visually-hidden">Cargando...</span>
</div>

<div class="spinner-ibero text-success" role="status">
    <span class="visually-hidden">Cargando...</span>
</div>

<div class="spinner-ibero text-danger" role="status">
    <span class="visually-hidden">Cargando...</span>
</div>

<div class="spinner-ibero text-warning" role="status">
    <span class="visually-hidden">Cargando...</span>
</div>

<div class="spinner-ibero text-info" role="status">
    <span class="visually-hidden">Cargando...</span>
</div>

<div class="spinner-ibero text-light" role="status">
    <span class="visually-hidden">Cargando...</span>
</div>

<div class="spinner-ibero text-dark" role="status">
    <span class="visually-hidden">Cargando...</span>
</div>

<p class="mb-1 mt-5">"Spinner" de pulso</p>
<div class="spinner-pulse" role="status">
    <span class="visually-hidden">Cargando...</span>
</div>

<p class="mb-1 mt-4">Colores</p>
<div class="spinner-pulse text-primary" role="status">
    <span class="visually-hidden">Cargando...</span>
  </div>
  <div class="spinner-pulse text-secondary" role="status">
    <span class="visually-hidden">Cargando...</span>
  </div>
  <div class="spinner-pulse text-success" role="status">
    <span class="visually-hidden">Cargando...</span>
  </div>
  <div class="spinner-pulse text-danger" role="status">
    <span class="visually-hidden">Cargando...</span>
  </div>
  <div class="spinner-pulse text-warning" role="status">
    <span class="visually-hidden">Cargando...</span>
  </div>
  <div class="spinner-pulse text-info" role="status">
    <span class="visually-hidden">Cargando...</span>
  </div>
  <div class="spinner-pulse text-light" role="status">
    <span class="visually-hidden">Cargando...</span>
  </div>
  <div class="spinner-pulse text-dark" role="status">
    <span class="visually-hidden">Cargando...</span>
  </div>

elementos de carga botones

Utiliza los "spinners" dentro de los botones para indicar que una acción se está procesando o teniendo lugar actualmente. También puedes cambiar el texto del "spinner" y utilizar texto en el botón según sea necesario.

Ejemplo de Uso

Regresar al Principio 
<button class="btn btn-primary" type="button" disabled>
    <span class="spinner-ibero spinner-ibero-sm" role="status" aria-hidden="true"></span>
    <span class="visually-hidden">Cargando...</span>
</button>

<button class="btn btn-primary" type="button" disabled>
    <span class="spinner-ibero spinner-ibero-sm me-2" role="status" aria-hidden="true"></span>
    Cargando...
</button>

<br>

<button class="btn btn-primary" type="button" disabled>
    <span class="spinner-pulse spinner-pulse-sm" role="status" aria-hidden="true"></span>
    <span class="visually-hidden">Cargando...</span>
</button>

<button class="btn btn-primary" type="button" disabled>
    <span class="spinner-pulse spinner-pulse-sm me-2" role="status" aria-hidden="true"></span>
    Cargando...
</button>

elementos de carga tamaños

Agrega .spinner-ibero-sm y .spinner-pulse-sm para hacer un spinner más pequeño que pueda usarse rápidamente dentro de otros componentes.

O bien, puedes usar CSS personalizado o estilos en línea para cambiar las dimensiones según sea necesario.

Ejemplo de Uso
Regresar al Principio 
<div class="spinner-ibero spinner-ibero-sm" role="status">
    <span class="visually-hidden">Cargando...</span>
</div>

<div class="spinner-pulse spinner-pulse-sm" role="status">
    <span class="visually-hidden">Cargando...</span>
</div>

<div class="spinner-border text-red" style="width: 3rem; height: 3rem;" role="status">
    <span class="visually-hidden">Cargando...</span>
</div>

<div class="spinner-grow text-red" style="width: 3rem; height: 3rem;" role="status">
    <span class="visually-hidden">Cargando...</span>
</div>

tooltip

Un contenedor con estilo para llamar la atención sobre el contenido. La información del "tooltip" es activada por el elemento secundario que envuelve el componente.

Ejemplo de Uso

Tooltip Superior

Tooltip Izquierdo

Tooltip Derecho

Tooltip Inferior

Regresar al Principio 
<p tooltip="¡Yo aparezco arriba!">Tooltip Superior</p>
<p tooltip="Deja entro desde la izquierda" flow="left">Tooltip Izquierdo</p>
<p tooltip="Deja entro desde la derecha" flow="right">Tooltip Derecho</p>
<p tooltip="Ahora desde abajo." flow="down">Tooltip Inferior</p>

tooltip colores

Ejemplo de Uso

Tooltip Superior

Tooltip Izquierdo

Tooltip Derecho

Tooltip Inferior

Regresar al Principio 
<p tooltip="¡Yo aparezco arriba!" tooltip-color="uia-primary">Tooltip Superior</p>
<p tooltip="Deja entro desde la izquierda" flow="left" tooltip-color="uia-success">Tooltip Izquierdo</p>
<p tooltip="Deja entro desde la derecha" flow="right" tooltip-color="uia-info">Tooltip Derecho</p>
<p tooltip="Ahora desde abajo." flow="down" tooltip-color="uia-warning">Tooltip Inferior</p>

Es muy sencillo integrar los "tooltips" en párrafos o elementos interactivos como los hipervínculos y botones. Sólo agrega el atributo tooltip al elemento y listo.

Ejemplo de Uso

La Universidad Iberoamericana León es una Institución de educación superior de inspiración cristiana confiada a la Compañía de Jesús, que busca formar integralmente hombres y mujeres para los demás a través de la docencia, la investigación, la difusión del conocimiento y la vinculación, capaces de contribuir a la construcción de una sociedad más justa, democrática y sustentable. Se asume como una comunidad de personas en permanente crecimiento, heredera de la tradición educativa jesuita.

Botón con tooltip Botón con tooltip
Regresar al Principio 
<p>
    La <a href="" tooltip="¡Una gran Institución!">Universidad Iberoamericana León</a> es una Institución de educación superior de inspiración cristiana confiada a la Compañía de Jesús, que busca <a href="" tooltip="La verdad nos hara libres" flow="left">formar integralmente hombres y mujeres para los demás</a> a través de la docencia, la investigación, la difusión del conocimiento y la vinculación, capaces de contribuir a la construcción de una sociedad más <a href="" tooltip="Busca la referencia de este texto en Wikipedia" flow="right">justa</a>, democrática y sustentable. Se asume como una comunidad de personas en <a href="" tooltip="Hombres y mujeres para los demás" flow="down">permanente crecimiento</a>, heredera de la tradición educativa jesuita.
</p>

<a href="#" class="btn btn-primary btn-sm" tooltip="Yo soy el tooltip. ¡Hola!">Botón con tooltip</a>
<a href="#" class="btn btn-secondary btn-sm" tooltip="Yo soy el tooltip. ¡Hola!" flow="down">Botón con tooltip</a>

medios

01 bloque

Ejemplo de Uso
Titulo de Contenido

Información del bloque

  • Listado de contenido
  • Teléfono
  • Correo
Regresar al Principio 
<div class="content-block">
    <div class="grid">
        <div>
            <h5 class="content-title">Titulo de Contenido</h5>
            <p class="content-text">Información del bloque</p>
            <ul class="list-unstyled content-list">
                <li>Listado de contenido</li>
                <li>Teléfono</li>
                <li>Correo</li>
            </ul>
        </div>
    </div>
</div>

bloque con iconos

Ejemplo de Uso
Título de Contenido

Información del bloque

  • Listado de contenido
  • Teléfono
  • Correo
Regresar al Principio 
<div class="content-block">
    <div class="grid">
        <div><ion-icon class="content-icon" name="hammer-outline"></ion-icon></div>
        <div>
            <h5 class="content-title">Título de Contenido</h5>
            <p class="content-text">Información del bloque</p>
            <ul class="list-unstyled content-list">
                <li>Listado de contenido</li>
                <li>Teléfono</li>
                <li>Correo</li>
            </ul>
        </div>
    </div>
</div>

bloque con imagen

Ejemplo de Uso
Ibero-placeholder
Título de Contenido

Información del bloque

  • Listado de contenido
  • Teléfono
  • Correo
Ibero-placeholder
Título de Contenido

Información del bloque

  • Listado de contenido
  • Teléfono
  • Correo
Regresar al Principio 
<div class="content-block">
    <div class="grid">
        <div><img class="img-thumbnail" src="./assets/images/placeholder-1.jpg" alt="Ibero-placeholder"></div>
        <div>
            <h5 class="content-title">Título de Contenido</h5>
            <p class="content-text">Información del bloque</p>
            <ul class="list-unstyled content-list">
                <li>Listado de contenido</li>
                <li>Teléfono</li>
                <li>Correo</li>
            </ul>
        </div>
    </div>
</div>

<div class="content-block">
    <div class="grid">
        <div><img class="img-avatar" src="./assets/images/placeholder-1.jpg" alt="Ibero-placeholder"></div>
        <div>
            <h5 class="content-title">Título de Contenido</h5>
            <p class="content-text">Información del bloque</p>
            <ul class="list-unstyled content-list">
                <li>Listado de contenido</li>
                <li>Teléfono</li>
                <li>Correo</li>
            </ul>
        </div>
    </div>
</div>

tablas

tablas

04 componentes

navegación

acordeón animado

Ejemplo de Uso

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Elementum sagittis vitae et leo duis ut. Ut tortor pretium viverra suspendisse potenti.

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Elementum sagittis vitae et leo duis ut. Ut tortor pretium viverra suspendisse potenti.

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Elementum sagittis vitae et leo duis ut. Ut tortor pretium viverra suspendisse potenti.

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Elementum sagittis vitae et leo duis ut. Ut tortor pretium viverra suspendisse potenti.

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Elementum sagittis vitae et leo duis ut. Ut tortor pretium viverra suspendisse potenti.

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Elementum sagittis vitae et leo duis ut. Ut tortor pretium viverra suspendisse potenti.

Regresar al Principio 
<div class="accordion accordion-animated">
    <div class="accordion-item">
      <button id="accordion-button-1" aria-expanded="false"><span class="accordion-title">Primer Semestre</span><span class="icon" aria-hidden="true"></span></button>
      <div class="accordion-content">
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Elementum sagittis vitae et leo duis ut. Ut tortor pretium viverra suspendisse potenti.</p>
      </div>
    </div>
    <div class="accordion-item">
      <button id="accordion-button-2" aria-expanded="false"><span class="accordion-title">Segundo Semestre</span><span class="icon" aria-hidden="true"></span></button>
      <div class="accordion-content">
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Elementum sagittis vitae et leo duis ut. Ut tortor pretium viverra suspendisse potenti.</p>
      </div>
    </div>
    <div class="accordion-item">
      <button id="accordion-button-3" aria-expanded="false"><span class="accordion-title">Tercer Semestre</span><span class="icon" aria-hidden="true"></span></button>
      <div class="accordion-content">
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Elementum sagittis vitae et leo duis ut. Ut tortor pretium viverra suspendisse potenti.</p>
      </div>
    </div>
    <div class="accordion-item">
      <button id="accordion-button-4" aria-expanded="false"><span class="accordion-title">Cuarto Semestre</span><span class="icon" aria-hidden="true"></span></button>
      <div class="accordion-content">
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Elementum sagittis vitae et leo duis ut. Ut tortor pretium viverra suspendisse potenti.</p>
      </div>
    </div>
    <div class="accordion-item">
      <button id="accordion-button-5" aria-expanded="false"><span class="accordion-title">Quinto Semestre</span><span class="icon" aria-hidden="true"></span></button>
      <div class="accordion-content">
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Elementum sagittis vitae et leo duis ut. Ut tortor pretium viverra suspendisse potenti.</p>
      </div>
    </div>
    <div class="accordion-item">
        <button id="accordion-button-6" aria-expanded="false"><span class="accordion-title">Secto Semestre</span><span class="icon" aria-hidden="true"></span></button>
        <div class="accordion-content">
          <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Elementum sagittis vitae et leo duis ut. Ut tortor pretium viverra suspendisse potenti.</p>
        </div>
      </div>
  </div>

acordeón básico

Ejemplo de Uso

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Elementum sagittis vitae et leo duis ut. Ut tortor pretium viverra suspendisse potenti.

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Elementum sagittis vitae et leo duis ut. Ut tortor pretium viverra suspendisse potenti.

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Elementum sagittis vitae et leo duis ut. Ut tortor pretium viverra suspendisse potenti.

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Elementum sagittis vitae et leo duis ut. Ut tortor pretium viverra suspendisse potenti.

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Elementum sagittis vitae et leo duis ut. Ut tortor pretium viverra suspendisse potenti.

Regresar al Principio 
<div class="accordion">
    <div class="accordion-item">
      <button id="accordion-button-1" aria-expanded="false"><span class="accordion-title">Misión de la Institución</span><span class="icon" aria-hidden="true"></span></button>
      <div class="accordion-content">
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Elementum sagittis vitae et leo duis ut. Ut tortor pretium viverra suspendisse potenti.</p>
      </div>
    </div>
    <div class="accordion-item">
      <button id="accordion-button-2" aria-expanded="false"><span class="accordion-title">Visión de la compañía</span><span class="icon" aria-hidden="true"></span></button>
      <div class="accordion-content">
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Elementum sagittis vitae et leo duis ut. Ut tortor pretium viverra suspendisse potenti.</p>
      </div>
    </div>
    <div class="accordion-item">
      <button id="accordion-button-3" aria-expanded="false"><span class="accordion-title">¿Habrá algo más allá del UIAC?</span><span class="icon" aria-hidden="true"></span></button>
      <div class="accordion-content">
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Elementum sagittis vitae et leo duis ut. Ut tortor pretium viverra suspendisse potenti.</p>
      </div>
    </div>
    <div class="accordion-item">
      <button id="accordion-button-4" aria-expanded="false"><span class="accordion-title">¿Cuánto pesa el set de lego de Ibero?</span><span class="icon" aria-hidden="true"></span></button>
      <div class="accordion-content">
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Elementum sagittis vitae et leo duis ut. Ut tortor pretium viverra suspendisse potenti.</p>
      </div>
    </div>
    <div class="accordion-item">
      <button id="accordion-button-5" aria-expanded="false"><span class="accordion-title">¿Cómo vuelan los aviones?</span><span class="icon" aria-hidden="true"></span></button>
      <div class="accordion-content">
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Elementum sagittis vitae et leo duis ut. Ut tortor pretium viverra suspendisse potenti.</p>
      </div>
    </div>
  </div>

cabecera

Ejemplo de Uso
Regresar al Principio 
<nav class="main-nav">
    <div class="grid-noGutter-spaceBetween">
        <div class="col">
            <div class="nav-start">
                <ul class="list-inline mb-0">
                    <li><a href="" class="nav-link">Licenciaturas</a></li>
                    <li><a href="" class="nav-link">Posgrados</a></li>
                    <li><a href="" class="nav-link">Diplomados y Cursos</a></li>
                    <li><a href="" class="nav-link has-notification">Admisiones <span class="notification-ball bg-warning"></span></a></li>
                </ul>
            </div>
        </div>

        <div class="col text-end">
            <div class="nav-end">
                <ul class="list-inline mb-0">
                    <li><a href="" class="res-hidden nav-link">Estudiantes</a></li>
                    <li><a href="" class="res-hidden nav-link">Ex-Ibero</a></li>
                    <li><a href="" class="res-hidden nav-link">Intercambios</a></li>
                    <li><a href="" class="res-hidden nav-link">Radio Ibero</a></li>
                    <li><a href="" class="res-hidden nav-link has-notification">Noticias y Eventos <span class="notification-ball bg-primary"></span></a></li>
                    
                    <!--
                    <li class="res-show has-menu-card">
                        <a class="nav-link has-notification" href="javascript:void(0)">
                            + <ion-icon name="apps-outline"></ion-icon>
                            <span class="notification-ball"></span>
                        </a>
    
                        <div class="menu-card">
                            
                        </div>
                    </li>
                    -->
                </ul>
            </div>
        </div>
    </div>
</nav>

<nav class="main-nav">
    <div class="grid-spaceBetween">
        <div class="col">
            <div class="nav-start">
                <ul class="list-inline">
                    <li><a href="" class="nav-link">Licenciaturas</a></li>
                    <li><a href="" class="nav-link">Posgrados</a></li>
                    <li><a href="" class="nav-link">Diplomados y Cursos</a></li>
                    <li><a href="" class="nav-link has-notification">Admisiones <span class="notification-ball bg-warning"></span></a></li>
                </ul>
            </div>
        </div>

        <div class="col text-end">
            <div class="nav-end">
                <ul class="list-inline">
                    <li class="has-menu-card">
                        <a class="nav-link has-notification" href="javascript:void(0)">
                            + <ion-icon name="apps-outline"></ion-icon>
                            <span class="notification-ball bg-warning"></span>
                        </a>
    
                        <div class="menu-card open-right">
                            <h6>Opciones Adicionales</h6>
                            <ul class="list-unstyled">
                                <li><a href="" class="nav-link">Estudiantes</a></li>
                                <li><a href="" class="nav-link">Ex-Ibero</a></li>
                                <li><a href="" class="nav-link">Intercambios</a></li>
                                <li><a href="" class="nav-link">Radio Ibero</a></li>
                                <li><a href="" class="nav-link has-notification">Noticias y Eventos <span class="notification-ball bg-primary"></span></a></li>
                            </ul>
                        </div>
                    </li>
                </ul>
            </div>
        </div>
    </div>
</nav>

lateral

Ejemplo de Uso
Regresar al Principio 
<nav class="aside-nav">
    <h1 class="logo hide-text">Universidad Iberoamericana León</h1>
    <div class="aside-nav-body">
        <ul class="list-unstyled aside-nav-list quick-actions">
            <li><a class="aside-nav-link" tooltip="Acceso al Portal" flow="right" tooltip-color="uia-info" href=""><ion-icon name="log-in-outline"></ion-icon></a></li>
            <li><a class="aside-nav-link" tooltip="Correo Institucional" flow="right" tooltip-color="uia-info" href=""><ion-icon name="mail-outline"></ion-icon></a></li>
            <li><a class="aside-nav-link" tooltip="Cursos en Línea" flow="right" tooltip-color="uia-info" href=""><ion-icon name="extension-puzzle-outline"></ion-icon></a></li>
            <li><a class="aside-nav-link" tooltip="Ibero Virtual" flow="right" tooltip-color="uia-info" href=""><ion-icon name="planet-outline"></ion-icon></a></li>
           <!-- <li><a class="aside-nav-link" tooltip="Búsqueda General" flow="right" tooltip-color="uia-info" href=""><ion-icon name="search-outline"></ion-icon></a></li> -->
        </ul>

        <ul class="list-unstyled aside-nav-list social-links">
            <li><a target="_blank" class="aside-nav-link" href="https://www.facebook.com/iberoleon"><ion-icon name="logo-facebook"></ion-icon></a></li>
            <li><a target="_blank" class="aside-nav-link" href="https://www.instagram.com/ibero_leon/"><ion-icon name="logo-instagram"></ion-icon></a></li>
	    <li><a target="_blank" class="aside-nav-link" href="https://youtube.com/playlist?list=PLKYvkUqwXHIZgBpENNQRazfwjB6rXNBNE"><ion-icon name="logo-youtube"></ion-icon></a></li>
            <li><a target="_blank" class="aside-nav-link" href="https://www.twitter.com/iberoleon"><ion-icon name="logo-twitter"></ion-icon></a></li>
        </ul>
    </div>
</nav>

migajas de pan

Ejemplo de Uso

Bienvenido a esta sección, un título con migajas de pan.

Regresar al Principio 
<ul class="breadcrumb">
    <li><a href="#">Departamento</a></li>
    <li><a href="#">Arquitectura y Diseño</a></li>
    <li class="active">Diseño Digital Interactivo</li>
</ul>

<hr>

<ul class="breadcrumb">
    <li><a href="#">Departamento</a></li>
    <li><a href="#">Arquitectura y Diseño</a></li>
    <li class="active">Diseño Digital Interactivo</li>
</ul>

<h4>Bienvenido a esta sección, un título con migajas de pan.</h4>

navegación circular

Ejemplo de Uso
Regresar al Principio 
<nav class="circular-menu">
    <input type="checkbox" href="#" class="circular-menu-open" name="circular-menu-open" id="circular-menu-open" />
    <label class="circular-menu-open-button" for="circular-menu-open">
      <span class="hamburger hamburger-1"></span>
      <span class="hamburger hamburger-2"></span>
      <span class="hamburger hamburger-3"></span>
    </label>
    
    <a class="circular-menu-item" href="#"><ion-icon name="log-in-outline"></ion-icon></a>
    <a class="circular-menu-item" href="#"><ion-icon name="mail-outline"></ion-icon></a>
    <a class="circular-menu-item" href="#"><ion-icon name="extension-puzzle-outline"></ion-icon></a>
    <a class="circular-menu-item" href="#"><ion-icon name="planet-outline"></ion-icon></a>
    <!-- <a class="circular-menu-item" href="#"><ion-icon name="search-outline"></ion-icon></a> -->

    <!--
    <a href="#" class="circular-menu-item" title="Facebook">
      <i class="fa fa-facebook"></i>
    </a>
    <a href="#" class="circular-menu-item" title="Price">
      <i class="fa fa-twitter"></i>
    </a>
    <a href="#" class="circular-menu-item" title="About">
      <i class="fa fa-envelope"></i>
    </a>
    -->
</nav>
  
<!-- filters -->
<svg xmlns="http://www.w3.org/2000/svg" version="1.1">
<defs>
    <filter id="shadowed-goo">
    <feGaussianBlur in="SourceGraphic" result="blur" stdDeviation="10" />
    <feColorMatrix in="blur" mode="matrix" values="1 0 0 0 0  0 1 0 0 0  0 0 1 0 0  0 0 0 18 -7" result="goo" />
    <feGaussianBlur in="goo" stdDeviation="3" result="shadow" />
    <feColorMatrix in="shadow" mode="matrix" values="0 0 0 0 0  0 0 0 0 0  0 0 0 0 0  0 0 0 1 -0.2" result="shadow" />
    <feOffset in="shadow" dx="1" dy="1" result="shadow" />
    <feBlend in2="shadow" in="goo" result="goo" />
    <feBlend in2="goo" in="SourceGraphic" result="mix" />
    </filter>
    <filter id="goo">
    <feGaussianBlur in="SourceGraphic" result="blur" stdDeviation="10" />
    <feColorMatrix in="blur" mode="matrix" values="1 0 0 0 0  0 1 0 0 0  0 0 1 0 0  0 0 0 18 -7" result="goo" />
    <feBlend in2="goo" in="SourceGraphic" result="mix" />
    </filter>
</defs>
</svg>

paginación

Ejemplo de Uso
Regresar al Principio 
<nav>
    <ul class="pagination">
      <li class="page-item">
        <a class="page-link" href="#" aria-label="Previous">
          <span aria-hidden="true">&laquo;</span>
        </a>
      </li>
      <li class="page-item"><a class="page-link" href="#">1</a></li>
      <li class="page-item"><a class="page-link" href="#">2</a></li>
      <li class="page-item"><a class="page-link" href="#">3</a></li>
      <li class="page-item">
        <a class="page-link" href="#" aria-label="Next">
          <span aria-hidden="true">&raquo;</span>
        </a>
      </li>
    </ul>
</nav>

pestañas

Ejemplo de Uso
  • Lorem ipsum dolor sit amet, consectetur adipisicing elit. Id debitis aspernatur voluptatum repellat nisi animi, harum excepturi provident, reprehenderit reiciendis veritatis, voluptate cum qui laudantium repudiandae, facere quas eius asperiores!
  • Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nemo reprehenderit saepe assumenda, quasi suscipit. Minus aut dicta autem, totam excepturi qui officiis harum, modi corporis iure! Voluptates, veniam. Totam, facilis.
  • Lorem ipsum dolor sit amet, consectetur adipisicing elit. Tempore fugit placeat voluptates ad et blanditiis nisi quia nostrum error! Atque facilis laboriosam eius vel laborum ullam error nobis asperiores laudantium.
Regresar al Principio 
<div class="tabs">
	<ul class="tabs-thumbs">
		<li class="tabs-thumb"><a>Tab 1</a></li>
		<li class="tabs-thumb"><a>Tab 2</a></li>
		<li class="tabs-thumb"><a>Tab 3</a></li>
	</ul>
	<ul class="tabs-panels">
		<li class="tabs-panel">
			Lorem ipsum dolor sit amet, consectetur adipisicing elit. Id debitis aspernatur voluptatum repellat nisi animi, harum excepturi provident, reprehenderit reiciendis veritatis, voluptate cum qui laudantium repudiandae, facere quas eius asperiores!
		</li>
		<li class="tabs-panel">
			Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nemo reprehenderit saepe assumenda, quasi suscipit. Minus aut dicta autem, totam excepturi qui officiis harum, modi corporis iure! Voluptates, veniam. Totam, facilis.
		</li>
		<li class="tabs-panel">
			Lorem ipsum dolor sit amet, consectetur adipisicing elit. Tempore fugit placeat voluptates ad et blanditiis nisi quia nostrum error! Atque facilis laboriosam eius vel laborum ullam error nobis asperiores laudantium.
		</li>
	</ul>
</div>

pie de página

Ejemplo de Uso
AUSJAL
SUJ
FIMPES
Escudo Ignaciano
Regresar al Principio 
<footer>
    <div class="container">
        <div class="grid">
            <div class="col-4">
                <h1 class="logo logo-main hide-text">Universidad Iberoamericana León</h1>
            </div>
            <div class="col-8">
                <div class="grid">
                    <div class="col-3">
                        <ul class="list-unstyled">
                            <li class="list-title">Servicios</li>
                            <li><a href="#">Becas y Financiamiento</a></li>
                            <li><a href="#">Despacho Jurídico</a></li>
                            <li><a href="#">CESCOM</a></li>
                            <li><a href="#">Procuraduría de Derechos Universitarios</a></li>
                            <li><a href="#">Misas</a></li>
                            <li><a href="#">Dirección de Finanzas</a></li>
                            <li><a href="#">Biblioteca</a></li>
                            <li><a href="#">Deportes</a></li>
                            <li><a href="#">Librería</a></li>
                            <li><a href="#">Idiomas</a></li>
                            <li><a href="#">Talleres Artísticos</a></li>
                        </ul>
                    </div>
                    <div class="col-3">
                        <ul class="list-unstyled">
                            <li class="list-title">Centros</li>
                            <li><a href="#">Formación Humanista</a></li>
                            <li><a href="#">Formación de Acción Social</a></li>
                            <li><a href="#">Cultura</a></li>
                            <li><a href="#">Ignaciano de Desarrollo Estudiantil</a></li>
                        </ul>
                    </div>
                    <div class="col-3">
                        <ul class="list-unstyled">
                            <li class="list-title">Departamentos</li>
                            <li><a href="#">Arquitectura y Diseño</a></li>
                            <li><a href="#">Económico Administrativo</a></li>
                            <li><a href="#">Ingeniería</a></li>
                            <li><a href="#">Ciencias Sociales y Humanidades</a></li>
                        </ul>
                    </div>
                    <div class="col-3">
                        <ul class="list-unstyled">
                            <li class="list-title">Vinculación</li>
                            <li><a href="#">Bolsa de Trabajo</a></li>
                            <li><a href="#">Puerto Interior G100</a></li>
                            <li><a href="#">Prácticas Profesionales</a></li>
                            <li><a href="#">Parque Ibero Innovación</a></li>
                        </ul>
                    </div>
                </div>
            </div>
        </div>

        <div class="grid-bottom legal-info">
            <div class="col-4">
                <p class="mb-0 small pe-5">Promoción de la cultura y la educación superior del Bajío.</p>
                <p class="small pe-5 mb-0">2022 - Todos los derechos reservados</p>
            </div>
            <div class="col-8">
                <div class="grid-spaceBetween">
                    <div class="col pb-0">
                        <ul class="list-inline mb-0">
                            <li><a href="#" class="text-link small">Aviso de Privacidad</a></li>
                            <li><a href="#" class="text-link small">Términos y Condiciones</a></li>
                            <li><a href="#" class="text-link small">Uso de Cookies</a></li>
                        </ul>
                    </div>
                    <div class="col pb-0 text-end">
                        <ul class="list-inline mb-0">
                            <li><a href="#" class="text-link small">Vacantes</a></li>
                            <li><a href="#" class="text-link small">Contacto</a></li>
                        </ul>
                    </div>
                </div>
            </div>
        </div>
    </div>
</footer>
<div class="post-footer">
    <div class="container">
        <div class="grid-center">
            <div class="col-2">
                <img src="./assets/images/logo-ausjal.png" alt="AUSJAL">
            </div>
            <div class="col-2">
                <img src="./assets/images/logo-sistema-universitario-jesuita.png" alt="SUJ">
            </div>
            <!--<div class="col-2">
                <img src="./assets/images/logo-excelencia.png" alt="Ibero León">
            </div>
		-->
            <div class="col-2">
                <img src="./assets/images/logo-fimpes.png" alt="FIMPES">
            </div>
            <div class="col-2">
                <img src="./assets/images/logo-lux.png" alt="Escudo Ignaciano">
            </div>
            
        </div>
    </div>
</div>

retroalimentación

alertas

Ejemplo de Uso
¡Falta Información! Lorem ipsum dolor sit amet, consectetur adipisicing elit.
¡Problemas! Numquam quos fuga quam suscipit sapiente perferendis magnam.
Este es un mensaje largo que tendrá que truncarse. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Totam officiis dolorum voluptatibus maxime molestiae iste.
Consequatur facere deleniti cumque ducimus maiores nemo.
Regresar al Principio 
<div class="alert bg-warning">
    <strong><ion-icon name="alert-circle-outline"></ion-icon> ¡Falta Información!</strong> Lorem ipsum dolor sit amet, consectetur adipisicing elit.
</div>

<div class="alert bg-danger">
    <strong><ion-icon name="bug-outline"></ion-icon> ¡Problemas!</strong> Numquam quos fuga quam suscipit sapiente perferendis magnam.
</div>

<div class="alert bg-success">
    <ion-icon name="happy-outline"></ion-icon> Este es un mensaje largo que tendrá que truncarse. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Totam officiis dolorum voluptatibus maxime molestiae iste.
</div>

<div class="alert bg-info">
    Consequatur facere deleniti cumque ducimus maiores nemo.
</div>

alertas con complementos

Ejemplo de Uso
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Visitar sitio
¡Aviso! No te pierdas las actividades del jubileo de la conversión de San Ignacio de Loyola. Visitar sitio
Regresar al Principio 
<div class="alert bg-info">
    Lorem ipsum dolor sit amet, consectetur adipisicing elit. <a href="" class="btn btn-outline-dark text-uppercase btn-sm">Visitar sitio <ion-icon name="open-outline"></ion-icon></a>
</div>

<div class="alert bg-grey">
    <img src="./assets/images/logo_ignatius.png" alt="">
    <strong>¡Aviso!</strong> 
    No te pierdas las actividades del jubileo de la conversión de San Ignacio de Loyola.
    <a href="" class="btn btn-outline-light btn-sm">Visitar sitio <ion-icon name="open-outline"></ion-icon></a>
</div>

insignias

Ejemplo de Uso
Reconocimiento Oficial Apertura: Enero y Agosto 2022 Apertura: Enero y Agosto 2022 Apertura: Enero y Agosto 2022 Acceso al Portal +99 100 -10
Regresar al Principio 
<span class="badge bg-yellow">Reconocimiento Oficial</span>
<span class="badge bg-info">Apertura: Enero y Agosto 2022</span>
<span class="badge bg-success">Apertura: Enero y Agosto 2022</span>
<span class="badge bg-warning">Apertura: Enero y Agosto 2022</span>

<span class="badge bg-primary text-uppercase">Acceso al Portal</span>
<span class="badge badge-sm bg-secondary">+99</span>
<span class="badge badge-sm bg-white">100</span>
<span class="badge badge-sm bg-black">-10</span>

insignias con icono

Ejemplo de Uso
20 Favoritos +30º Completado Atención
Regresar al Principio 
<span class="badge bg-yellow"><ion-icon name="bookmarks-outline"></ion-icon> 20</span>
<span class="badge bg-primary"><ion-icon name="heart-outline"></ion-icon> Favoritos</span>
<span class="badge bg-info"><ion-icon name="sunny-outline"></ion-icon> +30º</span>
<span class="badge bg-success"><ion-icon name="checkmark-circle-outline"></ion-icon> Completado</span>
<span class="badge bg-warning"><ion-icon name="alert-circle-outline"></ion-icon> Atención</span>

notificaciones

sugerencias

tarjetas

básica

Ejemplo de Uso
Título de tarjeta
Subtítulo de tarjeta

Un texto explicativo rápido para dar contexto a la información de este elemento.

Link inicial Otro link
Regresar al Principio 
<div class="card" style="width: 18rem;">
    <div class="card-body">
      <h5 class="content-title">Título de tarjeta</h5>
      <h6 class="content-subtitle mb-2 text-muted">Subtítulo de tarjeta</h6>
      <p class="content-text">Un texto explicativo rápido para dar contexto a la información de este elemento.</p>
      <a href="#" class="card-link">Link inicial</a>
      <a href="#" class="card-link">Otro link</a>
    </div>
  </div>

estilos de tarjetas

tarjeta con imagen

Ejemplo de Uso
Placeholder Ibero
Título de tarjeta

Un texto explicativo rápido para dar contexto a la información de este elemento.

Visita sección
Regresar al Principio 
<div class="card" style="width: 18rem;">
    <img src="./assets/images/placeholder-1.jpg" class="card-img-top" alt="Placeholder Ibero">
    <div class="card-body">
        <h5 class="content-title">Título de tarjeta</h5>
        <p class="content-text">Un texto explicativo rápido para dar contexto a la información de este elemento.</p>
        <a href="#" class="btn btn-primary">Visita sección</a>
    </div>
  </div>

tarjeta horizontal

Ejemplo de Uso
placeholder Ibero
Título de tarjeta

Un texto explicativo rápido para dar contexto a la información de este elemento.

Publicado hace 10min

Regresar al Principio 
<div class="card mb-3" style="max-width: 540px;">
    <div class="grid g-0">
      <div class="col-4">
        <img src="./assets/images/placeholder-1.jpg" class="img-fluid rounded-start" alt="placeholder Ibero">
      </div>
      <div class="col-8">
        <div class="card-body">
            <h5 class="content-title">Título de tarjeta</h5>
            <p class="content-text">Un texto explicativo rápido para dar contexto a la información de este elemento.</p>
          <p class="card-text"><small class="text-muted">Publicado hace 10min</small></p>
        </div>
      </div>
    </div>
  </div>

05 plantillas

datos

contadores

mapas

estados nulos

modales

diálogos

pop ups

Versionado

v. 1.0.0

Junio 2022

Equipo

  • Jorge Peña
  • Raymundo Cobos
  • Noé Hassiel
  • Maria Teresa Santacruz
  • Itzell Elizondo
  • Mariam González

Mantenedores

  • Jorge Peña
  • Noé Hassiel