# Quote

The "Quote" style allows you to add a visually styled quotation to the page.

Use the "Quote" to highlight a piece of content and provide a reference point. For example, customer testimonials, statistics or data, or quotes from interviews.

### Add a Quote

1. Create a "Content" component and add content.
2. Highlight the content you want to style as the quote, including the reference content.
3. Select the "Block quote" icon in the CK Editor.

<div align="left"><figure><img src="/files/RcwL1bhFi3qITbuV2qS9" alt="" width="375"><figcaption></figcaption></figure></div>

2. Then highlight only the reference content.
3. Open the "Styles" select box and select "Small".

<div align="left"><figure><img src="/files/AhKuSZHq3sSODyDi7Qhw" alt="" width="375"><figcaption></figcaption></figure></div>

### Outcome

<figure><img src="/files/06okF1OSY9iD6flNXnll" alt=""><figcaption></figcaption></figure>

### Styling

<div align="left"><figure><img src="/files/pKXURTHnZDKPIAg8dx4S" alt="" width="375"><figcaption></figcaption></figure></div>

#### Theme

Every component in CivicTheme, such as the "Content" component, can be shown as a `Light` or `Dark` theme component variant. This allows you to build more engaging landing pages with a mix of light and dark components.

#### Background

Setting a "Background" on a component can make the component visually stand-out on the page. Check the "Background" checkbox to apply a background to the component.

**Tip**

If you want to create a striking stand alone "Quote" with a background to really separate it from other content, you need to put the quote and reference content in its own "Content" component, surrounded by other "Content" components.

The example below shows three separate "Content" components. The first and third components use the `Light` theme. The second component, housing the "Quote" "uses the `Dark` theme, with the Background checkbox filled.

<figure><img src="/files/watty2XmVA62IIUp8jNZ" alt=""><figcaption></figcaption></figure>

The example below shows three separate Content components. All three components use the `Light` theme, but the component housing the Quote has the Background checkbox filled.

<figure><img src="/files/erLK2KuY8NJBlGMjwd9Y" alt=""><figcaption></figcaption></figure>

#### Vertical spacing

"Vertical spacing" adds space before, after or both before and after a component. It is used to visually separate a component from other components when they are vertically stacked on the page. Use "Vertical spacing" dropdown to chose one of the appropriate values.


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://docs.civictheme.io/content-authoring/components/content/quote.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.