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!

Home

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

Botón

                 
	<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?

Botón link icon Right

Botón link icon Down

                 
	<!-- 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

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

Error

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

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

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

Carrousel

Checkbox

Use los estilos de checkbox personalizados

First checkbox

Second checkbox

Disabled

Disabled & checked

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

Selector

                   
	  <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

Selector

                   
	  <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

Selector

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

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.

Breadcrumb

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


      <!-- 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

1. Option 2. Option 2.1. Option 3. Option Disabled

                      
          <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

1. Option

2. Option

2.1. Option

3. Option Disabled

4. Option Disabled & checked

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

Name	Position	Office	Age	Start date	Salary
Tiger Nixon	System Architect	Edinburgh	61	2011/04/25	$320,800
Garrett Winters	Accountant	Tokyo	63	2011/07/25	$170,750
Ashton Cox	Junior Technical Author	San Francisco	66	2009/01/12	$86,000
Cedric Kelly	Senior Javascript Developer	Edinburgh	22	2012/03/29	$433,060
Airi Satou	Accountant	Tokyo	33	2008/11/28	$162,700
Brielle Williamson	Integration Specialist	New York	61	2012/12/02	$372,000
Herrod Chandler	Sales Assistant	San Francisco	59	2012/08/06	$137,500
Rhona Davidson	Integration Specialist	Tokyo	55	2010/10/14	$327,900
Colleen Hurst	Javascript Developer	San Francisco	39	2009/09/15	$205,500
Sonya Frost	Software Engineer	Edinburgh	23	2008/12/13	$103,600
Jena Gaines	Office Manager	London	30	2008/12/19	$90,560
Quinn Flynn	Support Lead	Edinburgh	22	2013/03/03	$342,000
Charde Marshall	Regional Director	San Francisco	36	2008/10/16	$470,600
Haley Kennedy	Senior Marketing Designer	London	43	2012/12/18	$313,500
Tatyana Fitzpatrick	Regional Director	London	19	2010/03/17	$385,750
Michael Silva	Marketing Designer	London	66	2012/11/27	$198,500
Paul Byrd	Chief Financial Officer (CFO)	New York	64	2010/06/09	$725,000
Gloria Little	Systems Administrator	New York	59	2009/04/10	$237,500
Bradley Greer	Software Engineer	London	41	2012/10/13	$132,000
Dai Rios	Personnel Lead	Edinburgh	35	2012/09/26	$217,500
Jenette Caldwell	Development Lead	New York	30	2011/09/03	$345,000
Yuri Berry	Chief Marketing Officer (CMO)	New York	40	2009/06/25	$675,000
Caesar Vance	Pre-Sales Support	New York	21	2011/12/12	$106,450
Doris Wilder	Sales Assistant	Sidney	23	2010/09/20	$85,600
Angelica Ramos	Chief Executive Officer (CEO)	London	47	2009/10/09	$1,200,000
Gavin Joyce	Developer	Edinburgh	42	2010/12/22	$92,575
Jennifer Chang	Regional Director	Singapore	28	2010/11/14	$357,650
Brenden Wagner	Software Engineer	San Francisco	28	2011/06/07	$206,850
Fiona Green	Chief Operating Officer (COO)	San Francisco	48	2010/03/11	$850,000
Shou Itou	Regional Marketing	Tokyo	20	2011/08/14	$163,000
Michelle House	Integration Specialist	Sidney	37	2011/06/02	$95,400
Suki Burks	Developer	London	53	2009/10/22	$114,500
Prescott Bartlett	Technical Author	London	27	2011/05/07	$145,000
Gavin Cortez	Team Leader	San Francisco	22	2008/10/26	$235,500
Martena Mccray	Post-Sales support	Edinburgh	46	2011/03/09	$324,050
Unity Butler	Marketing Designer	San Francisco	47	2009/12/09	$85,675
Howard Hatfield	Office Manager	San Francisco	51	2008/12/16	$164,500
Hope Fuentes	Secretary	San Francisco	41	2010/02/12	$109,850
Vivian Harrell	Financial Controller	San Francisco	62	2009/02/14	$452,500
Timothy Mooney	Office Manager	London	37	2008/12/11	$136,200
Jackson Bradshaw	Director	New York	65	2008/09/26	$645,750
Olivia Liang	Support Engineer	Singapore	64	2011/02/03	$234,500
Bruno Nash	Software Engineer	London	38	2011/05/03	$163,500
Sakura Yamamoto	Support Engineer	Tokyo	37	2009/08/19	$139,575
Thor Walton	Developer	New York	61	2013/08/11	$98,540
Finn Camacho	Support Engineer	San Francisco	47	2009/07/07	$87,500
Serge Baldwin	Data Coordinator	Singapore	64	2012/04/09	$138,575
Zenaida Frank	Software Engineer	New York	63	2010/01/04	$125,250
Zorita Serrano	Software Engineer	San Francisco	56	2012/06/01	$115,000
Jennifer Acosta	Junior Javascript Developer	Edinburgh	43	2013/02/01	$75,650
Cara Stevens	Sales Assistant	New York	46	2011/12/06	$145,600
Hermione Butler	Regional Director	London	47	2011/03/21	$356,250
Lael Greer	Systems Administrator	London	21	2009/02/27	$103,500
Jonas Alexander	Developer	San Francisco	30	2010/07/14	$86,500
Shad Decker	Regional Director	Edinburgh	51	2008/11/13	$183,000
Michael Bruce	Javascript Developer	Singapore	29	2011/06/27	$183,000
Donna Snider	Customer Support	New York	27	2011/01/25	$112,000

                       

      <!-- 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

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

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

