Compose long-form content with explicit heading IDs, source notes and a clearly labeled estimate of reading time.
Excerpt estimate: about 1 minute at 200 words per minute.
“Readable interfaces make room for explanations. A short article can pair a clear heading with a permalink, use an optional drop cap, and keep source notes close to the passage they support. Readers should be able to follow a note and return to the exact reference using the keyboard.”1
Theme tokens keep the article aligned with the surrounding interface. The same note can be cited again without losing its original return link.1
Choose heading IDs, note IDs, reference IDs and numbers explicitly. Footnotes scopes fragment targets to each article and provides native links back to each citation. Use a stable, unique scopeId for published article links. Heading permalinks and drop caps are class-string recipes; they do not generate slugs or rewrite content.
Article, explicit heading link and repeated footnote references
Excerpt estimate: about 1 minute at 200 words per minute.
“Readable interfaces make room for explanations. A short article can pair a clear heading with a permalink, use an optional drop cap, and keep source notes close to the passage they support. Readers should be able to follow a note and return to the exact reference using the keyboard.”1
Theme tokens keep the article aligned with the surrounding interface. The same note can be cited again without losing its original return link.1
Estimated reading time from plain text
About 1 minute to read
49 words · 15 estimated seconds · Approximate word runs
This is an estimate from plain text. Automatic counting uses Intl.Segmenter when available; approximate mode counts Unicode letter/number runs and may undercount languages without spaces. Pin approximate mode or reuse a precomputed result when server and browser segmentation support differs.
Opt-in first-letter styling with punctuation and RTL
“Punctuation stays part of the original paragraph. The first-letter recipe lets the browser choose the initial letter and its punctuation; the text stays selectable, copyable and accessible.”
تساعد الفقرات الواضحة القارئ على متابعة المحتوى وفهم الملاحظات دون تغيير ترتيب النص أو تقسيمه إلى عناصر إضافية.
Generated from the package prop types and variant definitions.
BlockquoteProps
| Prop | Type | Default |
|---|---|---|
| tone | accentdefaultdestructiveerrorgradient-cyan-bluegradient-cyan-greengradient-cyan-orangegradient-cyan-pinkgradient-cyan-purplegradient-cyan-redgradient-cyan-violetgradient-pink-violet+6 | default |
| Prop | Type | Default |
|---|---|---|
| attributionAttribution label; distinct from the native cite URL attribute. | string | undefined | none |
| Prop | Type | Default |
|---|---|---|
| children | ReactNode | none |
| className | string | undefined | none |
| id | string | undefined | none |
| onClick | MouseEventHandler<HTMLQuoteElement> | undefined | none |
| refAllows getting a ref to the component instance. Once the component unmounts, React will set `ref.current` to `null` (or call the ref with `null` if you passed a callback ref). | Ref<HTMLQuoteElement> | undefined | none |
| rel | string | undefined | none |
| style | CSSProperties | undefined | none |
| title | string | undefined | none |
CodeBlockProps
| Prop | Type | Default |
|---|---|---|
| tone | accentdefaultdestructiveerrorgradient-cyan-bluegradient-cyan-greengradient-cyan-orangegradient-cyan-pinkgradient-cyan-purplegradient-cyan-redgradient-cyan-violetgradient-pink-violet+6 | default |
| Prop | Type | Default |
|---|---|---|
| language | string | undefined | none |
| Prop | Type | Default |
|---|---|---|
| children | ReactNode | none |
| className | string | undefined | none |
| id | string | undefined | none |
| onClick | MouseEventHandler<HTMLPreElement> | undefined | none |
| refAllows getting a ref to the component instance. Once the component unmounts, React will set `ref.current` to `null` (or call the ref with `null` if you passed a callback ref). | Ref<HTMLPreElement> | undefined | none |
| rel | string | undefined | none |
| style | CSSProperties | undefined | none |
| title | string | undefined | none |
DescriptionListProps
| Prop | Type | Default |
|---|---|---|
| layout | inlineresponsivestacked | responsive |
| separators | falsetrue | false |
| size | baselgsm | base |
| tone | accentdefaultdestructiveerrorgradient-cyan-bluegradient-cyan-greengradient-cyan-orangegradient-cyan-pinkgradient-cyan-purplegradient-cyan-redgradient-cyan-violetgradient-pink-violet+6 | default |
| Prop | Type | Default |
|---|---|---|
| children | ReactNode | none |
| className | string | undefined | none |
| id | string | undefined | none |
| onClick | MouseEventHandler<HTMLDListElement> | undefined | none |
| refAllows getting a ref to the component instance. Once the component unmounts, React will set `ref.current` to `null` (or call the ref with `null` if you passed a callback ref). | Ref<HTMLDListElement> | undefined | none |
| rel | string | undefined | none |
| style | CSSProperties | undefined | none |
| title | string | undefined | none |
DescriptionListDetailsProps
| Prop | Type | Default |
|---|---|---|
| children | ReactNode | none |
| className | string | undefined | none |
| id | string | undefined | none |
| onClick | MouseEventHandler<HTMLElement> | undefined | none |
| refAllows getting a ref to the component instance. Once the component unmounts, React will set `ref.current` to `null` (or call the ref with `null` if you passed a callback ref). | Ref<HTMLElement> | undefined | none |
| rel | string | undefined | none |
| style | CSSProperties | undefined | none |
| title | string | undefined | none |
DescriptionListItemProps
| Prop | Type | Default |
|---|---|---|
| children | ReactNode | none |
| className | string | undefined | none |
| id | string | undefined | none |
| onClick | MouseEventHandler<HTMLDivElement> | undefined | none |
| refAllows getting a ref to the component instance. Once the component unmounts, React will set `ref.current` to `null` (or call the ref with `null` if you passed a callback ref). | Ref<HTMLDivElement> | undefined | none |
| rel | string | undefined | none |
| style | CSSProperties | undefined | none |
| title | string | undefined | none |
DescriptionListTermProps
| Prop | Type | Default |
|---|---|---|
| children | ReactNode | none |
| className | string | undefined | none |
| id | string | undefined | none |
| onClick | MouseEventHandler<HTMLElement> | undefined | none |
| refAllows getting a ref to the component instance. Once the component unmounts, React will set `ref.current` to `null` (or call the ref with `null` if you passed a callback ref). | Ref<HTMLElement> | undefined | none |
| rel | string | undefined | none |
| style | CSSProperties | undefined | none |
| title | string | undefined | none |
EmphasisProps
| Prop | Type | Default |
|---|---|---|
| tone | accentdefaultdestructiveerrorgradient-cyan-bluegradient-cyan-greengradient-cyan-orangegradient-cyan-pinkgradient-cyan-purplegradient-cyan-redgradient-cyan-violetgradient-pink-violet+6 | default |
| Prop | Type | Default |
|---|---|---|
| children | ReactNode | none |
| className | string | undefined | none |
| id | string | undefined | none |
| onClick | MouseEventHandler<HTMLElement> | undefined | none |
| refAllows getting a ref to the component instance. Once the component unmounts, React will set `ref.current` to `null` (or call the ref with `null` if you passed a callback ref). | Ref<HTMLElement> | undefined | none |
| rel | string | undefined | none |
| style | CSSProperties | undefined | none |
| title | string | undefined | none |
ExpandableTextProps
| Prop | Type | Default |
|---|---|---|
| buttonClassName | string | undefined | none |
| contentClassName | string | undefined | none |
| contentId | string | undefined | none |
| defaultExpanded | boolean | undefined | none |
| expanded | boolean | undefined | none |
| lessLabel | string | undefined | none |
| lines | number | undefined | none |
| moreLabel | string | undefined | none |
| onExpandedChange | ((expanded: boolean) => void) | undefined | none |
| showToggleAlways exposes the control when layout measurement is unavailable. | 'overflow' | 'always' | undefined | none |
| text* | string | none |
| Prop | Type | Default |
|---|---|---|
| className | string | undefined | none |
| id | string | undefined | none |
| onClick | MouseEventHandler<HTMLDivElement> | undefined | none |
| refAllows getting a ref to the component instance. Once the component unmounts, React will set `ref.current` to `null` (or call the ref with `null` if you passed a callback ref). | Ref<HTMLDivElement> | undefined | none |
| rel | string | undefined | none |
| style | CSSProperties | undefined | none |
| title | string | undefined | none |
FootnoteBacklinkProps
| Prop | Type | Default |
|---|---|---|
| label* | string | none |
| noteId* | string | none |
| referenceId* | string | none |
| Prop | Type | Default |
|---|---|---|
| children | ReactNode | none |
| className | string | undefined | none |
| download | any | none |
| id | string | undefined | none |
| onClick | MouseEventHandler<HTMLAnchorElement> | undefined | none |
| refAllows getting a ref to the component instance. Once the component unmounts, React will set `ref.current` to `null` (or call the ref with `null` if you passed a callback ref). | Ref<HTMLAnchorElement> | undefined | none |
| referrerPolicy | HTMLAttributeReferrerPolicy | undefined | none |
| rel | string | undefined | none |
| style | CSSProperties | undefined | none |
| target | HTMLAttributeAnchorTarget | undefined | none |
| title | string | undefined | none |
FootnoteItemProps
| Prop | Type | Default |
|---|---|---|
| noteId* | string | none |
| number* | number | none |
| Prop | Type | Default |
|---|---|---|
| children | ReactNode | none |
| className | string | undefined | none |
| onClick | MouseEventHandler<HTMLLIElement> | undefined | none |
| refAllows getting a ref to the component instance. Once the component unmounts, React will set `ref.current` to `null` (or call the ref with `null` if you passed a callback ref). | Ref<HTMLLIElement> | undefined | none |
| rel | string | undefined | none |
| style | CSSProperties | undefined | none |
| title | string | undefined | none |
FootnoteReferenceProps
| Prop | Type | Default |
|---|---|---|
| noteId* | string | none |
| number* | number | none |
| referenceId* | string | none |
| Prop | Type | Default |
|---|---|---|
| className | string | undefined | none |
| download | any | none |
| onClick | MouseEventHandler<HTMLAnchorElement> | undefined | none |
| refAllows getting a ref to the component instance. Once the component unmounts, React will set `ref.current` to `null` (or call the ref with `null` if you passed a callback ref). | Ref<HTMLAnchorElement> | undefined | none |
| referrerPolicy | HTMLAttributeReferrerPolicy | undefined | none |
| rel | string | undefined | none |
| style | CSSProperties | undefined | none |
| target | HTMLAttributeAnchorTarget | undefined | none |
| title | string | undefined | none |
FootnotesProps
| Prop | Type | Default |
|---|---|---|
| scopeId | string | undefined | none |
| Prop | Type | Default |
|---|---|---|
| children | ReactNode | none |
| className | string | undefined | none |
| id | string | undefined | none |
| onClick | MouseEventHandler<HTMLDivElement> | undefined | none |
| refAllows getting a ref to the component instance. Once the component unmounts, React will set `ref.current` to `null` (or call the ref with `null` if you passed a callback ref). | Ref<HTMLDivElement> | undefined | none |
| rel | string | undefined | none |
| style | CSSProperties | undefined | none |
| title | string | undefined | none |
FootnotesListProps
| Prop | Type | Default |
|---|---|---|
| children | ReactNode | none |
| className | string | undefined | none |
| id | string | undefined | none |
| onClick | MouseEventHandler<HTMLOListElement> | undefined | none |
| refAllows getting a ref to the component instance. Once the component unmounts, React will set `ref.current` to `null` (or call the ref with `null` if you passed a callback ref). | Ref<HTMLOListElement> | undefined | none |
| rel | string | undefined | none |
| style | CSSProperties | undefined | none |
| title | string | undefined | none |
HeadingProps
| Prop | Type | Default |
|---|---|---|
| align | centerendjustifystart | none |
| leading | normalrelaxedtight | none |
| level* | 123456 | none |
| measure | nonereadablewide | none |
| tone | accentdefaultdestructiveerrorgradient-cyan-bluegradient-cyan-greengradient-cyan-orangegradient-cyan-pinkgradient-cyan-purplegradient-cyan-redgradient-cyan-violetgradient-pink-violet+6 | default |
| tracking | normaltightwide | none |
| weight | boldmediumnormalsemibold | none |
| wrap | balancenormalnowrappretty | none |
| Prop | Type | Default |
|---|---|---|
| boldExplicit weight takes precedence over bold. | boolean | undefined | none |
| displayLevelVisual scale; defaults to level. Does not change the semantic heading tag. | HeadingLevel | undefined | none |
| displaySizeMarketing display size. Takes precedence over displayLevel. | NonNullable<'md' | 'sm' | 'lg' | null | undefined> | undefined | none |
| italic | boolean | undefined | none |
| scaleFluid sizing is opt-in; default retains the existing responsive scale. | 'default' | 'fluid' | undefined | none |
| strikethrough | boolean | undefined | none |
| underline | boolean | undefined | none |
| Prop | Type | Default |
|---|---|---|
| children | ReactNode | none |
| className | string | undefined | none |
| id | string | undefined | none |
| onClick | MouseEventHandler<HTMLHeadingElement> | undefined | none |
| refAllows getting a ref to the component instance. Once the component unmounts, React will set `ref.current` to `null` (or call the ref with `null` if you passed a callback ref). | Ref<HTMLHeadingElement> | undefined | none |
| rel | string | undefined | none |
| style | CSSProperties | undefined | none |
| title | string | undefined | none |
HighlightTextProps
| Prop | Type | Default |
|---|---|---|
| caseSensitiveUnicode simple case folding, without locale or accent normalization. | boolean | undefined | none |
| markClassName | string | undefined | none |
| query* | string | readonly string[] | none |
| text* | string | none |
| Prop | Type | Default |
|---|---|---|
| className | string | undefined | none |
| id | string | undefined | none |
| onClick | MouseEventHandler<HTMLSpanElement> | undefined | none |
| refAllows getting a ref to the component instance. Once the component unmounts, React will set `ref.current` to `null` (or call the ref with `null` if you passed a callback ref). | Ref<HTMLSpanElement> | undefined | none |
| rel | string | undefined | none |
| style | CSSProperties | undefined | none |
| title | string | undefined | none |
InlineCodeProps
| Prop | Type | Default |
|---|---|---|
| tone | accentdefaultdestructiveerrorgradient-cyan-bluegradient-cyan-greengradient-cyan-orangegradient-cyan-pinkgradient-cyan-purplegradient-cyan-redgradient-cyan-violetgradient-pink-violet+6 | default |
| Prop | Type | Default |
|---|---|---|
| children | ReactNode | none |
| className | string | undefined | none |
| id | string | undefined | none |
| onClick | MouseEventHandler<HTMLElement> | undefined | none |
| refAllows getting a ref to the component instance. Once the component unmounts, React will set `ref.current` to `null` (or call the ref with `null` if you passed a callback ref). | Ref<HTMLElement> | undefined | none |
| rel | string | undefined | none |
| style | CSSProperties | undefined | none |
| title | string | undefined | none |
ListProps
| Prop | Type | Default |
|---|---|---|
| marker | circlediscnone | disc |
| tone | accentdefaultdestructiveerrorgradient-cyan-bluegradient-cyan-greengradient-cyan-orangegradient-cyan-pinkgradient-cyan-purplegradient-cyan-redgradient-cyan-violetgradient-pink-violet+6 | default |
| Prop | Type | Default |
|---|---|---|
| ordered | boolean | undefined | none |
| Prop | Type | Default |
|---|---|---|
| children | ReactNode | none |
| className | string | undefined | none |
| id | string | undefined | none |
| onClick | MouseEventHandler<HTMLOListElement> | MouseEventHandler<HTMLUListElement> | undefined | none |
| refAllows getting a ref to the component instance. Once the component unmounts, React will set `ref.current` to `null` (or call the ref with `null` if you passed a callback ref). | ((instance: HTMLUListElement | null) => void | (() => VoidOrUndefinedOnly) | DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES[keyof DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES]) | RefObject<HTMLUListElement | null> | ((instance: HTMLOListElement | null) => void | (() => VoidOrUndefinedOnly) | DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES[keyof DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES]) | RefObject<HTMLOListElement | null> | null | undefined | none |
| rel | string | undefined | none |
| style | CSSProperties | undefined | none |
| title | string | undefined | none |
ListItemProps
| Prop | Type | Default |
|---|---|---|
| children | ReactNode | none |
| className | string | undefined | none |
| id | string | undefined | none |
| onClick | MouseEventHandler<HTMLLIElement> | undefined | none |
| refAllows getting a ref to the component instance. Once the component unmounts, React will set `ref.current` to `null` (or call the ref with `null` if you passed a callback ref). | Ref<HTMLLIElement> | undefined | none |
| rel | string | undefined | none |
| style | CSSProperties | undefined | none |
| title | string | undefined | none |
MarkProps
| Prop | Type | Default |
|---|---|---|
| children | ReactNode | none |
| className | string | undefined | none |
| id | string | undefined | none |
| onClick | MouseEventHandler<HTMLElement> | undefined | none |
| refAllows getting a ref to the component instance. Once the component unmounts, React will set `ref.current` to `null` (or call the ref with `null` if you passed a callback ref). | Ref<HTMLElement> | undefined | none |
| rel | string | undefined | none |
| style | CSSProperties | undefined | none |
| title | string | undefined | none |
NumberTextProps
| Prop | Type | Default |
|---|---|---|
| align | centerendjustifystart | none |
| font | bodymono | none |
| leading | normalrelaxedtight | none |
| measure | nonereadablewide | none |
| numeric | normaltabular | tabular |
| size | baselgsmxlxs | base |
| tone | accentdefaultdestructiveerrorgradient-cyan-bluegradient-cyan-greengradient-cyan-orangegradient-cyan-pinkgradient-cyan-purplegradient-cyan-redgradient-cyan-violetgradient-pink-violet+6 | default |
| tracking | normaltightwide | none |
| weight | boldmediumnormalsemibold | none |
| wrap | balancenormalnowrappretty | none |
| Prop | Type | Default |
|---|---|---|
| value* | number | bigint | none |
| Prop | Type | Default |
|---|---|---|
| as | 'div' | 'p' | 'span' | undefined | none |
| formatOptionsIntl's style is separate from the native React CSS style prop. | Intl.NumberFormatOptions | undefined | none |
| locale | string | string[] | undefined | none |
| partClassNamesStyles native parts without replacing their text or order. | Partial<Record<keyof Intl.NumberFormatPartTypeRegistry, string>> | undefined | none |
| Prop | Type | Default |
|---|---|---|
| className | string | undefined | none |
| id | string | undefined | none |
| onClick | MouseEventHandler<HTMLDivElement> | MouseEventHandler<HTMLSpanElement> | MouseEventHandler<HTMLParagraphElement> | undefined | none |
| refAllows getting a ref to the component instance. Once the component unmounts, React will set `ref.current` to `null` (or call the ref with `null` if you passed a callback ref). | ((instance: HTMLDivElement | null) => void | (() => VoidOrUndefinedOnly) | DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES[keyof DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES]) | RefObject<HTMLDivElement | null> | ((instance: HTMLSpanElement | null) => void | (() => VoidOrUndefinedOnly) | DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES[keyof DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES]) | RefObject<HTMLSpanElement | null> | ((instance: HTMLParagraphElement | null) => void | (() => VoidOrUndefinedOnly) | DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES[keyof DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES]) | RefObject<HTMLParagraphElement | null> | null | undefined | none |
| rel | string | undefined | none |
| style | CSSProperties | undefined | none |
| title | string | undefined | none |
ProseProps
| Prop | Type | Default |
|---|---|---|
| measure | nonereadablewide | readable |
| size | baselgsm | base |
| tone | accentdefaultdestructiveerrorgradient-cyan-bluegradient-cyan-greengradient-cyan-orangegradient-cyan-pinkgradient-cyan-purplegradient-cyan-redgradient-cyan-violetgradient-pink-violet+6 | default |
| Prop | Type | Default |
|---|---|---|
| as | 'div' | 'article' | undefined | none |
| Prop | Type | Default |
|---|---|---|
| children | ReactNode | none |
| className | string | undefined | none |
| id | string | undefined | none |
| onClick | MouseEventHandler<HTMLDivElement> | MouseEventHandler<HTMLElement> | undefined | none |
| refAllows getting a ref to the component instance. Once the component unmounts, React will set `ref.current` to `null` (or call the ref with `null` if you passed a callback ref). | ((instance: HTMLDivElement | null) => void | (() => VoidOrUndefinedOnly) | DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES[keyof DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES]) | RefObject<HTMLDivElement | null> | ((instance: HTMLElement | null) => void | (() => VoidOrUndefinedOnly) | DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES[keyof DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES]) | RefObject<HTMLElement | null> | null | undefined | none |
| rel | string | undefined | none |
| style | CSSProperties | undefined | none |
| title | string | undefined | none |
SmallProps
| Prop | Type | Default |
|---|---|---|
| tone | accentdefaultdestructiveerrorgradient-cyan-bluegradient-cyan-greengradient-cyan-orangegradient-cyan-pinkgradient-cyan-purplegradient-cyan-redgradient-cyan-violetgradient-pink-violet+6 | default |
| Prop | Type | Default |
|---|---|---|
| children | ReactNode | none |
| className | string | undefined | none |
| id | string | undefined | none |
| onClick | MouseEventHandler<HTMLElement> | undefined | none |
| refAllows getting a ref to the component instance. Once the component unmounts, React will set `ref.current` to `null` (or call the ref with `null` if you passed a callback ref). | Ref<HTMLElement> | undefined | none |
| rel | string | undefined | none |
| style | CSSProperties | undefined | none |
| title | string | undefined | none |
StrongProps
| Prop | Type | Default |
|---|---|---|
| tone | accentdefaultdestructiveerrorgradient-cyan-bluegradient-cyan-greengradient-cyan-orangegradient-cyan-pinkgradient-cyan-purplegradient-cyan-redgradient-cyan-violetgradient-pink-violet+6 | default |
| Prop | Type | Default |
|---|---|---|
| children | ReactNode | none |
| className | string | undefined | none |
| id | string | undefined | none |
| onClick | MouseEventHandler<HTMLElement> | undefined | none |
| refAllows getting a ref to the component instance. Once the component unmounts, React will set `ref.current` to `null` (or call the ref with `null` if you passed a callback ref). | Ref<HTMLElement> | undefined | none |
| rel | string | undefined | none |
| style | CSSProperties | undefined | none |
| title | string | undefined | none |
TextProps
| Prop | Type | Default |
|---|---|---|
| align | centerendjustifystart | none |
| font | bodymono | none |
| leading | normalrelaxedtight | none |
| measure | nonereadablewide | none |
| numeric | normaltabular | none |
| preset | bodycaptionleadoverline | body |
| size | baselgsmxlxs | base |
| tone | accentdefaultdestructiveerrorgradient-cyan-bluegradient-cyan-greengradient-cyan-orangegradient-cyan-pinkgradient-cyan-purplegradient-cyan-redgradient-cyan-violetgradient-pink-violet+6 | default |
| tracking | normaltightwide | none |
| underline | alwayshovernone | always |
| weight | boldmediumnormalsemibold | none |
| wrap | balancenormalnowrappretty | none |
| Prop | Type | Default |
|---|---|---|
| as | 'div' | 'label' | 'p' | 'span' | undefined | none |
| boldExplicit weight, then a preset's weight, take precedence over bold. | boolean | undefined | none |
| highlightVisual highlighting only; use semantic emphasis for importance. | boolean | undefined | none |
| italic | boolean | undefined | none |
| strikethrough | boolean | undefined | none |
| Prop | Type | Default |
|---|---|---|
| children | ReactNode | none |
| className | string | undefined | none |
| id | string | undefined | none |
| onClick | MouseEventHandler<HTMLDivElement> | MouseEventHandler<HTMLSpanElement> | MouseEventHandler<HTMLParagraphElement> | MouseEventHandler<HTMLLabelElement> | undefined | none |
| refAllows getting a ref to the component instance. Once the component unmounts, React will set `ref.current` to `null` (or call the ref with `null` if you passed a callback ref). | ((instance: HTMLDivElement | null) => void | (() => VoidOrUndefinedOnly) | DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES[keyof DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES]) | RefObject<HTMLDivElement | null> | ((instance: HTMLSpanElement | null) => void | (() => VoidOrUndefinedOnly) | DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES[keyof DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES]) | RefObject<HTMLSpanElement | null> | ((instance: HTMLParagraphElement | null) => void | (() => VoidOrUndefinedOnly) | DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES[keyof DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES]) | RefObject<HTMLParagraphElement | null> | ((instance: HTMLLabelElement | null) => void | (() => VoidOrUndefinedOnly) | DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES[keyof DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES]) | RefObject<HTMLLabelElement | null> | null | undefined | none |
| rel | string | undefined | none |
| style | CSSProperties | undefined | none |
| title | string | undefined | none |
TextLinkProps
| Prop | Type | Default |
|---|---|---|
| align | centerendjustifystart | none |
| leading | normalrelaxedtight | none |
| measure | nonereadablewide | none |
| size | baselgsmxlxs | base |
| tone | accentdefaultdestructiveerrorgradient-cyan-bluegradient-cyan-greengradient-cyan-orangegradient-cyan-pinkgradient-cyan-purplegradient-cyan-redgradient-cyan-violetgradient-pink-violet+6 | default |
| tracking | normaltightwide | none |
| underline | alwayshovernone | always |
| weight | boldmediumnormalsemibold | none |
| wrap | balancenormalnowrappretty | none |
| Prop | Type | Default |
|---|---|---|
| externalIndicatorDecorative external-link marker; does not change target or accessible name. | boolean | undefined | none |
| Prop | Type | Default |
|---|---|---|
| children | ReactNode | none |
| className | string | undefined | none |
| download | any | none |
| href | string | undefined | none |
| id | string | undefined | none |
| onClick | MouseEventHandler<HTMLAnchorElement> | undefined | none |
| refAllows getting a ref to the component instance. Once the component unmounts, React will set `ref.current` to `null` (or call the ref with `null` if you passed a callback ref). | Ref<HTMLAnchorElement> | undefined | none |
| referrerPolicy | HTMLAttributeReferrerPolicy | undefined | none |
| rel | string | undefined | none |
| style | CSSProperties | undefined | none |
| target | HTMLAttributeAnchorTarget | undefined | none |
| title | string | undefined | none |
TruncateTextProps
| Prop | Type | Default |
|---|---|---|
| as | 'div' | 'p' | 'span' | undefined | none |
| lines | number | undefined | none |
| Prop | Type | Default |
|---|---|---|
| children* | string | none |
| Prop | Type | Default |
|---|---|---|
| className | string | undefined | none |
| id | string | undefined | none |
| onClick | MouseEventHandler<HTMLDivElement> | MouseEventHandler<HTMLSpanElement> | MouseEventHandler<HTMLParagraphElement> | undefined | none |
| refAllows getting a ref to the component instance. Once the component unmounts, React will set `ref.current` to `null` (or call the ref with `null` if you passed a callback ref). | ((instance: HTMLDivElement | null) => void | (() => VoidOrUndefinedOnly) | DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES[keyof DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES]) | RefObject<HTMLDivElement | null> | ((instance: HTMLSpanElement | null) => void | (() => VoidOrUndefinedOnly) | DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES[keyof DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES]) | RefObject<HTMLSpanElement | null> | ((instance: HTMLParagraphElement | null) => void | (() => VoidOrUndefinedOnly) | DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES[keyof DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES]) | RefObject<HTMLParagraphElement | null> | null | undefined | none |
| rel | string | undefined | none |
| style | CSSProperties | undefined | none |
| title | string | undefined | none |
VisuallyHiddenProps
| Prop | Type | Default |
|---|---|---|
| as | 'div' | 'span' | undefined | none |
| focusableReveal on focus-within, for example when containing a skip-link anchor. | boolean | undefined | none |
| Prop | Type | Default |
|---|---|---|
| children | ReactNode | none |
| className | string | undefined | none |
| id | string | undefined | none |
| onClick | MouseEventHandler<HTMLDivElement> | MouseEventHandler<HTMLSpanElement> | undefined | none |
| refAllows getting a ref to the component instance. Once the component unmounts, React will set `ref.current` to `null` (or call the ref with `null` if you passed a callback ref). | ((instance: HTMLDivElement | null) => void | (() => VoidOrUndefinedOnly) | DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES[keyof DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES]) | RefObject<HTMLDivElement | null> | ((instance: HTMLSpanElement | null) => void | (() => VoidOrUndefinedOnly) | DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES[keyof DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES]) | RefObject<HTMLSpanElement | null> | null | undefined | none |
| rel | string | undefined | none |
| style | CSSProperties | undefined | none |
| title | string | undefined | none |
Footnotes provides Reference, List, Item and Backlink primitives with named exports. Supply unique scope IDs for persistent published links and explicit note/reference IDs and matching numbers. Each backlink needs a meaningful label. estimateReadingTime accepts a configurable rate, locale and auto/segmenter/approximate mode. Recipes are exported class strings in the existing typography entry.
Native hash links navigate to focusable note items and return to each citation. Heading links remain adjacent to the heading so its text/name is preserved; keyboard focus reveals the link. Drop caps style the native first-letter pseudo-element without splitting text or adding duplicate accessible content.
No. Render the article normally and supply plain text for the reading-time estimate. CMS extraction, editor controls and automatic numbering are separate integration work.
Automatic counting can vary with Intl.Segmenter availability or locale data. Use approximate mode or reuse a precomputed result for matching server/client behavior; the estimate is not a universal reading-speed measurement.
