# Blockquote

- Page: https://jiguang132.com/resources/astryx/docs/blockquote
- Resource: Astryx (https://jiguang132.com/resources/astryx.md)
- All guides: https://jiguang132.com/resources/astryx/docs.md

A quotation block with a rule on its inline-start edge and secondary text color. Use to highlight quoted content, testimonials, or excerpts. The rule and padding are logical, so they move to the right edge in right-to-left locales.

## Installation

```bash
npm install @astryxdesign/core@0.7.1 @astryxdesign/theme-neutral@0.7.1 @stylexjs/stylex@0.19.0
```

Requires React 19+, base CSS and a Theme provider. See [Setup](/resources/astryx/docs/getting-started).

## Blockquote

A quotation block with a rule on its inline-start edge and secondary text color. Use to highlight quoted content, testimonials, or excerpts. The rule and padding are logical, so they move to the right edge in right-to-left locales.

| Prop | Type | Default | Description |
|---|---|---|---|
| children * | ReactNode |  | Content of the blockquote. |
| cite | ReactNode |  | Optional attribution for the quote. Rendered in a <cite> element after the quoted content. |
| xstyle | StyleXStyles |  | StyleX styles for layout customization (margins, positioning, sizing). Must be a stylex.create() value, not an inline style object like style={{}}. |

### Usage guidance

- Use for quoted text, testimonials, or highlighted excerpts from external sources.
- Provide a cite prop when the source of the quote is known.
- Pass the source through cite rather than typing it into children, so it renders as a semantic <cite> element that assistive technology can distinguish from the quotation.
- Avoid: Use for callout boxes or informational notes; use Banner for those.
- Avoid: Wrap the attribution in your own <footer>. A <footer> inside a <blockquote> becomes a contentinfo document landmark, and a page with several quotes then reports several page footers.

### Theming API

```json
{
  "targets": [
    {
      "className": "astryx-blockquote",
      "visualProps": []
    }
  ]
}
```

### Anatomy

- **Rule**: The border on the inline-start edge, drawn with --color-border-emphasized.
- **Quotation**: The quoted content, passed as children. Renders inside the <blockquote> element.
- **Attribution**: The source, passed as cite. Renders as a <cite> element below the quotation.


## Examples

- Blockquote — Showcase: Blockquote with and without citation. A quick visual reference for the blockquote component.
- Blockquote — Testimonials: Multiple quotes arranged in a card grid for a testimonials section. Combine with Card and Grid to create social-proof layouts.
- Blockquote — With Attribution: A plain quote and a quote with a cite attribution. Use cite to credit the original author or source.

---

Index of all JGuang resources: https://jiguang132.com/llms.txt