Skip to main content

Block quote

Information: Documentation incomplete

This component still requires documentation.

Use the block quote component to display a quotation from an external source.

Examples

Default

Open example in a new window
View HTML 
<figure class="uhb-c-block-quote">
  <div class="uhb-c-block-quote__content">
    <blockquote class="uhb-c-block-quote__quote">
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean pharetra a lacus id ullamcorper.</p>
    </blockquote>
    <figcaption class="uhb-c-block-quote__source">Quote source</figcaption>
  </div>
</figure>

Float left

Open example in a new window
View HTML 
<figure class="uhb-c-block-quote uhb-c-block-quote--left">
  <div class="uhb-c-block-quote__content">
    <blockquote class="uhb-c-block-quote__quote">
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean pharetra a lacus id ullamcorper.</p>
    </blockquote>
    <figcaption class="uhb-c-block-quote__source">Quote source</figcaption>
  </div>
</figure>

Float right

Open example in a new window
View HTML 
<figure class="uhb-c-block-quote uhb-c-block-quote--right">
  <div class="uhb-c-block-quote__content">
    <blockquote class="uhb-c-block-quote__quote">
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean pharetra a lacus id ullamcorper.</p>
    </blockquote>
    <figcaption class="uhb-c-block-quote__source">Quote source</figcaption>
  </div>
</figure>