Estás viendo la documentación anterior de Poncho. Conocé la nueva versión.

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


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

<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


<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>&nbsp; </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


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


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

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

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

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

392.493

Visitas últimos 30 días

+11,06% vs mes anterior

33 %

Visitas este mes

del 1 al 26 de Febrero

5 de 10

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

Mauricio Macri

<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>Mauricio Macri</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.

Mauricio Macri

<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>Mauricio Macri</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:

.bg-primary .bg-success .bg-info .bg-warning .bg-danger .bg-gray .bg-white

Paleta extendida

La paleta extendida se forma de:

.bg-fucsia .bg-arandano .bg-uva .bg-cielo .bg-verdin .bg-lima .bg-maiz .bg-tomate

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