Tabs

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)

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>

Header

   
                    <nav
                     class="navbar navbar-expand-lg fixed-top navbar-govco">
                    <!--Nivel 1 - Sección de notificaciones -->
                    <div class="navbar-nav navbar-notifications">
                      <div class="alert alert-warning">
                        <div class="container p-0">
                          <button type="button" class="close" data-dismiss="alert" aria-label="Close">
                            <span aria-hidden="true"><i class="material-icons page-icon-close">clear</i></span>
                          </button>
                          <a href="/inicio#textarea-escribe-aqui-tu-opinion">
                            <strong class="page-alert-text">
                              Estamos construyendo este espacio para ti y tu opinión nos ayuda a crecer
                            </strong>
                          </a>
                        </div>
                      </div>
                    </div>
                     <!--Nivel 2 - Sección de navegación -->
                    <div class="navbar-container">
                      <div class="navbar-logo float-left">
                        <a class="navbar-brand" href="http://190.60.233.154/">
                          <img src="https://cdn.www.gov.co/assets/images/logo.png" width="auto" height="30" alt="Logo Gov.co">
                        </a>
                        <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarCollapsible" aria-controls="navbarCollapsible" aria-expanded="false" aria-label="Toggle navigation">
                          <span class="navbar-toggler-icon"></span>
                        </button>
                      </div>
                      <div class="collapse navbar-collapse navbar-first-menu float-right">
                        <div class="nav-primary">
                          <ul class="navbar-nav ml-auto">
                            <li class="nav-item active">
                              <a class="nav-link" href="#">Trámites y servicios</a>
                            </li>
                            <li class="nav-item">
                              <a class="nav-link" href="https://www.gov.co/participacion">Participación</a>
                            </li>
                            <li class="nav-item">
                              <a class="nav-link" href="https://www.gov.co/informacion">Entidades</a>
                            </li>
                          </ul>
                        </div>
                        <div class="nav-item-primary">
                          <div class="form-inline form-search-bar my-2 my-lg-0">
                            <input class="form-control mr-sm-2 search-navbar"
                            type="search"
                            placeholder="Buscar"
                            aria-label="Search"
                            name="searchTerm"
                            id="searchTerm">
                            <span class="govco-icon govco-icon-search-n"></span>
                          </div>
                          <span class="govco-icon govco-icon-language-en-n lang-govco ml-3 mr-0"></span>
                        </div>
                      </div>
                    </div>
                     <!--Nivel 3 - Sección de menú flotante-->
                    <div class="nav-secondary govco-content" id="nav-secondary">
                      <div class="container">
                        <div class="collapse navbar-collapse navbar-first-menu">
                          <ul class="navbar-nav ml-auto mr-auto">
                            <li class="nav-item active">
                              <a class="nav-link" href="#">Trámites y servicios</a>
                            </li>
                            <li class="nav-item">
                              <a class="nav-link" href="https://www.gov.co/participacion">Participación</a>
                            </li>
                            <li class="nav-item">
                              <a class="nav-link" href="https://www.gov.co/informacion">Entidades</a>
                            </li>
                          </ul>
                        </div>
                      </div>
                    </div>        
                  </nav>
                  <div class="page-header clear-filter page-header-hidden"></div>

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>

Versión No Vigente

Componentes CDN - GOV.CO

Quick start

CSS

Alertas

Botones

Botones Simbólicos

Botones textuales

Botones mixtos

Botones de información y agregado

Boton de Volver Arriba

Campos de texto - Input

Default

Desactivado

Error

Valido

Contador de caracteres

Carrousel

Checkbox

Desplegables

Default

Error

Desactivado

Etiquetas

Formulario

Iconos

Breadcrumb

Modal

Notificaciones

Paginación

Inicio

Reposo

Desarrollo

Final

Seleccion Anterior

Seleccion Inicio

Seleccion Siguiente

Seleccion Fin

Listas de chequeo

Default

Radiobutton

Tablas

Básica

Simple

Simple con checkbox

Table con paginación

Textarea

Scroll

Scroll Contrast Light (#fff)

Scroll Contrast Dark (#e6effd)

Tabs

Acordeón (Collapse)

Collapsible Group Item #1

Collapsible Group Item #2

Collapsible Group Item #3

Teclado

Tooltip

Header

Footer

Colores

Tipografía

Heading 1 h1

Heading 2 h2

Heading 3 h3

Heading 4 h4

Barras de accesibilidad

Heading 1 h1

Heading 2 h2

Heading 3 h3

Heading 4 h4