Skip to main content

Blockquote

Default

To write a quote FlatifyCSS gives two types of <blockquote>s, first one is a default blockquote:

No icon

To hide blockquote icon add .no-icon to the <blockquote> element.

index.html
<blockquote>
  <p>
    Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec odio. Quisque volutpat mattis eros. Nullam malesuada
    erat ut turpis. Suspendisse urna nibh, viverra non, semper suscipit, posuere a, pede.
  </p>
  <cite>John Doe</cite>
</blockquote>

<blockquote class="no-icon">
  <p>
    Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec odio. Quisque volutpat mattis eros. Nullam malesuada
    erat ut turpis. Suspendisse urna nibh, viverra non, semper suscipit, posuere a, pede.
  </p>
  <cite>John Doe</cite>
</blockquote>

Large

To have a large blockquote add .large to the blockquote.

index.html
<blockquote class="large">...</blockquote>

Customization

Blockquotes can have different accent colors or use color setter classes.

index.html
<blockquote class="my-blockquote">...</blockquote>

<blockquote class="style-green">...</blockquote>

<blockquote class="large style-red">...</blockquote>
style.css
.my-blockquote {
  --flatify__blockquote-accent-color: #ff9600;
}

Change quote icon

It is possible to change the blockquote icon with both _config.scss and CSS variables.

Inside _config.scss find $BLOCKQUOTE_ICON and set svg of customized icon with this format:

_config.scss
$BLOCKQUOTE_ICON: url("data:image/svg+xml; utf8, YOUR SVG CODE HERE");

or

change its CSS variable:

style.css
--flatify__blockquote-icon: url("data:image/svg+xml; utf8, YOUR SVG CODE HERE");