Quotes are a useful way for your to add emphasis to a specific block of text. Here are some examples of the built in styling that you can use to make your content easier to scan.

Blockquotes:

“blockquote is a large quotation. The content of a blockquote element must include block-level elements such as headings, lists, paragraphs or div’s. This element can also have an optional attribute cite that specifies the location (in the form of a URI) where the quote has come from. - Smashing Magazine

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aliquam congue posuere enim. Phasellus turpis ante, tempus non, facilisis eget, bibendum id, eros.

Code:{code}

<p><span>“</span>blockquote is a large quotation. The content of a blockquote element must include block-level elements such as headings, lists, paragraphs or div’s. This element can also have an optional attribute cite that specifies the location (in the form of a URI) where the quote has come from. - Smashing Magazine</p>

{/code}

Example 1: Default Blockquote

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aliquam congue posuere enim. Phasellus turpis ante, tempus non, facilisis eget, bibendum id, eros.

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aliquam congue posuere enim. Phasellus turpis ante, tempus non, facilisis eget, bibendum id, eros.

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aliquam congue posuere enim. Phasellus turpis ante, tempus non, facilisis eget, bibendum id, eros.

Code:{code}

<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aliquam congue posuere enim. Phasellus turpis ante, tempus non, facilisis eget, bibendum id, eros.</p>

{/code}

Example 2: Blockquote with "quote" class

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aliquam congue posuere enim. Phasellus turpis ante, tempus non, facilisis eget, bibendum id, eros.

“Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aliquam congue posuere enim. Phasellus turpis ante, tempus non, facilisis eget, bibendum id, eros.

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aliquam congue posuere enim. Phasellus turpis ante, tempus non, facilisis eget, bibendum id, eros.

Code:{code}

<p><span>“</span>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aliquam congue posuere enim. Phasellus turpis ante, tempus non, facilisis eget, bibendum id, eros.</p>

{/code}

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aliquam congue posuere enim. Phasellus turpis ante, tempus non, facilisis eget, bibendum id, eros.

“Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aliquam congue posuere enim. Phasellus turpis ante, tempus non, facilisis eget, bibendum id, eros.

Andrew Lloyd Webber

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aliquam congue posuere enim. Phasellus turpis ante, tempus non, facilisis eget, bibendum id, eros.

Code:{code}

<p><span>“</span>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aliquam congue posuere enim. Phasellus turpis ante, tempus non, facilisis eget, bibendum id, eros.</p> <p class="cite">Andrew Lloyd Webber</p>

{/code}

Example 3: Blockquote with "box + style" class

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aliquam congue posuere enim. Phasellus turpis ante, tempus non, facilisis eget, bibendum id, eros.

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aliquam congue posuere enim. Phasellus turpis ante, tempus non, facilisis eget, bibendum id, eros.

Code:{code}

{/code}

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aliquam congue posuere enim. Phasellus turpis ante, tempus non, facilisis eget, bibendum id, eros.

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aliquam congue posuere enim. Phasellus turpis ante, tempus non, facilisis eget, bibendum id, eros.

Code:{code}

{/code}

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aliquam congue posuere enim. Phasellus turpis ante, tempus non, facilisis eget, bibendum id, eros.

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aliquam congue posuere enim. Phasellus turpis ante, tempus non, facilisis eget, bibendum id, eros.

Code:{code}

{/code}

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aliquam congue posuere enim. Phasellus turpis ante, tempus non, facilisis eget, bibendum id, eros.

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aliquam congue posuere enim. Phasellus turpis ante, tempus non, facilisis eget, bibendum id, eros.

Code:{code}

{/code}

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aliquam congue posuere enim. Phasellus turpis ante, tempus non, facilisis eget, bibendum id, eros.

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aliquam congue posuere enim. Phasellus turpis ante, tempus non, facilisis eget, bibendum id, eros.

Code:{code}

{/code}

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aliquam congue posuere enim. Phasellus turpis ante, tempus non, facilisis eget, bibendum id, eros.

---

Example 4: Left aligned pullquote

Aliquam congue posuere enim. Phasellus turpis ante, tempus non, facilisis eget, bibendum id, eros.

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aliquam congue posuere enim. Phasellus turpis ante, tempus non, facilisis eget, bibendum id, eros.

Consectetuer adipiscing elit. Aliquam congue posuere enim. Phasellus turpis ante, tempus non, facilisis eget, bibendum id, eros.

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aliquam congue posuere enim. Phasellus turpis ante, tempus non, facilisis eget, bibendum id, eros. Consectetuer adipiscing elit. Aliquam congue posuere enim. Consectetuer adipiscing elit. Aliquam congue posuere enim. Phasellus turpis ante, tempus non, facilisis eget, bibendum id, eros. Lorem ipsum dolor sit amet, consectetuer adipiscing elit.

Code:{code}

<p>Aliquam congue posuere enim. Phasellus turpis ante, tempus non, facilisis eget, bibendum id, eros.</p>

{/code}

---

Example 5: Right aligned pullquote

Aliquam congue posuere enim. Phasellus turpis ante, tempus non, facilisis eget, bibendum id, eros.

Andrew Lloyd Webber

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aliquam congue posuere enim. Phasellus turpis ante, tempus non, facilisis eget, bibendum id, eros.

Consectetuer adipiscing elit. Aliquam congue posuere enim. Phasellus turpis ante, tempus non, facilisis eget, bibendum id, eros.

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aliquam congue posuere enim. Phasellus turpis ante, tempus non, facilisis eget, bibendum id, eros.

