HelixOverviewComponentsMapsGraphIntroductionInstallationDeriving a themeSandboxTheme builderVisual testingCortexDocsEngramBuildingTraceBuildingRecallDeclaredServicesInsightsGet in touchSource on GitHub
Loading the reference
BlockquoteView SourceEdit in SandboxView MarkdownCopy MarkdownOpen in ClaudeOpen in CursorA passage set off from the prose around it.StableSince 0.1.0TypographyUsageimport'@fusion.dev/helix/blockquote'import'@fusion.dev/helix-headless/blockquote'Preview
API ReferenceRoothelix-blockquoteA passage set off from the prose around it.
PropTypeDescriptionattributionstringDefault""Who said it, and where, as words, such as "Maria Lopez, operations
manager". The attribution slot replaces them, for markup such as a link.citestringDefault""The URL of the source the passage came from. Who said it goes in
attribution: a cite with words in it warns once, with the runtime kind
cite-not-url.marksbooleanDefaultfalseWhether to draw an opening quotation mark before the passage, in the
element's language. Leave the marks out of the text.textAlign"start"|"center"|"end"How the passage and its attribution align, set as text-align.textWrap"balance"|"pretty"How the passage's lines break, set as text-wrap.
ReadTypeDescriptionwhenSettledPromise<void>Resolves a frame after the first update, when transitions are switched on.
SlotDescription(default)The quoted passage.attributionWho said it, and where. Replaces the words of attribution.
PartDescriptionattributionThe caption carrying the source.blockquoteThe quotation.figureThe figure holding the quotation and its attribution, a <div> with role="figure" while the attribution has words.
CSS PropertyDescription--blockquote-attribution-colorThe color of the attribution.--blockquote-attribution-font-familyThe typeface of the attribution, the page's by default.--blockquote-attribution-font-weightThe weight of the attribution, the page's by default.--blockquote-attribution-sizeThe font size of the attribution.--blockquote-colorThe color of the quoted passage.--blockquote-font-familyThe typeface of the quoted passage, the display face by default.--blockquote-font-weightThe weight of the quoted passage, medium by default.--blockquote-gapThe space between the passage and its attribution.--blockquote-letter-spacingThe letter spacing of the quoted passage, the tight tracking by default.--blockquote-line-heightThe line height of the quoted passage, the tight leading by default.--blockquote-mark-colorThe color of the mark marks draws, the subtle foreground by default.--blockquote-mark-sizeThe font size of the mark marks draws.--blockquote-sizeThe font size of the quoted passage.
Custom stateDescriptionsettledSet one frame after the first render. Transitions wait for it, so an element does not animate its own arrival.
Roothelix-headless-blockquoteA passage set off from the prose around it.
PropTypeDescriptionattributionstringDefault""Who said it, and where, as words, such as "Maria Lopez, operations
manager". The attribution slot replaces them, for markup such as a link.citestringDefault""The URL of the source the passage came from. Who said it goes in
attribution: a cite with words in it warns once, with the runtime kind
cite-not-url.marksbooleanDefaultfalseWhether to draw an opening quotation mark before the passage, in the
element's language. Leave the marks out of the text.
ReadTypeDescriptionwhenSettledPromise<void>Resolves a frame after the first update, when transitions are switched on.
SlotDescription(default)The quoted passage.attributionWho said it, and where. Replaces the words of attribution.
PartDescriptionattributionThe caption carrying the source.blockquoteThe quotation.figureThe figure holding the quotation and its attribution, a <div> with role="figure" while the attribution has words.
Custom stateDescriptionsettledSet one frame after the first render. Transitions wait for it, so an element does not animate its own arrival.
Examples
NameDescriptionCenteredA pull quote set in the middle of its column with text-align and its lines balanced with text-wrap, its mark standing over the passage.PreviewA quotation with its source cited.PreviewA quotation with its source cited.Pull QuoteA pull quote: one large mark over each passage, in the language written on the element, and the attribution given as words.