Estilos de componentes
Atajos
Los atajos se utilizan para enlazar cualquier tipo de contenido, tanto interno como externo, y con diferentes tipos de jerarquías.
Atajo Botón
<div class="row">
<div class="col-xs-12 text-center">
<a class="btn btn-primary btn-lg" href="#">Ver todas las noticias</a>
</div>
</div>
Atajo simple
Atajo simple con ícono y texto
<div class="row panels-row">
<div class="col-xs-12 col-sm-6 col-md-3">
<a class="panel panel-default" href="#">
<div class="panel-body">
<div class="media">
<div class="media-left padding-5">
<i class="fa fa-phone fa-fw fa-3x text-secondary"></i>
</div>
<div class="media-body">
<h3>El estado del estado</h3>
<p class="text-muted">Diagnóstico de la Administración Pública Nacional en diciembre de 2019</p>
</div>
</div>
</div>
</a>
</div>
<div class="col-xs-12 col-sm-6 col-md-3">
...
</div>
<div class="col-xs-12 col-sm-6 col-md-3">
...
</div>
<div class="col-xs-12 col-sm-6 col-md-3">
...
</div>
</div>
Atajo simple con texto
Atajo simple
<div class="row panels-row">
<!-- Atajo con ícono -->
<div class="col-xs-12 col-sm-6 col-md-3">
<a class="panel panel-default" href="#">
<div class="panel-body">
<h3>Ministerio de Economía</h3>
<p class="text-muted">quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo</p>
</div>
</a>
</div>
<!-- Atajo sin ícono -->
<div class="col-xs-12 col-sm-6 col-md-3">
<a class="panel panel-default" href="#">
<div class="panel-body">
<h3>Ministerio de Economía</h3>
</div>
</a>
</div>
<div class="col-xs-12 col-sm-6 col-md-3">
...
</div>
<div class="col-xs-12 col-sm-6 col-md-3">
...
</div>
</div>
Atajo Destacado con ícono
Atajo Destacado con ícono
<div class="row panels-row">
<div class="col-xs-12 col-sm-6 col-md-3">
<a class="panel panel-default panel-icon panel-secondary" href="#">
<div class="panel-heading hidden-xs"><i class="fa fa-file"></i></div>
<div class="panel-body">
<h3><span class="visible-xs-inline"><i class="fa fa-file text-secondary"></i> </span>Ministerio de Economía</h3>
<p class="text-muted">quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo</p>
</div>
</a>
</div>
<div class="col-xs-12 col-sm-6 col-md-3">
...
</div>
<div class="col-xs-12 col-sm-6 col-md-3">
...
</div>
<div class="col-xs-12 col-sm-6 col-md-3">
...
</div>
</div>
Atajo Destacado con imagen
Atajo Destacado con imagen
<div class="row panels-row">
<div class="col-xs-12 col-sm-6 col-md-3">
<a class="panel panel-default" href="#">
<div style="background-image:url('img/placeholder.png');" class="panel-heading"></div>
<div class="panel-body">
<h3>Este es el título del link</h3>
<p class="text-muted">quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo</p>
</div>
</a>
</div>
<div class="col-xs-12 col-sm-6 col-md-3">
...
</div>
<div class="col-xs-12 col-sm-6 col-md-3">
...
</div>
<div class="col-xs-12 col-sm-6 col-md-3">
...
</div>
</div>
Listados
Los listados obtienen la información de un tipo de contenido y un group audience específico de Drupal. Tienen la capacidad de seleccionar la cantidad de elementos a mostrar, paginarlos y agregar un botón para ver más.
Solo Título
Título y texto
<div class="row panels-row">
<!-- Solo Título -->
<div class="col-xs-12 col-sm-6 col-md-3">
<a class="panel panel-default" href="#">
<div class="panel-body">
<h3>Ministerio de Economía</h3>
</div>
</a>
</div>
<!-- Título y texto -->
<div class="col-xs-12 col-sm-6 col-md-3">
<a class="panel panel-default" href="#">
<div class="panel-body">
<h3>Ministerio de Economía</h3>
<p class="text-muted">quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo</p>
</div>
</a>
</div>
<div class="col-xs-12 col-sm-6 col-md-3">
...
</div>
<div class="col-xs-12 col-sm-6 col-md-3">
...
</div>
</div>
Título e imagen
Título, texto e imagen
<div class="row panels-row">
<!-- Título e imagen -->
<div class="col-xs-12 col-sm-6 col-md-3">
<a class="panel panel-default" href="#">
<div style="background-image:url('img/placeholder.png');" class="panel-heading"></div>
<div class="panel-body">
<h4>El Ministro Fitipaldi asistió a la apertura de la Semana Verde Internacional, en Berlín</h4>
</div>
</a>
</div>
<!-- Título, texto e imagen -->
<div class="col-xs-12 col-sm-6 col-md-3">
<a class="panel panel-default" href="#">
<div style="background-image:url('img/placeholder.png');" class="panel-heading"></div>
<div class="panel-body">
<h4>El Ministro Fitipaldi asistió a la apertura de la Semana Verde Internacional, en Berlín</h4>
<p class="text-muted">quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo</p>
</div>
</a>
</div>
<div class="col-xs-12 col-sm-6 col-md-3">
...
</div>
<div class="col-xs-12 col-sm-6 col-md-3">
...
</div>
</div>
Noticias
<div class="row panels-row">
<div class="col-xs-12 col-sm-6 col-md-3">
<a class="panel panel-default" href="#">
<div style="background-image:url('img/placeholder.png');" class="panel-heading"></div>
<div class="panel-body">
<time>Jueves 14 de Enero del 2016</time>
<h4>El Ministro Fitipaldi asistió a la apertura de la Semana Verde Internacional, en Berlín</h4>
</div>
</a>
</div>
<div class="col-xs-12 col-sm-6 col-md-3">
...
</div>
<div class="col-xs-12 col-sm-6 col-md-3">
...
</div>
<div class="col-xs-12 col-sm-6 col-md-3">
...
</div>
</div>
<div class="row">
<div class="col-xs-12">
<a class="btn btn-primary" href="#">Ver todas las noticias</a>
</div>
</div>
Noticias Destacadas
<div class="row panels-row">
<!-- 2 principales -->
<div class="col-xs-12 col-md-6">
<a class="panel panel-default panel-lg" href="#">
<div style="background-image:url('img/placeholder.png');" class="panel-heading"></div>
<div class="panel-body">
<time>Jueves 14 de Enero del 2016</time>
<h2>El Ministro Fitipaldi asistió a la apertura de la Semana Verde Internacional, en Berlín</h2>
</div>
</a>
</div>
<div class="col-xs-12 col-md-6">
...
</div>
<div class="col-xs-12 col-sm-6">
<a class="panel panel-default" href="#">
<div style="background-image:url('img/placeholder.png');" class="panel-heading"></div>
<div class="panel-body">
<time>Jueves 14 de Enero del 2016</time>
<h4>El Ministro Fitipaldi asistió a la apertura de la Semana Verde Internacional, en Berlín</h4>
</div>
</a>
</div>
<!-- 4 secundarias -->
<div class="col-xs-12 col-sm-6">
...
</div>
<div class="col-xs-12 col-sm-6">
...
</div>
<div class="col-xs-12 col-sm-6">
...
</div>
</div>
<div class="row">
<div class="col-xs-12">
<a class="btn btn-primary">Ver todas las noticias</a>
</div>
</div>
Alertas
- Amarillo (.alert-warning)
- Azul (.alert-info)
- Verde (.alert-success)
- Rojo (.alert-danger)
¿Ya iniciaste tu tramite?
Seguí el estado del trámite en linea
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dolorem ratione, illo quaerat corporis, suscipit tenetur vel iusto ullam ex ipsa ipsam recusandae nulla, accusamus officia sed! Dolores itaque expedita, repudiandae.
<!-- Alerta con ícono -->
<div class="alert alert-warning">
<div class="media">
<div class="media-left">
<i class="fa fa-arrow-circle-o-right fa-fw fa-4x"></i>
</div>
<div class="media-body">
<h5>¿Ya iniciaste tu tramite?</h5>
<p class="margin-0">Seguí el <a href="http://www.mininterior.gov.ar/tramitesyservicios/estado-tramite-dni.php" target="_blank">estado del trámite en linea</a></p>
</div>
</div>
</div>
<!-- Alerta sin ícono -->
<div class="alert alert-warning">
<h5>¿Ya iniciaste tu tramite?</h5>
<p class="margin-0">Seguí el <a href="http://www.mininterior.gov.ar/tramitesyservicios/estado-tramite-dni.php" target="_blank">estado del trámite en linea</a></p>
</div>
Ejes
Los ejes son contenidos breves que se muestran en columnas.
Cercana
Conoce tus necesidades y adopta sus servicios a ellas.
Transparente
Brinda mayor información y certeza sobre sus actos de gobierno.
Participativa
Trabaja en equipo con los empleados públicos y la gente.
<div class="row">
<div class="col-xs-12 col-sm-6 col-md-4">
<div class="icon-item">
<i class="fa fa-users text-success"></i>
<h3>Cercana</h3>
<p>Conoce tus necesidades y adopta sus servicios a ellas.</p>
</div>
</div>
<div class="col-xs-12 col-sm-6 col-md-4">
<div class="icon-item">
<i class="fa fa-search text-primary"></i>
<h3>Transparente</h3>
<p>Brinda mayor información y certeza sobre sus actos de gobierno.</p>
</div>
</div>
<div class="col-xs-12 col-sm-6 col-md-4">
<div class="icon-item">
<i class="fa fa-users"></i>
<h3>Participativa</h3>
<p>Trabaja en equipo con los empleados públicos y la gente.</p>
</div>
</div>
</div>
Números destacados
Los números destacados se utilizan en landings, páginas o noticias que necesitan comunicar un resultado o medición.
Visitas últimos 30 días
+11,06% vs mes anterior
Visitas este mes
del 1 al 26 de Febrero
Personas conectadas
Duramente los últimos 30 días.
<div class="row numbers">
<div class="col-md-4">
<div class="h2 text-success">392.493</div>
<p class="lead">Visitas últimos 30 días</p>
<p class="text-muted">+11,06% vs mes anterior</p>
</div>
<div class="col-md-4">
<div class="h2 text-gray">33 <small>%</small></div>
<p class="lead">Visitas este mes</p>
<p class="text-muted">del 1 al 26 de Febrero</p>
</div>
<div class="col-md-4">
<div class="h2">5 <small>de 10</small></div>
<p class="lead">Personas conectadas</p>
<p class="text-muted">Duramente los últimos 30 días.</p>
</div>
</div>
Citas
Las citas pueden ser estándares o destacadas.
“ Un Estado inteligente con servidores públicos capacitados para brindarle más y mejores servicios a los ciudadanos. Esto es el Siglo XXI y en eso trabajaremos día y noche. ”
Alberto Fernandez
<blockquote>
<p>“ Un Estado inteligente con servidores públicos capacitados para brindarle más y mejores servicios a los ciudadanos. Esto es el Siglo XXI y en eso trabajaremos día y noche. ”</p>
<small>Alberto Fernandez</small>
</blockquote>
“ Un Estado inteligente con servidores públicos capacitados para brindarle más y mejores servicios a los ciudadanos. Esto es el Siglo XXI y en eso trabajaremos día y noche. ”
Alberto Fernandez
<blockquote class="quote-highlighted">
<p>
<span class="quotemark-open">“</span>
Un Estado inteligente con servidores públicos capacitados para brindarle más y mejores servicios a los ciudadanos. Esto es el Siglo XXI y en eso trabajaremos día y noche.
<span class="quotemark-close">”</span>
</p>
<small>Alberto Fernandez</small>
</blockquote>
Referencias
Colores de texto
Los atajos se utilizan para enlazar cualquier tipo de contenido, tanto interno como externo, y con diferentes tipos de jerarquías.
Paleta principal
La paleta principal se forma de:
- Azul (.text-primary)
- Celeste (.text-secondary)
- Verde (.text-success)
- Amarillo (.text-warning)
- Rojo (.text-danger)
- Gris claro (.text-muted)
- Gris oscuro (.text-gray)
- Negro (por defecto)
Paleta extendida
La paleta extendida se forma de:
- Fucsia (.text-fucsia)
- Arándano (.text-arandano)
- Uva (.text-uva)
- Cielo (.text-cielo)
- Verdin (.text-verdin)
- Lima (.text-lima)
- Maiz (.text-maiz)
- Tomate (.text-tomate)
Colores de fondo
Los atajos se utilizan para enlazar cualquier tipo de contenido, tanto interno como externo, y con diferentes tipos de jerarquías.
Paleta principal
La paleta principal se forma de:
Paleta extendida
La paleta extendida se forma de:
Íconos
Dentro de poncho estamos trabajando en una familia de íconos que va creciendo de a poco, y de momento convive junto a Font Awesome.