Componentes CDN - GOV.CO

Quick start

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).

CSS

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

                    	
                        <link href="https://cdn.www.gov.co/assets/css/styles.css" rel="stylesheet">
                    
							

Alertas

Proporcione mensajes de comentarios contextuales para acciones típicas de los usuarios con el puñado de mensajes de alerta disponibles y flexibles.

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.

Botones Simbólicos

Lorem ipsum dolor sit amet consectetur adipisicing elit. Ex incidunt architecto animi sequi rem deleniti, voluptate necessitatibus ipsum, doloribus officiis illum molestiae et quos porro harum laudantium quaerat natus iste!

                 
	<div class="p-2">
	  <a href="/" class="btn-symbolic-govco d-flex flex-column">
	   <div class=govco-icon govco-icon-home-n"></div>
	   <div class="btn-symbolic-govco__title">Home</div>
	  </a>
	</div>
	<div class="p-2">
	  <a href="/" class="btn-symbolic-govco d-flex">
	   <div class="govco-icon govco-icon-home-n"></div>
	   <div class="btn-symbolic-govco__title btn-symbolic-govco__title--right">Home</div>
	  </a>
	</div>
	<div class="p-2">
	  <a href="/" class="btn-symbolic-govco inactive d-flex">
	   <div class="govco-icon govco-icon-home-n order-1"></div>
	   <div class="btn-symbolic-govco__title btn-symbolic-govco__title--left">Home</div>
	  </a>
	</div>
                
              

Botones textuales

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quaerat quos expedita quo non, totam quia quas consectetur deleniti rem deserunt. Animi rerum placeat, voluptas quis provident dolor adipisci quibusdam ipsam.

                 
	<div class="p-2">
	  <a href="/" class="btn btn-round btn-high">Botón</a>
	</div>
	<div class="p-2">
	  <a href="/" class="btn btn-round btn-middle">Botón</a>
	</div>
	<div class="p-2">
	  <a href="/" class="btn-low">Botón</a>
	</div>
                
              

Botones mixtos

Lorem ipsum dolor sit, amet consectetur adipisicing elit. Reiciendis illo quod hic, libero omnis quas nihil ad esse sapiente, eveniet veritatis nemo, architecto quo molestiae impedit quibusdam rerum voluptates error?

                 
	<!-- Botones-->
	<div class="row pl-3">
	  <div class="p-2">
	   <button type="button" class="btn btn-round btn-high-mix-govco area-servicio-item">           
	     <span class="btn-mix-govco__icon govco-icon govco-icon-right-arrow-cn icon-reverse-x text-white"></span>	
	     <span class="btn-mix-govco__title--right text-white">Búsqueda general</span>
	   </button>
	  </div>
	  <div class="p-2">
	   <button type="button" class="btn btn-round btn-high-mix-govco area-servicio-item">           
	     <span class="btn-mix-govco__icon govco-icon govco-icon-right-arrow-cn text-white"></span>	
	     <span class="btn-mix-govco__title--left text-white">Búsqueda general</span>
	   </button>
	  </div>
	</div>	
	
	<!-- Links -->	
	<div class="row pl-3">
	  <div class="p-2 pr-3">
	    <a href="#" class="btn-low-mix-govco d-flex">
	     <div class="btn-symbolic-govco__icon btn-mix-govco__icon--arrow-right order-2 m-auto"></div>
	     <div class="order-1 pr-5 h-20">Botón link icon Right</div>
	    </a>
	  </div>
	  <div class="p-2">
	   <a href="/" class="d-flex flex-column btn-low-mix-govco">
	     <div class="bd-highlight m-auto">Botón link icon Down
	      <div class="btn-mix-govco__icon--down btn-mix-govco__icon--arrow-down bd-highlight m-auto"></div>
	     </div>
	   </a>
	  </div>
	</div>
                
              

Botones de información y agregado

Lorem ipsum dolor sit amet consectetur, adipisicing elit. Hic est minima repellat vitae aut! Nihil neque dicta nostrum exercitationem harum necessitatibus adipisci velit esse iure quas! Quae deleniti veniam officia.

                 
	  <a href="/" class="btn-information"></a>
	  <a href="/" class="btn-aggregate"></a>
                
              

