Quote

This module helps to work with quotes.

Usage #

Use the quote class to create quotes using the blockquote tag.

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

— Author


<blockquote class="quote">
    <p>...</p>
    <p class="quote-caption">...</p>
</blockquote>

This also works for more complex structures using the figure tag.

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

— Author


<figure class="quote">
    <blockquote>
        <p>...</p>
    </blockquote>
    <figcaption class="quote-caption">...</figcaption>
</figure>

Use the quote-light modifier on the dark backgrounds.

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

— Author


<blockquote class="quote quote-light">
    <p>...</p>
    <p class="quote-caption">...</p>
</blockquote>

Variables #

Here are the CSS variables used in the module. Setting them allows you to change the appearance and parameters of the module.


// =Quote
// colors
--quote-color: var(--text-default);
--quote-background-color: transparent;

// params
--quote-font-size: 18px;
--quote-font-style: italic;
--quote-font-weight: normal;
--quote-line-height: var(--body-text-line);
--quote-padding-x: 0;
--quote-padding-y: 0;
--quote-space: 0.25em;
--quote-border-radius: 0;

// =QuoteCaption
// colors
--quote-caption-color: var(--text-default);
--quote-caption-background-color: transparent;

// params
--quote-caption-font-size: 14px;
--quote-caption-font-style: italic;
--quote-caption-font-weight: normal;
--quote-caption-line-height: var(--body-text-line);