Inicio

Para comenzar a usar el Kit de interfaz de usuario, deberá importar algunos archivos en su proyecto actual o comenzar desde cero utilizando nuestra plantilla (desplácese hacia abajo en esta página para verlo).

Codigo CSS

Copie y pegue la hoja de estilo en su antes de todas las otras hojas de estilo para cargar nuestro CSS.

                    
                      <link rel="stylesheet" href="https://cdn.cofrem.net/assets/styles.css" crossorigin="anonymous">
                    
                  

Iconos

Click, visualiza el popup, Copia/pegue la clase y usela en un tag i
  • Accesibilidad
  • Buscar
  • Lenguaje
  • Afiliaciones
  • Subsidios
  • Cultura
  • Crédito
  • Programas
  • Educación
  • Recreación
  • Turismo
  • Servicio de empleo
  • Centros de Servicio
  • Pagos en Linea
  • Afiliaciones
  • Subsidios
  • Cultura
  • Crédito
  • Programas
  • Educación
  • Recreación
  • Turismo
  • Servicio de empleo
  • Centros de Servicio
  • Pagos en Linea
  • Botones

    Use los estilos de botones personalizados para acciones en formularios, cuadros de diálogo y más con soporte para múltiples tamaños, estados y más.

    Botón menú header Izquierdo

    Opción x

    Copie y pegue el siguiente codigo fuente en donde desea utilizarlo

                  
                    <div class="btn-header-left">
                       <p>Opcion x</p>
                       <span><i class="fas fa-chevrown-down"></i></span>
                    </div>
                  
                

    Botón menú header Derecho

    Opción x

    Copie y pegue el siguiente codigo fuente en donde desea utilizarlo

                  
                    <div class="btn-header-right">
                       <span><i class="fas fa-eye"></i></span>
                       <p>Opcion x</p>
                    </div>
                  
                

    Botón menú principal Expandido

    opción 1

    Copie y pegue el siguiente codigo fuente en donde desea utilizarlo

                  
                    <div class="btn-principal-expand">
                       <span><i class="far fa-check-circle"></i></span>
                       <p>Opcion 1</p>
                    </div>
                  
                

    Botón menú principal Colapsado

    Copie y pegue el siguiente codigo fuente en donde desea utilizarlo

                  
                    <div class="btn-principal-colapsed">
                       <span><i class="far fa-check-circle"></i></span>
                    </div>
                  
                

    Botón avance

    Copie y pegue el siguiente codigo fuente en donde desea utilizar el boton anterior

                  
                    <div class="btn-avance">
                       <span><i class="fas fa-chevron-left"></i></span>
                    </div>
                  
                

    Copie y pegue el siguiente codigo fuente en donde desea utilizar el boton siguiente

                  
                    <div class="btn-avance">
                       <span><i class="fas fa-chevron-right"></i></span>
                    </div>
                  
                

    Botón submenú

    Más

    Copie y pegue el siguiente codigo fuente en donde desea utilizarlo

                  
                    <div class="btn-submenu-section">
                       <p>Más</p>
                       <span><i class="fas fa-chevron-right"></i></span>
                    </div>
                  
                

    Botón submenú link

    Copie y pegue el siguiente codigo fuente en donde desea utilizarlo

                  
                    <div class="btn-submenu-link">
                       <p>Aplique ya</p>
                       <span><i class="fas fa-chevron-right"></i></span>
                    </div>
                  
                

    Botón pagina interna menú

    opción 1

    Copie y pegue el siguiente codigo fuente en donde desea utilizarlo

                  
                    <div class="btn-intern-menu">
                       <p>opción 1</p>
                    </div>
                  
                

    Botón acción primaria Verde

    Contáctenos

    Copie y pegue el siguiente codigo fuente en donde desea utilizarlo

                  
                    <div class="btn-primary-green">
                       <p>Contáctenos</p>
                    </div>
                  
                

    Botón acción primaria Azul

    Reserva en Línea

    Copie y pegue el siguiente codigo fuente en donde desea utilizarlo

                
                  <div class="btn-primary-blue">
                     <p>Reserva en Línea</p>
                  </div>
                
              

    Botón acción secundaria

    Inscríbase

    Copie y pegue el siguiente codigo fuente en donde desea utilizarlo

                  
                    <div class="btn-secondary-action">
                       <p>Inscríbase</p>
                       <span><i class="fas fa-chevron-right"></i></span>
                    </div>
                  
                

    Link

    Copie y pegue el siguiente codigo fuente en donde desea utilizarlo

                  
                    <div class="btn-link-action">
                       <p> Consulte las tarifas</p>
                       <span><i class="fas fa-chevron-right"></i></span>
                    </div>
                  
                

    Menú (para mostrar)

    Opción 1

    Copie y pegue el siguiente codigo fuente en donde desea utilizarlo

                    
                      <div class="btn-menu-show">
                         <span><i class="far fa-clock"></i></span>
                         <p> Opción 1 </p>
                      </div>
                    
                  

    breadcrumb

    Copie y pegue el siguiente codigo fuente en donde desea utilizarlo

                  
                    <div class="breadcrumb">
                       <p> Inicio </p>
                       <span> / </span>
                    </div>
                  
                

    Botón Servicios en Linea Mobile

    Copie y pegue el siguiente codigo fuente en donde desea utilizarlo

                  
                    <button class="btn-mobile-servicios-en-linea">
                        <i class="fas fa-share-alt"></i></span> Servicios En Linea </span>
                    </button>
                  
                

    Cards

    Use los estilos de cards personalizados

    Contenedor Cards

    Copie y pegue el siguiente codigo fuente en donde desea utilizarlo

                  
                    <div class="container-card">
                       <div class="card">
                        <figure>
                         <img src="">
                        </figure>
                        <div class="contendi-card">
                         <h2>Lorem Ipsumo</h2>
                         <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore lla</p>
                         <div class="btn-submenu-section">
                          <p>Más</p>
                          <span><i class="fas fa-chevron-right"></i></span>
                         </div>                
                         <div class="btn-submenu-link">
                          <p>Aplique ya</p>
                          <span><i class="fas fa-chevron-right"></i></span>
                         </div>
                        </div>
                       </div">
                    </div>
                  
                

    Lorem Ipsumo

    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore lla.

    Más

    ...

    Slides

    Para comenzar a usar el Kit de interfaz de usuario, deberá importar algunos archivos en su proyecto actual o comenzar desde cero utilizando nuestra plantilla (desplácese hacia abajo en esta página para verlo).

    Slide Info



    Codigo CSS

    Copie y pegue la hoja de estilo en su antes de todas las otras hojas de estilo para cargar nuestro CSS.


    Considere que en el siguiente codigo solo se encuentra un slide, debe copiar y pegar las veces que el slide con la clase carousel-item se vaya a repetir

                  
                    <div id="carouselExampleDark" class="carousel carousel-dark slide" data-bs-ride="carousel">
                      <div> class="carousel-indicators">
                        <button type="button" data-bs-target="#carouselExampleDark" data-bs-slide-to="0" class="active" aria-current="true" aria-label="Slide 1"></button>
                        <button type="button" data-bs-target="#carouselExampleDark" data-bs-slide-to="1" aria-label="Slide 2"></button>
                        <button type="button" data-bs-target="#carouselExampleDark" data-bs-slide-to="2" aria-label="Slide 3"></button>
                      </div>
        
                        <div class="carousel-item active" data-bs-interval="10000">
                          <div class="content-carousel-item">
                            <div class="carousel-caption d-none d-md-block">
                              <h1>Ejemplo N</h1>
                              <p>Este espacio de texto es para la información sobre este evento. Una o dos frases que describan el evento</p>
                              <br>
                              <div class="btn-secondary-action">
                                <p>Inscríbase</p>
                                <span><i class="fas fa-chevron-right"></i></span> 
                                </div>
                              </div>
                            <img src="URL DE LA IMAGEN QUE VA AQUI" class="img-slide d-block" alt="...">
                            </div>
                          </div>
                        </div>
        
                      <button class="carousel-control-prev" type="button" data-bs-target="#carouselExampleDark" data-bs-slide="prev">
                      <div class="btn-avance">
                        <span ><i class="fas fa-chevron-left"></i></span >
                            </div >
                       <span class="visually-hidden">Previous</span >
                          <button >
                      <button class="carousel-control-next" type="button" data-bs-target="#carouselExampleDark" data-bs-slide="next">
                      <div class="btn-avance" >
                        <span > <i class="fas fa-chevron-right" > </i > </span >
                          </div >
                       <span class="visually-hidden" > Next</span >
                        </button >
                      </div >