Boton de Volver Arriba

              	
    <div class="div-start-up">
      <button class="btn-up-hover">
        <a href="#"class="a-start-up">
          <svg class="btn-svg-up-hover" xmlns="http://www.w3.org/2000/svg"width="44"height"44"viewBox="0 0 48.422 48.422">      
            <path id="Trazado_3123"data-name="Trazado_3123"d="M34.581,0H13.841A13.857,13.857,0,0,0,0,13.841V34.581A13.857,13.857,0,0,0,13.841,48.422H34.581A13.857,13.857,0,0,0,48.422,34.581V13.841A13.857,13.857,0,0,0,34.581,0ZM37.7,20.533l-12,12,0,0a2.2,2.2,0,0,1-3.116,0l-12-12a2.206,2.206,0,0,1,0-3.119l0,0a2.206,2.206,0,0,1,3.12,0L22.581,26.3l0,0a2.2,2.2,0,0,0,3.116,0l8.885-8.882,0,0a2.2,2.2,0,0,1,3.112,0l.007.007A2.2,2.2,0,0,1,37.7,20.533Z"/>
          </svg>
        Volver a arriba</a>
      </button>
    </div>
              
            

Campos de texto - Input

Use los estilos para los input personalizados

Default

Lorem ipsum dolor sit amet consectetur adipisicing elit. Eligendi animi eaque reprehenderit, labore culpa veniam, non nulla in at voluptate cupiditate, deserunt fuga eos eius ab earum! Iste, quae inventore!

                       
	  <div class="form-group">
	   <input type="email" class="form-control input-govco" placeholder="Input normal">
	  </div>
                       	
                    

Desactivado

Lorem ipsum dolor sit amet consectetur adipisicing elit. Eligendi animi eaque reprehenderit, labore culpa veniam, non nulla in at voluptate cupiditate, deserunt fuga eos eius ab earum! Iste, quae inventore!

                       
	 <div class="form-group">
	  <input class="form-control input-govco" type="text" placeholder="Input desactivado..." disabled>
	 </div>
                       
                    

Error

Lorem ipsum dolor sit amet consectetur adipisicing elit. Eligendi animi eaque reprehenderit, labore culpa veniam, non nulla in at voluptate cupiditate, deserunt fuga eos eius ab earum! Iste, quae inventore!

Este es el mensaje de error.
                       
	<div class="form-group">
	 <input type="text" class="form-control input-govco is-invalid" id="errorInput" placeholder="Input error" required>
	 <div class="invalid-feedback">
	  Este es el mensaje de error.
	 </div>
	</div>
                      
                    

Valido

Lorem ipsum dolor sit amet consectetur adipisicing elit. Eligendi animi eaque reprehenderit, labore culpa veniam, non nulla in at voluptate cupiditate, deserunt fuga eos eius ab earum! Iste, quae inventore!

Este es el mensaje correcto.
                     
	<div class="form-group">
	 <input type="text" class="form-control input-govco is-valid" id="inputValido" placeholder="Input valido" required>
	 <div class="valid-feedback">
	  Este es el mensaje correcto.
	 </div>
	</div>
                    
                  

Contador de caracteres

Lorem ipsum dolor sit amet consectetur adipisicing elit. Eligendi animi eaque reprehenderit, labore culpa veniam, non nulla in at voluptate cupiditate, deserunt fuga eos eius ab earum! Iste, quae inventore!

20
                         
      <div class="form-group">
       <input type="email" class="form-control input-govco" placeholder="Input normal">
      </div>
                         
                      

Carrousel

Checkbox

Use los estilos de checkbox personalizados


                      
      <!--Checkbox sin label-->
      <div class="checkbox-govco">
        <input type="checkbox" id="check1" />
        <label class="label-checkbox m-auto" for="check1">
            <div class="chk"></div>
        </label>
      </div>
    
      <!--Activo-->
      <div id="checkbox-active">
        <label class="chk-govco">
          <input type="checkbox" checked="checked" id="checkbox_1"/>
          <label for="checkbox_1">
          First checkbox
          </label>
          <div class="chk-govco__indicator"></div>
        </label>
      </div>
      
      <!--Desactivado-->
      <div id="checkbox-disabled">
        <label class="chk-govco">
          <input type="checkbox" disabled="disabled"/>
          <label> 
          Disabled
          </label>
          <div class="chk-govco__indicator"></div>
        </label>
      </div>
      
      <!--Check Desactivado-->
      <div id="checkbox-check-disabled">
        <label class="chk-govco">
          <input type="checkbox" disabled="disabled" checked="checked"/>
          <label>
        Disabled & checked 
          </label>
          <div class="chk-govco__indicator"></div>
        </label>
      </div>
              
            

