The Quote (or Block Quote) tool adds a personalised touch to your content, letting you create text content that stands out and attracts attention.

You can use it to call out inspiring quotes, present quotable feedback from participants, provide verbatim content from a source, or even create alerts and notifications.

🖼️ Examples

Here's some examples of how you can configure the Quotes tool:

This example shows a 'Quote Bubble' style, with the text 'centred' and 'coloured' option enabled to mak it stand out.

This is the 'Border Top and Bottom' style using the 'Large' font size option. No source is added to create an alert instead of a standard quote.

This is the 'Quotation Marks' style using the 'medium' font size option. The designed quotation marks draw attention and help personalise content.

This is the 'Border Top and Bottom with Quotation Marks style which combines elements of the previous two styles.

This is the 'Vertical Line' style using 'right' aligned text. The width is set to 'large' instead of 'auto' to stop the content from spanning the entire content area, making it easier to read.

This is the 'Verticle Line with background' style which adds a background to the previous example to give it more of a blocked appearance. We've added an emoji (from this cool emoji keyboard) and centred the text to create an attractive alert.

⚙️Settings


Basic

  • Quote - add main text for the Quote block.
  • Source - add an Author or Source of the quote.


Display

  • Style - sets the display style of the quote. You have the option to choose between several styles, including:
    • Border
    • Border Top & Bottom
    • Border Top & Bottom (with quotation mark)
    • Inline Background
    • Quote Bubble
    • Quotation Marks
    • Vertical Line
    • Vertical Line (with background)
  • Font Size - sets the font size of the text content. You have the option to choose between 'normal', 'medium' and 'large'.
  • Font Weight - sets the font-weight of the text content. You have the option to choose between 'normal', 'medium' and 'large'.
  • Alignment - sets the alignment of the text content. You have the option to choose between 'normal', 'semi-bold' and 'bold'.
  • Colour - sets whether the quote design elements will be colourised or use a neutral, grey tone. You have the option to choose between 'colour', which automatically applies the colours of your site's design theme, and 'greyscale'.
  • Block Width - sets the maximum width of the Quote block. You can choose between 'medium', 'large' and 'auto'.

🎯 Key Actions

  • Under the Basic tab, you can add a source or author to your quote.
  • Under the Display tab, select the Style drop-down list.
  • Select the display style of your quote.
  • Once complete, select the blue Save button.
  • Under the Display tab, select the Font Size drop-down list.
  • Select the font size of your quote.
  • Once complete, select the blue Save button.
  • Under the Display tab, select the Font Weight drop-down list.
  • Select the font weight of your quote.
  • Once complete, select the blue Save button.
  • Under the Display tab, select the Alignment drop-down list.
  • Select the alignment of your quote.
  • Once complete, select the blue Save button.
  • Under the Display tab, select the Colour drop-down list.
  • Select whether your quote will be in grey scale or colour.
  • Once complete, select the blue Save button.
  • Under the Display tab, select the Block Width drop-down list.
  • Select the block width of your quote.
  • Once complete, select the blue Save button.