Blockquotes

default

Code

{% include_cached blockquote.html content="<p>The power of the Web is in its universality.<br>Access by everyone regardless of disability is an essential aspect.</p><p>Another paragraph. Just for illustration purposes.</p>" source="Tim Berners-Lee, W3C Director and inventor of the World Wide Web" %}

HTML output (DO NOT USE)

<blockquote>
<p>The power of the Web is in its universality.<br>Access by everyone regardless of disability is an essential aspect.</p><p>Another paragraph. Just for illustration purposes.</p>
<cite>Tim Berners-Lee, W3C Director and inventor of the World Wide Web</cite>
</blockquote>

special

Use the class: special

Code

{% include_cached blockquote.html class="special" content="<p>The power of the Web is in its universality.<br>Access by everyone regardless of disability is an essential aspect.</p><p>Another paragraph. Just for illustration purposes.</p>" source="Tim Berners-Lee, W3C Director and inventor of the World Wide Web" %}

HTML output (DO NOT USE)

<blockquote class="special">
<p>The power of the Web is in its universality.<br>Access by everyone regardless of disability is an essential aspect.</p><p>Another paragraph. Just for illustration purposes.</p>
<cite>Tim Berners-Lee, W3C Director and inventor of the World Wide Web</cite>
</blockquote>

Pullquote

Use the class: pull

Code

{% include_cached blockquote.html class="pull" content="<p>I do what I do because it’s right! Because it’s decent! And above all, it’s kind! It’s just that…</p>" source="John Smith, TARDIS Inc." %}

HTML output (DO NOT USE)

<blockquote class="pull">
<p>I do what I do because it’s right! Because it’s decent! And above all, it’s kind! It’s just that…</p>
<cite>John Smith, TARDIS Inc.</cite>
</blockquote>

Pullquote Left

Use the class: pull left

Code

{% include_cached blockquote.html class="pull left" content="<p>I do what I do because it’s right! Because it’s decent! And above all, it’s kind! It’s just that…</p>" source="John Smith, TARDIS Inc." %}

HTML output (DO NOT USE)

<blockquote class="pull left">
<p>I do what I do because it’s right! Because it’s decent! And above all, it’s kind! It’s just that…</p>
<cite>John Smith, TARDIS Inc.</cite>
</blockquote>

Pullquote Right

Use the class: pull right

Code

{% include_cached blockquote.html class="pull right" content="<p>I do what I do because it’s right! Because it’s decent! And above all, it’s kind! It’s just that…</p>" source="John Smith, TARDIS Inc." %}

HTML output (DO NOT USE)

<blockquote class="pull right">
<p>I do what I do because it’s right! Because it’s decent! And above all, it’s kind! It’s just that…</p>
<cite>John Smith, TARDIS Inc.</cite>
</blockquote>

Pullquote Color Alt 1

Use the class: pull alt-1 right

Code

{% include_cached blockquote.html class="pull alt-1 right" content="<p>I do what I do because it’s right! Because it’s decent! And above all, it’s kind! It’s just that…</p>" source="John Smith, TARDIS Inc." %}

HTML output (DO NOT USE)

<blockquote class="pull alt-1 right">
<p>I do what I do because it’s right! Because it’s decent! And above all, it’s kind! It’s just that…</p>
<cite>John Smith, TARDIS Inc.</cite>
</blockquote>

Pullquote Color Alt 2

Use the class: pull alt-2 right

Code

{% include_cached blockquote.html class="pull alt-2 right" content="<p>I do what I do because it’s right! Because it’s decent! And above all, it’s kind! It’s just that…</p>" source="John Smith, TARDIS Inc." %}

HTML output (DO NOT USE)

<blockquote class="pull alt-2 right">
<p>I do what I do because it’s right! Because it’s decent! And above all, it’s kind! It’s just that…</p>
<cite>John Smith, TARDIS Inc.</cite>
</blockquote>

Pullquote Color Alt 3

Use the class: pull alt-3 right

Code

{% include_cached blockquote.html class="pull alt-3 right" content="<p>I do what I do because it’s right! Because it’s decent! And above all, it’s kind! It’s just that…</p>" source="John Smith, TARDIS Inc." %}

HTML output (DO NOT USE)

<blockquote class="pull alt-3 right">
<p>I do what I do because it’s right! Because it’s decent! And above all, it’s kind! It’s just that…</p>
<cite>John Smith, TARDIS Inc.</cite>
</blockquote>

With source link

Add the href attribute to the include call to link the source to the URI of the href attribute.

Code

{% include_cached blockquote.html content="<p>I do what I do because it’s right! Because it’s decent! And above all, it’s kind! It’s just that…</p>" source="John Smith, TARDIS Inc." href="https://example.com" %}

HTML output (DO NOT USE)

<blockquote>
<p>I do what I do because it’s right! Because it’s decent! And above all, it’s kind! It’s just that…</p>
<cite><a href="https://example.com">John Smith, TARDIS Inc.</a></cite>
</blockquote>