Desplegables

Lorem ipsum dolor sit amet consectetur adipisicing elit. Et cupiditate, sequi voluptatem odit pariatur quod maxime fuga. Aperiam recusandae molestiae tenetur dolores, molestias vel sequi repellat excepturi delectus dignissimos? Itaque!

                 
	 <script src="https://cdn.jsdelivr.net/npm/bootstrap-select@1.13.10/dist/js/bootstrap-select.min.js"></script>
                
              

Default

Lorem ipsum dolor sit, amet consectetur adipisicing elit. Suscipit consectetur iure, esse provident, aliquam officia unde voluptatem quis cum porro inventore? Delectus quis tenetur fugiat. Iusto ad dignissimos voluptatum harum.

                   
	  <div class="form-group select-govco">
	    <label for="selector-normal">Selector</label>
	    <select id ="selector-normal" class="form-control selectpicker" title="Por ejemplo: Guillermo Pérez">
	      <option disabled>Choose city</option>
	      <option value="2">Foobar</option>
	      <option value="3">Is great</option>
	    </select>
	  </div>
                  
                

Error

Lorem ipsum dolor sit, amet consectetur adipisicing elit. Suscipit consectetur iure, esse provident, aliquam officia unde voluptatem quis cum porro inventore? Delectus quis tenetur fugiat. Iusto ad dignissimos voluptatum harum.

                   
	  <div class="form-group select-govco--error">
	   <label for="selector-normal">Selector</label>
	   <select id ="selector-normal" class="form-control selectpicker" title="Por ejemplo: Guillermo Pérez">
	     <option disabled>Choose city</option>
	     <option value="2">Foobar</option>
	     <option value="3">Is great</option>
	   </select>
	  </div>
                  
                

Desactivado

Lorem ipsum dolor sit, amet consectetur adipisicing elit. Suscipit consectetur iure, esse provident, aliquam officia unde voluptatem quis cum porro inventore? Delectus quis tenetur fugiat. Iusto ad dignissimos voluptatum harum.

                   
	  <div class="form-group select-govco--inactive">
	   <label for="selector-normal">Selector</label>
	   <select disabled id ="selector-normal" class="form-control selectpicker" title="Por ejemplo: Guillermo Pérez">
	     <option disabled>Choose city</option>
	     <option value="2">Foobar</option>
	     <option value="3">Is great</option>
	   </select>
	  </div>
                  
                

Etiquetas

Formulario

Iconos

Lorem ipsum, dolor sit amet consectetur adipisicing elit. Nisi quod magni facilis nesciunt inventore, quia incidunt vero natus vitae a sint quos explicabo iusto velit maxime sed fuga. Molestias, praesentium.

Notificaciones

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Reiciendis inventore rem, ut animi et id corporis assumenda repellendus minima quo sapiente perspiciatis, earum quidem dolorum debitis alias aperiam? Accusantium, laudantium?

Paginación


Inicio

Reposo

Desarrollo

Final

Seleccion Anterior

Seleccion Inicio

Seleccion Siguiente

