Fuentes y textos

Adapta el tamaño de las fuentes del texto o crea títulos según desees con los doce tipos de tamaños distintos para fuentes.

-- Clasificación de los tamaños

Los tamaños de fuentes están clasificados en dos grupos;

  • primer grupo: .h1 a .h6.
  • Segundo grupo: .f7 a .f12.

-- Tamaños y tipos de fuentes

Primer grupo de clases

  • .h1

    Lorem ipsum dolor sit.

  • .h2

    Lorem ipsum dolor sit.

  • .h3

    Lorem ipsum dolor sit.

  • .h4

    Lorem ipsum dolor sit.

  • .h5

    Lorem ipsum dolor sit.

  • .h6

    Lorem ipsum dolor sit.
Segundo grupo de clases

  • .f7

    Lorem ipsum dolor sit.

  • .f8

    Lorem ipsum dolor sit.

  • .f9

    Lorem ipsum dolor sit.

  • .f10

    Lorem ipsum dolor sit.

  • .f11

    Lorem ipsum dolor sit.

  • .f12

    Lorem ipsum dolor sit.
HTML 
...

-- Colores disponibles para fuentes

  • f-primary
  • f-positive
  • f-warning
  • f-negative
  • f-muted
  • f-grey
  • f-dark
  • f-bunker
  • f-white

Texto color primary.

HTML 
Text color primary

-- Utilidades

Clase Descripción Propiedad
.fw-300 --> Propiedad css font-weight: 300;
.fw-normal --> Propiedad css font-weight: 400;
.fw-bold --> Propiedad css font-weight: bold;
.all-small-caps --> Propiedad css font-variant: all-small-caps;
.nowrap --> white-space: nowrap;

-- Utilidad line-clamp

Corta el texto en vertical con las siguientes clases; cortes para la segunda línea, tercera línea y cuarta línea de texto.

Clases :

  • .line-clamp-1
  • .line-clamp-2
  • .line-clamp-3

Ejemplo :

.line-clamp-1

Lorem ipsum dolor sit amet consectetur adipisicing elit. Porro eum exercitationem nesciunt fuga, itaque quos vitae? Incidunt dolores animi optio?

.line-clamp-2

Lorem ipsum dolor sit amet consectetur adipisicing elit. Porro eum exercitationem nesciunt fuga, itaque quos vitae? Incidunt dolores animi optio?

.line-clamp-3

Lorem ipsum dolor, sit amet consectetur adipisicing elit. Eligendi nobis adipisci ex quibusdam odio sed dolor illo eius. Quidem laboriosam minus aliquid nulla quia excepturi ut beatae, fugiat voluptatum facere!

Ejemplo de uso

HTML 

    

        Lorem ipsum dolor sit amet consectetur adipisicing elit. 
        Obcaecati sint a sapiente architecto amet labore, 
        non atque culpa quos nam beatae? Qui iste molestias corrupti!