Skip to main content

Pull quote

Information: Documentation incomplete

This component still requires documentation.

The pull quote component emphasises an excert from the main content.

Examples

Default

Open example in a new window
View HTML 
<p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor
  quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean
  ultricies mi vitae est. Mauris placerat eleifend leo.</p>
<div class="uhb-c-pull-quote" role="presentation" aria-hidden="true">
  <p>Donec eu libero sit amet quam egestas semper.</p>
</div>

Float left

Open example in a new window
View HTML 
<p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor
  quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean
  ultricies mi vitae est. Mauris placerat eleifend leo.</p>
<div class="uhb-c-pull-quote uhb-c-pull-quote--left" role="presentation" aria-hidden="true">
  <p>Donec eu libero sit amet quam egestas semper.</p>
</div>

Float right

Open example in a new window
View HTML 
<p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor
  quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean
  ultricies mi vitae est. Mauris placerat eleifend leo.</p>
<div class="uhb-c-pull-quote uhb-c-pull-quote--right" role="presentation" aria-hidden="true">
  <p>Donec eu libero sit amet quam egestas semper.</p>
</div>