Seleccion Fin

      <!-- Code Implementation Pagination -->
      <div>
        <ul class="paginacion-govco">
          <li><a href="#"<svg class="div-pagination-svg-arrow" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M0 0h24v24H0z" fill="none"/><path d="M20 11H7.83l5.59-5.59L12 4l-8 8 8 8 1.41-1.41L7.83 13H20v-2z"/> </svg><p>Inicio</p></a></li>	
          <li><a href="#"<svg class="div-pagination-svg" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M0 0h24v24H0z" fill="none"/><path d="M17.51 3.87L15.73 2.1 5.84 12l9.9 9.9 1.77-1.77L9.38 12l8.13-8.13z"/> </svg><p>Inicio</p></a></li>
          <li><a href="#"> 1 </a></li>
          <li><a href="#"> ... </a></li>
          <li><a href="#"> 14 </a></li>
          <li><a href="#"<svg class="div-pagination-svg" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M0 0h24v24H0z" fill="none"/><path d="M6.49 20.13l1.77 1.77 9.9-9.9-9.9-9.9-1.77 1.77L14.62 12l-8.13 8.13z"/> </svg><p>Inicio</p></a></li>
          <li><a href="#"<svg class="div-pagination-svg-arrow" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M0 0h24v24H0z" fill="none"/><path d="M12 4l-1.41 1.41L16.17 11H4v2h12.17l-5.58 5.59L12 20l8-8-8-8z"/> </svg><p>Inicio</p></a></li>
        <ul/>
      <div/>
    

Listas de chequeo

Lorem ipsum dolor sit amet consectetur adipisicing elit. Tempore porro, nemo voluptatem dolore dolorum unde blanditiis cum aut odio quas dolores, autem corrupti harum veritatis corporis velit delectus necessitatibus vitae?

Default

Lorem ipsum dolor sit amet consectetur adipisicing elit. Ex incidunt architecto animi sequi rem deleniti, voluptate necessitatibus ipsum, doloribus officiis illum molestiae et quos porro harum laudantium quaerat natus iste!

                      
          <label class="checklist-govco radiobutton-govco">
            <input type="radio" name="radio" checked="checked" />
            <span>1. Option</span>
            <div class="radiobutton-govco__indicator"></div>
          </label>
          <label class="checklist-govco radiobutton-govco">
            <input type="radio" name="radio" checked="checked" />
            <span>2. Option</span>
            <div class="radiobutton-govco__indicator"></div>
          </label>
          <label class="checklist-govco radiobutton-govco error">
            <input type="radio" name="radio" />
            <span>2.1. Option</span>
            <div class="radiobutton-govco__indicator"></div>
          </label>
          <label class="checklist-govco radiobutton-govco disabled">
            <input type="radio" name="radio2" disabled="disabled" />
            <span>3. Option Disabled</span>
            <div class="radiobutton-govco__indicator"></div>
          </label>
          <label class="checklist-govco radiobutton-govco disabled">
            <input type="radio" name="radio2" disabled="disabled" checked="checked" />
            <span>4. Option Disabled & checked</span>
            <div class="radiobutton-govco__indicator"></div>
          </label>
      
    

Radiobutton

Lorem ipsum dolor sit amet consectetur adipisicing elit. Ex incidunt architecto animi sequi rem deleniti, voluptate necessitatibus ipsum, doloribus officiis illum molestiae et quos porro harum laudantium quaerat natus iste!

                  	
    <label class="checklist-govco radiobutton-govco">
      <input type="radio" name="radio" checked="checked" />
      <span>1. Option</span>
      <div class="radiobutton-govco__indicator"></div>
    </label>
    <label class="checklist-govco radiobutton-govco">
      <input type="radio" name="radio" checked="checked" />
      <span>2. Option</span>
      <div class="radiobutton-govco__indicator"></div>
    </label>
    <label class="checklist-govco radiobutton-govco error">
      <input type="radio" name="radio" />
      <span>2.1. Option</span>
      <div class="radiobutton-govco__indicator"></div>
    </label>
    <label class="checklist-govco radiobutton-govco disabled">
      <input type="radio" name="radio2" disabled="disabled" />
      <span>3. Option Disabled</span>
      <div class="radiobutton-govco__indicator"></div>
    </label>
    <label class="checklist-govco radiobutton-govco disabled">
      <input type="radio" name="radio2" disabled="disabled" checked="checked" />
      <span>4. Option Disabled & checked</span>
      <div class="radiobutton-govco__indicator"></div>
    </label>
                  
	            

Tablas

Lorem ipsum dolor sit, amet consectetur adipisicing elit. Hic nulla numquam excepturi corrupti rerum at ipsum dolores. Corporis error explicabo voluptatibus sapiente illo consequuntur unde quaerat vero aliquid. Aut, explicabo.

Básica

Medio Detalle
WEB Registros de datos en linea

