Menú

Colores y fondos

Clases auxiliares para colores tipográficos y de fondo.

Contenido

Colores tipográficos
Fondos
Texto invertido

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

<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

<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