HelixOverviewComponentsMapsGraphIntroductionInstallationDeriving a themeSandboxTheme builderVisual testingCortexDocsEngramBuildingTraceBuildingRecallDeclaredServicesInsightsGet in touchSource on GitHub
Loading the reference
QuoteView SourceEdit in SandboxView MarkdownCopy MarkdownOpen in ClaudeOpen in CursorA short quotation, set inline with the text around it.StableSince 0.1.0TypographyUsageimport'@fusion.dev/helix/quote'import'@fusion.dev/helix-headless/quote'Preview
API ReferenceRoothelix-quoteA short quotation, set inline with the text around it.
PropTypeDescriptioncitestringDefault""URL identifying where the quotation came from.noMarksbooleanDefaultfalseWhether to leave the quotation marks off, for a quotation set where the
page draws its own.
ReadTypeDescriptionwhenSettledPromise<void>Resolves a frame after the first update, when transitions are switched on.
SlotDescription(default)The quoted text.
PartDescriptionquoteThe quotation.
CSS PropertyDescription--quote-colorColor of the quoted text.--quote-font-familyThe typeface of the quoted text, the paragraph's own by default.--quote-font-styleThe slant of the quoted text, italic by default. Set normal for a face whose italic is too loud, or oblique for one with no italic of its own.--quote-font-weightThe weight of the quoted text, the paragraph's own by default.
Custom stateDescriptionsettledSet one frame after the first render. Transitions wait for it, so an element does not animate its own arrival.
Roothelix-headless-quoteA short quotation, set inline with the text around it.
PropTypeDescriptioncitestringDefault""URL identifying where the quotation came from.noMarksbooleanDefaultfalseWhether to leave the quotation marks off, for a quotation set where the
page draws its own.
ReadTypeDescriptionwhenSettledPromise<void>Resolves a frame after the first update, when transitions are switched on.
SlotDescription(default)The quoted text.
PartDescriptionquoteThe quotation.
Custom stateDescriptionsettledSet one frame after the first render. Transitions wait for it, so an element does not animate its own arrival.
Examples
NameDescriptionLanguagesA quotation's marks follow the lang written on it, so a German and a French quotation take their own marks inside English text.No MarksA pull quote with no-marks, beside a large mark the page draws.PreviewA pulled quotation with its attribution.PreviewA pulled quotation with its attribution.