Blockquotes

A blockquote element rendered using standard markdown blockquote syntax > and alternative shortcode {{< blockquote >}}.

Features#

• Supports standard Markdown blockquote syntax > and alternative shortcode {{< blockquote >}}.
• Supports GitHub Flavored Markdown (GFM) alert syntax > [!TYPE] for styled alert boxes with an icon.
• Supports author and source attribution via author and source attributes.
• Supports a cite URL used both as the <blockquote cite="..."> attribute and as the href for the source link.
• Supports preset style variation for contextual theming of regular blockquotes.
• Allows adding custom CSS classes via the class attribute.

Syntax#

Basic blockquote syntax:

> Blockquote text here.
{author="Author Name" cite="https://example.com" source="Source Title" variation="accent"}

{{% blockquote
        author="Author Name"
        cite="https://example.com"
        source="Source Title"
        variation="accent"
%}}

Alert blockquote syntax:

> [!NOTE]
> This is a note.

{{% blockquote type="alert" variation="note" %}}
This is a note.
{{% /blockquote %}}

Parameters#

type (shortcode only)

(optional) Set to "alert" to render an alert box with a variation icon and an i18n title label.

author (basic blockquote only)

(optional) The name of the person being quoted. Displayed in the <figcaption> below the blockquote.

source (basic blockquote only)

(optional) The title of the work being cited. Displayed as a linked <cite> element if cite is also set.

cite (basic blockquote only)

(optional) A URL used as the <blockquote cite="..."> attribute and as the href for the source link when source is set.

variation

(optional) Applies a preset color theme to the blockquote. Available values:

• accent — styled with the site accent color (default themed)
• info — blue
• note — yellow
• tip — cyan
• warning — orange
• important — purple
• caution — red

class

(optional) One or more CSS classes to apply to the wrapping <figure> element (default: fr-blockquote).

Theming#

Regular blockquotes use:

• --color-accent for the left border color
• --color-surface for the background fill

{
  :root {
    // ...
    --color-accent: #01827c;
    --color-surface: color-mix(in srgb, var(--color-accent) 20%, transparent);
    // ...
  }

  @media (prefers-color-scheme: dark) {
    :root {
      // ...
      --color-accent: #00fff2;
      --color-surface: color-mix(in srgb, var(--color-accent) 20%, transparent);
      // ...
    }
  }
}

Variation-styled blockquotes (both regular and alert) use per-variation tokens:

• --color-surface-{variation} for background
• --color-text-{variation} for text color
• --color-border-{variation} for border color

Refer to the Theme Customization guide for guidance on how to customize these properties for your site.

Examples#

Example 1: Basic Blockquote#

> The quick brown fox jumps over the lazy dog.

{{% blockquote %}}
The quick brown fox jumps over the lazy dog.
{{% /blockquote %}}

Example 2: Blockquote with Author Attribution#

> Be yourself; everyone else is already taken.
{author="Oscar Wilde"}

{{% blockquote author="Oscar Wilde" %}}
Be yourself; everyone else is already taken.
{{% /blockquote %}}

Example 3: Blockquote with Author, Source and Cite URL#

> Two things are infinite: the universe and human stupidity; and I'm not sure about the universe.
{author="Albert Einstein" source="Quote Investigator" cite="https://quoteinvestigator.com/2010/05/04/universe-einstein/"}

{{% blockquote
        author="Albert Einstein"
        cite="https://quoteinvestigator.com/2010/05/04/universe-einstein/"
        source="Quote Investigator"
%}}
Two things are infinite: the universe and human stupidity; and I'm not sure about the universe.
{{% /blockquote %}}

Example 4: Styled Blockquote with Variation#

> This blockquote uses the accent variation for contextual emphasis.
{variation="info"}

{{% blockquote variation="info" %}}
This blockquote uses the accent variation for contextual emphasis.
{{% /blockquote %}}

Example 5: Alert Blockquote with variation#

> [!NOTE]
> This is an Alert blockquote using the ++note++ variation.

{{% blockquote type="alert" variation="note" %}}
This is an Alert blockquote using the ++note++ variation.
{{% /blockquote %}}

Example 6: Alert Blockquote with Custom Title#

> [!NOTE] Custom Alert Title
> Highlights information that users should take into account, even when skimming.

{{% blockquote type="alert" variation="note" title="Custom Alert Title" %}}
Highlights information that users should take into account, even when skimming.
{{% /blockquote %}}