## Blockquote  
Use the Blockquote to display quotes with optional cite and icon.  
Category: Typography  

### Simple Example

A simple blockquote can be created by just passing the main message and `cite` prop.

```python
import dash_mantine_components as dmc

component = dmc.Blockquote(
    "Everything we hear is an opinion, not a fact. Everything we see is a perspective, not the truth.",
    cite="- Marcus Aurelius , Meditations",
)
```
### With Icon

Icons can be provided via `icon` prop and its color can be customized using the `color` prop.
Here's an example using [DashIconify](/dash-iconify).

```python
import dash_mantine_components as dmc
from dash_iconify import DashIconify

component = dmc.Blockquote(
    "Doth mother know you weareth her drapes?",
    cite="- Ironman",
    icon=DashIconify(icon="codicon:flame", width=30),
    color="red",
)
```
### Styles API


This component supports Styles API. With Styles API, you can customize styles of any inner element. See the Styling and Theming sections of these docs for more information.


| Name   | Static selector           | Description        |
|:-------|:--------------------------|:-------------------|
| root   | .mantine-Blockquote-root  | Root element       |
| icon   | .mantine-Blockquote-icon  | Icon wrapper       |
| cite   | .mantine-Blockquote-cite  | Cite element       |


### Keyword Arguments
#### Blockquote

- children (a list of or a singular dash component, string or number; optional):
    Content.

- id (string; optional):
    Unique ID to identify this component in Dash callbacks.

- aria-* (string; optional):
    Wild card aria attributes.

- attributes (boolean | number | string | dict | list; optional):
    Passes attributes to inner elements of a component.  See Styles
    API docs.

- cite (a list of or a singular dash component, string or number; optional):
    Reference to a cited quote.

- className (string; optional):
    Class added to the root element, if applicable.

- classNames (dict; optional):
    Adds custom CSS class names to inner elements of a component.  See
    Styles API docs.

- color (optional):
    Key of `theme.colors` or any valid CSS color, `theme.primaryColor`
    by default.

- darkHidden (boolean; optional):
    Determines whether component should be hidden in dark color scheme
    with `display: none`.

- data-* (string; optional):
    Wild card data attributes.

- hiddenFrom (string; optional):
    Breakpoint above which the component is hidden with `display:
    none`.

- icon (a list of or a singular dash component, string or number; optional):
    Blockquote icon, displayed on the top left.

- iconSize (string | number; optional):
    Controls icon `width` and `height`, numbers are converted to rem,
    `40` by default.

- lightHidden (boolean; optional):
    Determines whether component should be hidden in light color
    scheme with `display: none`.

- loading_state (dict; optional):
    Object that holds the loading state object coming from
    dash-renderer. For use with dash<3.

    `loading_state` is a dict with keys:

- mod (string | dict | list of string | dicts; optional):
    Element modifiers transformed into `data-` attributes. For
    example: "xl" or {"data-size": "xl"}. Can also be a list of
    strings or dicts for multiple modifiers. Falsy values are removed.

- radius (number; optional):
    Key of `theme.radius` or any valid CSS value to set
    `border-radius`, `theme.defaultRadius` by default.

- styles (boolean | number | string | dict | list; optional):
    Adds inline styles directly to inner elements of a component.  See
    Styles API docs.

- tabIndex (number; optional):
    tab-index.

- variant (string; optional):
    variant.

- visibleFrom (string; optional):
    Breakpoint below which the component is hidden with `display:
    none`.