# Blockquote

A quotation from another source, set apart from the surrounding text by an indent and a large opening quotation mark.

```tsx
// demo.tsx
import {Blockquote, Text} from '@earendil-works/elanor-react';

export default function BlockquoteDemo() {
  return (
    <Blockquote>
      <Text>
        Projects you archive stay readable for everyone in the workspace, but nobody can change them
        until you restore them.
      </Text>
    </Blockquote>
  );
}
```

## Usage

```tsx
import {Blockquote, Text} from '@earendil-works/elanor-react';

<Blockquote>
  <Text />
</Blockquote>;
```

Blockquote renders a `blockquote` indented by `semantic.dimension.space.padding.xxLarge` (24px), with an opening quotation mark in `semantic.color.icon.secondary` hanging in the indent, level with the first line. The mark is decorative and hidden from screen readers. Blockquote sets no type of its own: put [Text](/components/text.md) or other blocks inside.

## Source

Name the source in the text around the quotation, or in a `figcaption` when the quotation sits in a `figure`. Put a source URL in `cite`; browsers don't show it.

## API

### `Blockquote`

A quotation set apart from the surrounding text. Put `Text` and other blocks inside.

Renders `<blockquote>`. Accepts its HTML attributes and `ref`.