Simple

Medio Detalle
WEB Registros de datos en linea

Simple con checkbox

Nombre No. Crédito Estado Valor Selecciona
Prestamo hipotecario 123456789 Concepto definitivo $50.000.000.
Prestamo hipotecario 123456789 Concepto definitivo $50.000.000.
Prestamo hipotecario 123456789 Concepto definitivo $50.000.000.
Prestamo hipotecario 123456789 Concepto definitivo $50.000.000.
Prestamo hipotecario 123456789 Concepto definitivo $50.000.000.

Table con paginación

                       

      <!-- Code Implementation Table with Checkbox -->              
      <div class="table-simple-headblue-govco">
        <table class="table display table-responsive-sm table-responsive-md" style="width:100%">
          <thead>
            <tr>
              <th>Nombre</th>
              <th>No. Crédito</th>
              <th>Estado</th>
              <th>Valor</th>
              <th>Selecciona</th>
            </tr>
          </thead>
          <tbody>
            <tr>
              <td>Prestamo hipotecario</td>
              <td>123456789</td>
              <td class="state-success">Concepto definitivo</td>
              <td>$50.000.000.</td>
              <td>
                <div class="checkbox-govco">
                  <input type="checkbox" id="check1" />
                  <label class="label-checkbox m-auto" for="check1">
                      <div class="chk"></div>
                  </label>
                </div>
              </td>
            </tr>
          </tbody>
        </table>
      </div> 
                    
      <!-- Code Implementation Table with Pagination -->   
      <div class="table-pagination-govco">
        <table id="DataTables_Table_0" class="table display table-responsive-sm table-responsive-md"
            <thead>
              <tr>
                <th>Column X</th>
                <th>Column Y</th>
                <th>Column Z</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td>ColumnX Row1</td>
                <td>ColumnY Row1</td>
                <td>ColumnZ Row1</td>
            </tr>
          </tbody>
        </table>
      </div> 
                  
                

Textarea

Lorem ipsum dolor sit, amet consectetur adipisicing elit. Hic nulla numquam excepturi corrupti rerum at ipsum dolores. Corporis error explicabo voluptatibus sapiente illo consequuntur unde quaerat vero aliquid. Aut, explicabo.

300
      <!-- Code Implementation Textarea -->
      <div class="textarea-govco">
        <textarea class="form-control" rows="5" placeholder="Escribe aquí tu opinión" id="textarea-example" maxlength="300"></textarea>			 
      </div> 
              
          

Scroll

Lorem ipsum dolor sit amet consectetur adipisicing elit. Omnis iusto earum, sapiente dolorem vel saepe provident dignissimos libero in nisi consequuntur aliquid eius sit id placeat laudantium molestiae odit ipsa.