Consectetuer adipiscing elit. Aliquam congue posuere enim. Phasellus turpis ante, tempus non, facilisis eget, bibendum id, eros. Lorem ipsum dolor sit amet, consectetuer adipiscing elit.

Code:{code}

<p>Aliquam congue posuere enim. Phasellus turpis ante, tempus non, facilisis eget, bibendum id, eros.</p> <p class="cite">Andrew Lloyd Webber</p>

{/code}

---

Example 6: Left aligned pullquote with style1

Aliquam congue posuere enim. Phasellus turpis ante, tempus non, facilisis eget, bibendum id, eros.

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aliquam congue posuere enim. Phasellus turpis ante, tempus non, facilisis eget, bibendum id, eros.

Consectetuer adipiscing elit. Aliquam congue posuere enim. Phasellus turpis ante, tempus non, facilisis eget, bibendum id, eros.

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aliquam congue posuere enim. Phasellus turpis ante, tempus non, facilisis eget, bibendum id, eros.

Consectetuer adipiscing elit. Aliquam congue posuere enim. Phasellus turpis ante, tempus non, facilisis eget, bibendum id, eros. Lorem ipsum dolor sit amet, consectetuer adipiscing elit.

Code:{code}

<p>Aliquam congue posuere enim. Phasellus turpis ante, tempus non, facilisis eget, bibendum id, eros.</p>

{/code}

---

Example 7: Right aligned pullquote with style2

Aliquam congue posuere enim. Phasellus turpis ante, tempus non, facilisis eget, bibendum id, eros.

Andrew Lloyd Webber

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aliquam congue posuere enim. Phasellus turpis ante, tempus non, facilisis eget, bibendum id, eros.

Consectetuer adipiscing elit. Aliquam congue posuere enim. Phasellus turpis ante, tempus non, facilisis eget, bibendum id, eros.

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aliquam congue posuere enim. Phasellus turpis ante, tempus non, facilisis eget, bibendum id, eros.

Consectetuer adipiscing elit. Aliquam congue posuere enim. Phasellus turpis ante, tempus non, facilisis eget, bibendum id, eros. Lorem ipsum dolor sit amet, consectetuer adipiscing elit.

Code:{code}

<p>Aliquam congue posuere enim. Phasellus turpis ante, tempus non, facilisis eget, bibendum id, eros.</p> <p class="cite">Andrew Lloyd Webber</p>

{/code}

---

Example 8: Left aligned pullquote with style3

Aliquam congue posuere enim. Phasellus turpis ante, tempus non, facilisis eget, bibendum id, eros.

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aliquam congue posuere enim. Phasellus turpis ante, tempus non, facilisis eget, bibendum id, eros.

Consectetuer adipiscing elit. Aliquam congue posuere enim. Phasellus turpis ante, tempus non, facilisis eget, bibendum id, eros.

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aliquam congue posuere enim. Phasellus turpis ante, tempus non, facilisis eget, bibendum id, eros.

Consectetuer adipiscing elit. Aliquam congue posuere enim. Phasellus turpis ante, tempus non, facilisis eget, bibendum id, eros. Lorem ipsum dolor sit amet, consectetuer adipiscing elit.

Code:{code}

<p>Aliquam congue posuere enim. Phasellus turpis ante, tempus non, facilisis eget, bibendum id, eros.</p>

{/code}

---

Example 9: Right aligned pullquote with style4

Aliquam congue posuere enim. Phasellus turpis ante, tempus non, facilisis eget, bibendum id, eros.

Andrew Lloyd Webber

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aliquam congue posuere enim. Phasellus turpis ante, tempus non, facilisis eget, bibendum id, eros.

Consectetuer adipiscing elit. Aliquam congue posuere enim. Phasellus turpis ante, tempus non, facilisis eget, bibendum id, eros.

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aliquam congue posuere enim. Phasellus turpis ante, tempus non, facilisis eget, bibendum id, eros.

Consectetuer adipiscing elit. Aliquam congue posuere enim. Phasellus turpis ante, tempus non, facilisis eget, bibendum id, eros. Lorem ipsum dolor sit amet, consectetuer adipiscing elit.

Code:{code}

<p>Aliquam congue posuere enim. Phasellus turpis ante, tempus non, facilisis eget, bibendum id, eros.</p> <p class="cite">Andrew Lloyd Webber</p>

{/code}

---

Example 10: Left aligned pullquote with style5

Aliquam congue posuere enim. Phasellus turpis ante, tempus non, facilisis eget, bibendum id, eros.

Andrew Lloyd Webber

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aliquam congue posuere enim. Phasellus turpis ante, tempus non, facilisis eget, bibendum id, eros.

Consectetuer adipiscing elit. Aliquam congue posuere enim. Phasellus turpis ante, tempus non, facilisis eget, bibendum id, eros.

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aliquam congue posuere enim. Phasellus turpis ante, tempus non, facilisis eget, bibendum id, eros.

Consectetuer adipiscing elit. Aliquam congue posuere enim. Phasellus turpis ante, tempus non, facilisis eget, bibendum id, eros. Lorem ipsum dolor sit amet, consectetuer adipiscing elit.

Code:{code}

<p>Aliquam congue posuere enim. Phasellus turpis ante, tempus non, facilisis eget, bibendum id, eros.</p> <p class="cite">Andrew Lloyd Webber</p>

{/code}

---

Inline Quotes:

Often the words I have a dream are sounded out against the backdrop of the city.

Code: {code}<p>Often the words <q>I have a dream</q> are sounded out against the backdrop of the city.</p>{/code}