Colores y fondos

Clases auxiliares para colores tipográficos y de fondo.

Contenido

Colores tipográficos

Las clases de colores tipográficos se escriben con el prefijo .color- y el color en particular.

Encabezado del ejemplo

Lorem ipsum

<p class="color-primary">Lorem ipsum</p>

Fondos

Las clases de colores de fondo se escriben con el prefijo .bg- y el color en particular.

Encabezado del ejemplo

Lorem ipsum

Lorem ipsum

Lorem ipsum

Lorem ipsum

Lorem ipsum

Lorem ipsum

Lorem ipsum

Lorem ipsum

Lorem ipsum

Lorem ipsum

Lorem ipsum

Lorem ipsum

Lorem ipsum

Lorem ipsum

Lorem ipsum

Lorem ipsum

Lorem ipsum

Lorem ipsum

<p class="bg-primary xx-background-helper">Lorem ipsum</p>
<p class="bg-secondary xx-background-helper">Lorem ipsum</p>
<p class="bg-secondary-light xx-background-helper">Lorem ipsum</p>
<p class="bg-alumni xx-background-helper">Lorem ipsum</p>
<p class="bg-alumni-light xx-background-helper">Lorem ipsum</p>
<p class="bg-x xx-background-helper">Lorem ipsum</p>
<p class="bg-x-light xx-background-helper">Lorem ipsum</p>
<p class="bg-media xx-background-helper">Lorem ipsum</p>
<p class="bg-media-light xx-background-helper">Lorem ipsum</p>
<p class="bg-ri xx-background-helper">Lorem ipsum</p>
<p class="bg-ri-light xx-background-helper">Lorem ipsum</p>
<p class="bg-corporate xx-background-helper">Lorem ipsum</p>
<p class="bg-corporate-light xx-background-helper">Lorem ipsum</p>
<p class="bg-error-light xx-background-helper">Lorem ipsum</p>
<p class="bg-grey-dark xx-background-helper">Lorem ipsum</p>
<p class="bg-grey xx-background-helper">Lorem ipsum</p>
<p class="bg-grey-light xx-background-helper">Lorem ipsum</p>
<p class="bg-grey-lighter xx-background-helper">Lorem ipsum</p>

Texto invertido

La clase .inverse asigna color blanco a la tipográfia y está pensada para combinarse con fondos oscuros.

Inverse

Loremipsum

Loremipsum

<p class="bg-primary inverse xx-background-helper">Lorem <a href="#">ipsum</a></p>
<p class="g-grey-dark inverse xx-background-helper">Lorem <a href="#">ipsum</a></p>
Subir