Scroll Contrast Light (#fff)

Lorem, ipsum dolor sit amet consectetur adipisicing elit. Reprehenderit voluptas quia dolorem sit totam soluta culpa eius, aspernatur magni consequuntur magnam accusamus fugiat! Quibusdam accusantium labore facere id perferendis!

Lorem, ipsum dolor sit amet consectetur adipisicing elit. Reprehenderit voluptas quia dolorem sit totam soluta culpa eius, aspernatur magni consequuntur magnam accusamus fugiat! Quibusdam accusantium labore facere id perferendis!

                     
  <div class="scroll-light-govco"></div>
                     
                

Scroll Contrast Dark (#e6effd)

Lorem, ipsum dolor sit amet consectetur adipisicing elit. Reprehenderit voluptas quia dolorem sit totam soluta culpa eius, aspernatur magni consequuntur magnam accusamus fugiat! Quibusdam accusantium labore facere id perferendis!

Lorem, ipsum dolor sit amet consectetur adipisicing elit. Reprehenderit voluptas quia dolorem sit totam soluta culpa eius, aspernatur magni consequuntur magnam accusamus fugiat! Quibusdam accusantium labore facere id perferendis!

                   
  <div class="scroll-dark-govco"></div>
                  
                

Tabs

Lorem ipsum dolor sit amet consectetur adipisicing elit. Omnis iusto earum, sapiente dolorem vel saepe provident dignissimos libero in nisi consequuntur aliquid eius sit id placeat laudantium molestiae odit ipsa.

Home tab, HTML object here...
Profile tab, HTML object here...
Message tab, HTML object here...
Settings tab, HTML object here...
                 
	<div class="tabs-govco">			
	  <ul class="nav nav-tabs" id="myTab" role="tablist">
	    <li class="nav-item">
	     <a class="nav-link active" id="home-tab" data-toggle="tab" href="#home" role="tab" aria-controls="home" aria-selected="true">Home</a>
	    </li>
	    <li class="nav-item">
	     <a class="nav-link" id="profile-tab" data-toggle="tab" href="#profile" role="tab" aria-controls="profile" aria-selected="false">Profile</a>
	    </li>
	    <li class="nav-item">
	     <a class="nav-link" id="messages-tab" data-toggle="tab" href="#messages" role="tab" aria-controls="messages" aria-selected="false">Messages</a>
	    </li>
	    <li class="nav-item">
	     <a class="nav-link" id="settings-tab" data-toggle="tab" href="#settings" role="tab" aria-controls="settings" aria-selected="false">Settings</a>
	    </li>
	  </ul>
						
	  <div class="tab-content">
	   <div class="tab-pane active" id="home" role="tabpanel" aria-labelledby="home-tab">...</div>
	   <div class="tab-pane" id="profile" role="tabpanel" aria-labelledby="profile-tab">...</div>
	   <div class="tab-pane" id="messages" role="tabpanel" aria-labelledby="messages-tab">...</div>
	   <div class="tab-pane" id="settings" role="tabpanel" aria-labelledby="settings-tab">...</div>
	  </div>
	</div>
              
            

Acordeón (Collapse)

Lorem ipsum dolor sit amet consectetur adipisicing elit. Omnis iusto earum, sapiente dolorem vel saepe provident dignissimos libero in nisi consequuntur aliquid eius sit id placeat laudantium molestiae odit ipsa.

Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS.
Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS.
Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS.
                               
    <div class="row">
      <div class="col-lg-12">
          <div id="accordion" class="accordion-govco">
            <div class="card">
              <div class="cheader" id="headingOne">
                <h5 class="mb-0">
                  <button class="btn btn-link" data-toggle="collapse" 
                  data-target="#collapseOne" aria-expanded="true" aria-controls="collapseOne">
                    Collapsible Group Item #1
                  </button>
                </h5>
              </div>

              <div id="collapseOne" class="collapse show" aria-labelledby="headingOne" 
              data-parent="#accordion">
                <div class="card-body">
                    ...
                </div>
              </div>
            </div>
            <div class="card">
              <div class="cheader" id="headingTwo">
                <h5 class="mb-0">
                  <button class="btn btn-link collapsed" data-toggle="collapse" 
                  data-target="#collapseTwo" aria-expanded="false" aria-controls="collapseTwo">
                    Collapsible Group Item #2
                  </button>
                </h5>
              </div>
              <div id="collapseTwo" class="collapse" aria-labelledby="headingTwo" 
              data-parent="#accordion">
                <div class="card-body">
                    ...
                </div>
              </div>
            </div>
            <div class="card">
              <div class="cheader" id="headingThree">
                <h5 class="mb-0">
                  <button class="btn btn-link collapsed" data-toggle="collapse" 
                  data-target="#collapseThree" aria-expanded="false" aria-controls="collapseThree">
                    Collapsible Group Item #3
                  </button>
                </h5>
              </div>
              <div id="collapseThree" class="collapse" aria-labelledby="headingThree" 
              data-parent="#accordion">
                <div class="card-body">
                    ...
                </div>
              </div>
            </div>
          </div>
      </div>
    </div>
                      
                    

Teclado


                        
    <div class="teclado-item">
    <div class="input-group">
      <input type="password" class= "ip-svg">
      <label for="password" class= "lb-name"> Contraseña </label>
      <svg class="svg-blocks" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M0 0h24v24H0z" fill="none"/><path d="M18 8h-1V6c0-2.76-2.24-5-5-5S7 3.24 7 6v2H6c-1.1 0-2 .9-2 2v10c0 1.1.9 2 2 2h12c1.1 0 2-.9 2-2V10c0-1.1-.9-2-2-2zm-6 9c-1.1 0-2-.9-2-2s.9-2 2-2 2 .9 2 2-.9 2-2 2zm3.1-9H8.9V6c0-1.71 1.39-3.1 3.1-3.1 1.71 0 3.1 1.39 3.1 3.1v2z"/> </svg>      
    </div>
                
    <table class="tb-teclado-item">
    <tr>     
      <td colspan="3"></td>
    </tr>
    <div class="div-numbers">
      <tr>
        <td class="td-number"><button class="td-number-item"> 1 </button></td>
        <td class="td-number"><button class="td-number-item"> 2 </button></td>
        <td class="td-number"><button class="td-number-item"> 3 </button></td>
      </tr>
      <tr>   
        <td class="td-number"><button class="td-number-item"> 4 </button></td>
        <td class="td-number"><button class="td-number-item"> 5 </button></td>
        <td class="td-number"><button class="td-number-item"> 6 </button></td>
      </tr>
      <tr>
        <td class="td-number"><button class="td-number-item"> 7 </button></td>
        <td class="td-number"><button class="td-number-item"> 8 </button></td>
        <td class="td-number"><button class="td-number-item"> 9 </button></td>
      </tr>
      <tr>
        <td></td> 
        <td class="td-number"><button class="td-number-item"> 0 </button></td>
        <td class="td-number-disable"><button class="btn-disable"><svg class="btn-delete" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M0 0h24v24H0z" fill="none"/><path d="M22 3H7c-.69 0-1.23.35-1.59.88L0 12l5.41 8.11c.36.53.9.89 1.59.89h15c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2zm-3 12.59L17.59 17 14 13.41 10.41 17 9 15.59 12.59 12 9 8.41 10.41 7 14 10.59 17.59 7 19 8.41 15.41 12 19 15.59z"/> </svg> </button></td>
      </tr>
    </div>
    </table>
  </div>
                    
                    

Tooltip

<button type="button" class="btn btn-primary mt-2" data-tooltip="tooltip" aria->
<span aria-hidden="true"><i class="material-icons page-icon-close">clear</i></span>
</button>

Colores

Color white
Color selago
Color dodger-blue
Color marine
Color dark-blue
Color green
Color gold
Color orange
Color concrete
Color silver
Color tundora
Color tutu
Color radical-red
Color shiraz
Color pale-sky
Color hawkes-blue
Color hawkes-blue-300
Color catalina-blue
Color catalina-blue-600
Color black-160
Color marine-400
Color dark-blue-500
Color shiraz-600
Color white-contrast
Color black-contrast
Color yellow-contrast
Color orange-contrast

Tipografía

Work sans y sus estilos de acuerdo al Manual Gráfico Gobierno de Colombia.
Nota: La tipografía puede ser descargada desde sami.presidencia.gov.co

Tipo Previsualización
h1

Heading 1 h1

h2

Heading 2 h2

h3

Heading 3 h3

h4

Heading 4 h4

p

Paragraph p

p.intro

Paragraph Intro p.intro

p.title

Paragraph Title p.title

Quote Quote

Barras de accesibilidad

Lorem ipsum, dolor sit amet consectetur adipisicing elit. Saepe nostrum veritatis aliquam animi magnam neque harum, ex placeat soluta! Adipisci voluptate quos nisi dolor sit assumenda molestiae dignissimos cumque necessitatibus.

                         
    <div class="block block--gov-accessibility">
    <div class="images navbar-expanded">
      <a class="contrast-ref">
        <div class="image-icon">
          <div id="contrast"></div> 
        </div> 
        <label>Contraste</label> 
      </a> 
  
      <a class="min-fontsize">
        <div class="image-icon">
          <div id="font-down"></div> 
        </div> 
        <label>Reducir letra</label> 
      </a> 
  
      <a class="max-fontsize">
        <div class="image-icon">
          <div id="font-up"></div> 
        </div> 
        <label>Aumentar letra</label> 
      </a> 
  
      <a href="https://centroderelevo.gov.co/632/w3-channel.html">
        <div class="image-icon">
          <div id="relevo"></div> 
        </div> 
        <label>Centro de Relevo</label> 
      </a> 
    </div> 
  </div>