Blockquotes

Overview

Four options are provided for blockquotes:

Setting the color of the left border with the fc-border-{color} class defined in colors.
Setting the background color with the fc-bg-{color} class defined in colors.
Adding decorative quotes with the fc-quote class. The color of these will match the border
Adding a quote attribution in an element with the fc-source class.

Base Features

Some base styling comes out of the box by using the <blockquote> element.

Adding Quotations

You can add decorative quotation marks with the fc-quote class.
The color of the quotations will be the same as the border

<blockquote class="fc-quote">
  Blockquote with Quotes
</blockquote>

Adding Attribution

You can add an attribution to your blockquote with the fc-source class on a sub element. TakenFlyght

<blockquote>
  What a neat Quote
  <span class="fc-source">Author</span>
</blockquote>

Adding Color

Changing the Border Color

By adding the fc-border-{color} class, defined in colors, you can set the left border Color to any default theme color. If fc-quote is also applied, the color of the quotations will also reflect the border color.

Blockquote with fc-border-primary

Blockquote with fc-border-secondary-light

Blockquote with fc-border-success

<blockquote class="fc-border-primary fc-quote">
  Blockquote with fc-border-primary
</blockquote>
<blockquote class="fc-border-secondary-light fc-quote">
  Blockquote with fc-border-secondary-light
</blockquote>
<blockquote class="fc-border-success fc-quote">
  Blockquote with fc-border-success
</blockquote>

Adding a Background Color

The fc-bg-{color} class defined in colors can be used to set the background color of the blockquote. All of the default theme colors are available. You can also set the text color with fc-text-{color} (also defined in the colors documentation) to ensure proper color contrast.

Blockquote with primary-light border and primary background

Blockquote with secondary border and secondary-light background

<blockquote class="fc-border-primary-light fc-bg-primary fc-text-white">
  Blockquote with primary-light border and primary background
</blockquote>
<blockquote class="fc-border-secondary fc-bg-secondary-light">
  Blockquote with secondary border and secondary-light background
</blockquote>

Base Styles

You can use the blockquote tag to separate out text or quotes

Add the quote class to add styled quotations

Or add some attribution for your quote. It's always good to cite your sources! That's for sure!
Caitlin

Color Support

Primary

You can use the blockquote tag to separate out text or quotes

Add the quote class to add styled quotations

You can also set background-colors, but beware color contrast

Light

You can use the blockquote tag to separate out text or quotes

Add the quote class to add styled quotations
Beware color contrast! You're getting flexibility - light styles are not sufficient contrast on a white background

You can also set background-colors, but beware color contrast

Dark

You can use the blockquote tag to separate out text or quotes

Add the quote class to add styled quotations

You can also set background-colors, but beware color contrast

Secondary

You can use the blockquote tag to separate out text or quotes

Add the quote class to add styled quotations

You can also set background-colors, but beware color contrast

Light

You can use the blockquote tag to separate out text or quotes

Add the quote class to add styled quotations
Beware color contrast! You're getting flexibility - light styles are not sufficient contrast on a white background

You can also set background-colors, but beware color contrast

Dark

You can use the blockquote tag to separate out text or quotes

Add the quote class to add styled quotations

You can also set background-colors, but beware color contrast

Success

You can use the blockquote tag to separate out text or quotes

Add the quote class to add styled quotations

You can also set background-colors, but beware color contrast

Light

You can use the blockquote tag to separate out text or quotes

Add the quote class to add styled quotations
Beware color contrast! You're getting flexibility - light styles are not sufficient contrast on a white background

You can also set background-colors, but beware color contrast

Dark

You can use the blockquote tag to separate out text or quotes

Add the quote class to add styled quotations

You can also set background-colors, but beware color contrast

Warn

You can use the blockquote tag to separate out text or quotes

Add the quote class to add styled quotations

You can also set background-colors, but beware color contrast

Light

You can use the blockquote tag to separate out text or quotes

Add the quote class to add styled quotations
Beware color contrast! You're getting flexibility - light styles are not sufficient contrast on a white background

You can also set background-colors, but beware color contrast

Dark

You can use the blockquote tag to separate out text or quotes

Add the quote class to add styled quotations

You can also set background-colors, but beware color contrast

Error

You can use the blockquote tag to separate out text or quotes

Add the quote class to add styled quotations

You can also set background-colors, but beware color contrast

Light

You can use the blockquote tag to separate out text or quotes

Add the quote class to add styled quotations
Beware color contrast! You're getting flexibility - light styles are not sufficient contrast on a white background

You can also set background-colors, but beware color contrast

Dark

You can use the blockquote tag to separate out text or quotes

Add the quote class to add styled quotations

You can also set background-colors, but beware color contrast

Muted

You can use the blockquote tag to separate out text or quotes

Add the quote class to add styled quotations

You can also set background-colors, but beware color contrast

Light

You can use the blockquote tag to separate out text or quotes

Add the quote class to add styled quotations
Beware color contrast! You're getting flexibility - light styles are not sufficient contrast on a white background

You can also set background-colors, but beware color contrast

Dark

You can use the blockquote tag to separate out text or quotes

Add the quote class to add styled quotations

You can also set background-colors, but beware color contrast