Blockquote
A typography component that highlights a quoted passage of text with stylized indentation or borders.
Good design is as little design as possible.
Sizes
Use the blockquote-{size} class to control the component size.
Size values can include:smmdlg.
For more information on all available sizing utilities, visit Tailwind
Good design is as little design as possible.
Good design is as little design as possible.
Good design is as little design as possible.
With Accent
Use the decoration-accent-{position} class to add a decorative accent to the component. Refer to the Accents section for more information.
Good design is as little design as possible.
Variants
Use the variant and palette classes to control the appereance of the component.
Variant values can include solidoutlinesurfacesubtlelinkplain.
Color palettes can include primaryneutral. For extra palettes such as warning error and more, refer to the Colors section.
Good design is as little design as possible.
Good design is as little design as possible.
Good design is as little design as possible.
Good design is as little design as possible.
Good design is as little design as possible.
Good design is as little design as possible.
Good design is as little design as possible.
Good design is as little design as possible.
Good design is as little design as possible.
Good design is as little design as possible.
Good design is as little design as possible.
Good design is as little design as possible.
Customizing
globals.css
:root {
--ex-blockquote-font-size-sm: var(--text-xs);
--ex-blockquote-font-size-md: var(--text-sm);
--ex-blockquote-font-size-lg: var(--text-base);
--ex-blockquote-font-family-sm: var(--font-sans);
--ex-blockquote-font-family-md: var(--font-sans);
--ex-blockquote-font-family-lg: var(--font-sans);
--ex-blockquote-font-weight-sm: var(--font-weight-normal);
--ex-blockquote-font-weight-md: var(--font-weight-normal);
--ex-blockquote-font-weight-lg: var(--font-weight-normal);
--ex-blockquote-gap-x-sm: calc(var(--spacing) * 2);
--ex-blockquote-gap-x-md: calc(var(--spacing) * 2.5);
--ex-blockquote-gap-x-lg: calc(var(--spacing) * 3);
--ex-blockquote-gap-y-sm: calc(var(--spacing) * 2);
--ex-blockquote-gap-y-md: calc(var(--spacing) * 2);
--ex-blockquote-gap-y-lg: calc(var(--spacing) * 2);
--ex-blockquote-px-sm: calc(var(--spacing) * 4);
--ex-blockquote-px-md: calc(var(--spacing) * 5);
--ex-blockquote-px-lg: calc(var(--spacing) * 6);
--ex-blockquote-py-sm: calc(var(--spacing) * 4);
--ex-blockquote-py-md: calc(var(--spacing) * 5);
--ex-blockquote-py-lg: calc(var(--spacing) * 6);
--ex-blockquote-radius-sm: var(--radius-sm);
--ex-blockquote-radius-md: var(--radius-sm);
--ex-blockquote-radius-lg: var(--radius-sm);
--ex-blockquote-cite-font-size-sm: var(--text-xs);
--ex-blockquote-cite-font-size-md: var(--text-sm);
--ex-blockquote-cite-font-size-lg: var(--text-base);
--ex-blockquote-cite-font-family-sm: var(--font-sans);
--ex-blockquote-cite-font-family-md: var(--font-sans);
--ex-blockquote-cite-font-family-lg: var(--font-sans);
--ex-blockquote-cite-font-weight-sm: var(--font-weight-medium)
--ex-blockquote-cite-font-weight-md: var(--font-weight-medium)
--ex-blockquote-cite-font-weight-lg: var(--font-weight-medium)
--ex-blockquote-cite-opacity: var(--ex-options-opacity-muted);
--ex-blockquote-icon-font-size-sm: var(--text-lg);
--ex-blockquote-icon-font-size-md: var(--text-xl);
--ex-blockquote-icon-font-size-lg: var(--text-2xl);
}API
Blockquote
| Element | Selector |
|---|---|
Blockquote | .ex-blockquote |
| Prop | Type | Default |
|---|---|---|
as | ElementType | figure |
asChild | boolean | false |
Blockquote Content
| Element | Selector |
|---|---|
Blockquote.Content | .ex-blockquote-content |
| Prop | Type | Default |
|---|---|---|
as | ElementType | div |
asChild | boolean | false |
Blockquote Description
| Element | Selector |
|---|---|
Blockquote.Description | .ex-blockquote-description |
| Prop | Type | Default |
|---|---|---|
as | ElementType | blockquote |
asChild | boolean | false |
Blockquote Caption
| Element | Selector |
|---|---|
Blockquote.Caption | .ex-blockquote-caption |
| Prop | Type | Default |
|---|---|---|
as | ElementType | figcaption |
asChild | boolean | false |
Blockquote Cite
| Element | Selector |
|---|---|
Blockquote.Cite | .ex-blockquote-cite |
| Prop | Type | Default |
|---|---|---|
as | ElementType | cite |
asChild | boolean | false |
Blockquote Icon
| Element | Selector |
|---|---|
Blockquote.Icon | .ex-blockquote-icon |
| Prop | Type | Default |
|---|---|---|
as | ElementType | div |
asChild | boolean | false |
Last updated on