Citas

Las citas se usan para resaltar frases o información importante

Contenido

Citas destacadas

Se puede aplicar la clase .pullquote al elemento blockquote para aplicar los estilos de cita destacada.

Citas destacadas

Esto es una cita destacada
<blockquote class="pullquote">Esto es una cita destacada</blockquote>

Citas en línea

Se puede aplicar la clase .quote a cualquier elemento en línea para aplicar los estilos de cita en línea.

Citas en línea

Esto es un parrafo con una cita en línea

<p>Esto es un parrafo con una <span class="quote">cita en línea</span></p>

Citas en línea secundarias

Se puede aplicar la clase .quote a cualquier elemento. La clase .quote añade las comillas dobles de apertura (“) y cierre (”) al texto a citar de manera automática. Se puede combinar con elementos inline y estilos de fuente alternativa como .font-alternate, para mayor flexibilidad.

Para citas en cursiva, se aplica la clase .quote al elemento em para que las comillas dobles también se muestren en cursiva.

Citas en línea secundarias

  • Esto es una cita cursiva con fuente alternativa

  • Esto es un cita con fuente alternativa

  • Esto es una cita con fuente normal
<ul class="list-group list-group--thin">
  <li class="list-group__item">
    <p class="h1 font-alternate"><em class="quote">Esto es una cita cursiva con fuente alternativa</em></p>
  </li>
  <li class="list-group__item">
    <p class="h2 font-alternate quote">Esto es un cita con fuente alternativa</p>
  </li>
  <li class="list-group__item">
    <q class="h3">Esto es una cita con fuente normal</q>
  </li>
</ul>

Citas en bloque

Se puede aplicar la clase .blockquote al elemento blockquote para aplicar los estilos de cita a nivel de bloque. Dichos bloques se podrán alinear a la derecha o la izquierda añadiendo las clases .blockquote--right y .blockquote--left respectivamente. Se puede ajustar el tamaño del blockquote con los modificadores de columna col-*-*

Citas en bloque

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis tempus semper est, euismod sagittis lacuspharetra quis. Sed porta consectetur auctor. Aenean dictum dignissim faucibus. Sed et pellentesque dui, id pellentesque urna. Donec in vehicula felis, eget feugiat eros. Pellentesque eget imperdiet odio. Etiam interdum iaculis neque eget rutrum. Sed porta massa quam, et pretium enim finibus fermentum. Phasellus lectus ultricies, vehicula felis eu, tincidunt turpis. Praesent sed lectus nec orci rutrum luctus. Duis sed velit sollicitudin, venenatis elit eget, tristique elit. Aenean aliquam eget urna sit amet ultricies. Aenean facilisis euismod massa, ut viverra orci molestie ullamcorper. Cras facilisis ante nibh, nec porta nulla pulvinar in. Vivamus metus neque, ultrices vel vestibulum ac, iaculis vitae leo.

Morbi varius, neque et mattis lobortis, ex sem convallis velit, sed egestas leo massa quis ipsum.

Vivamus venenatis molestie velit, ut euismod ex mollis sollicitudin. Nulla vel quam eget massa ullamcorpereleifend nec et libero. Sed tincidunt, quam eu ultrices commodo, diam augue dapibus nunc, sed interdum nulla nisi id quam. Nunc fringilla, mauris sed convallis congue, nulla mauris gravida lacus, non pretium nisi ante vitae nisl. Nam maximus mi non massa vulputate, vel sollicitudin odio viverra. Cras gravida enim eget mi tempus, venenatis porttitor erat congue. Vivamus sed venenatis magna. Curabitur sed metus in est ultricies molestie. Suspendisse eget justo ac nisi vestibulum varius et nec sem. Morbi varius, neque et mattis lobortis, ex sem convallis velit, sed egestas leo massa quis ipsum. Etiam non odio erat. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc a hendrerit sapien. Phasellus bibendum tristique ullamcorper. In ante neque, condimentum in purus nec, semper luctus nunc.

Morbi varius, neque et mattis lobortis, ex sem convallis velit, sed egestas leo massa quis ipsum.

Aenean varius consequat nisl, a consectetur mauris. Fusce porttitor nisi sed turpis viverra aliquet id acnunc. Quisque sit amet molestie eros. Praesent vestibulum risus et odio scelerisque maximus. Morbi euismod ipsum fermentum diam porta, non convallis est rutrum. Duis eget est tellus. Sed posuere, metus quis volutpat iaculis, ex est pretium leo, ac euismod risus velit vel nulla. Vivamus nibh orci, vulputate at semper quis, gravida sit amet lorem. Sed hendrerit urna quis felis ultrices pretium. Curabitur pharetra, nibh quis feugiat dapibus, arcu nulla facilisis lorem, a posuere urna nunc at dolor. Aenean a efficitur nibh. Nunc rutrum ultrices tortor, sit amet maximus lectus venenatis ut. Nunc vel augue sapien. Nam lacinia lacinia dolor, a vulputate nibh ullamcorper eget. Etiam efficitur, nibh non gravida imperdiet, arcu turpis sollicitudin nunc, at molestie nibh ante vel diam. Nunc mattis enim vitae iaculis efficitur.

Morbi varius, neque et mattis lobortis, ex sem convallis velit, sed egestas leo massa quis ipsum

Aenean varius consequat nisl, a consectetur mauris. Fusce porttitor nisi sed turpis viverra aliquet id acnunc. Quisque sit amet molestie eros. Praesent vestibulum risus et odio scelerisque maximus. Morbi euismod ipsum fermentum diam porta, non convallis est rutrum. Duis eget est tellus. Sed posuere, metus quis volutpat iaculis, ex est pretium leo, ac euismod risus velit vel nulla. Vivamus nibh orci, vulputate at semper quis, gravida sit amet lorem. Sed hendrerit urna quis felis ultrices pretium. Curabitur pharetra, nibh quis feugiat dapibus, arcu nulla facilisis lorem, a posuere urna nunc at dolor. Aenean a efficitur nibh. Nunc rutrum ultrices tortor, sit amet maximus lectus venenatis ut. Nunc vel augue sapien. Nam lacinia lacinia dolor, a vulputate nibh ullamcorper eget. Etiam efficitur, nibh non gravida imperdiet, arcu turpis sollicitudin nunc, at molestie nibh ante vel diam. Nunc mattis enim vitae iaculis efficitur.

<article class="row">
  <p class="text-justify">
    Lorem ipsum dolor sit amet...
  </p>
  <blockquote class="blockquote col-xs-12">Morbi varius...</blockquote>
  <p class="text-justify">
    Lorem ipsum dolor sit amet...
  </p>
  <blockquote class="blockquote blockquote--right col-xs-12 col-sm-12 col-md-5 col-lg-6">Morbi varius...</blockquote>
  <p class="text-justify">
    Lorem ipsum dolor sit amet...
  </p>
  <blockquote class="blockquote blockquote--left col-xs-12 col-sm-12 col-md-6 col-lg-4">Morbi varius...</blockquote>
  <p class="text-justify">
    Lorem ipsum dolor sit amet...
  </p>
</article>
Subir