Primals
Typography
Section Heading (h3)

SectionHeading Component

The SectionHeading component is a functional component that returns a heading element with various style properties.

Props

The SectionHeading component accepts the following props:

NameTypeDefault ValueDescription
fontSizestringvar(--font-size-base)Font size of the text
fontWeightstringvar(--font-weight-normal)Font weight of the text
fontStylestringvar(--font-style-normal)Font style of the text
fontFamilystringvar(--font-family-sans)Font family of the text
fontstringvar(--font)Shorthand for setting all font properties
colorstringvar(--color-neutrals-9)Color of the text
textAlignstringvar(--text-align-left)Horizontal alignment of the text
textTransformstringvar(--text-transform-none)Controls the capitalization of text
lineHeightstringvar(--line-height-none)Space between lines
letterSpacingstringvar(--letter-spacing-normal)Spacing between characters
whiteSpacestringvar(--white-space-normal)How white space inside an element is handled
wordBreakstringvar(--word-break-normal)Specifies how words should break when reaching the end of a line
overflowWrapstringvar(--overflow-wrap-normal)Specifies whether or not the browser may break lines within words in order to prevent overflow
wordWrapstringvar(--word-wrap-normal)Legacy version of the overflowWrap property
hyphensstringvar(--hyphens-none)Controls how words should be hyphenated when text wraps across multiple lines
textOrientationstringvar(--text-orientation-mixed)Defines the orientation of the text in a line
textRenderingstringvar(--text-rendering-auto)Provides information to the rendering engine about what to optimize for when rendering text
textSizeAdjuststringvar(--text-size-adjust-auto)Allows web authors to disable or modify the text inflation algorithm on a per-element basis
textUnderlinePositionstringvar(--text-underline-position-auto)Sets the placement of the underline on links or on underlined text
textUnderlineOffsetstringvar(--text-underline-offset-auto)Sets the offset distance of an underline text decoration line (applied through text-decoration) from its original position
textUnderlineStylestringvar(--text-underline-style-solid)Sets the style of the underline on links or on underlined text
textUnderlineColorstringvar(--text-underline-color-currentColor)Sets the color of the underline on links or on underlined text
textUnderlinestringvar(--text-underline)Shorthand for setting all the underline properties
textOverlineStylestringvar(--text-overline-style-solid)Sets the style of the overline on links or on overlined text
textOverlineColorstringvar(--text-overline-color-currentColor)Sets the color of the overline on links or on overlined text
textOverlinestringvar(--text-overline)Shorthand for setting all the overline properties
textLineThroughStylestringvar(--text-line-through-style-solid)Sets the style of the line-through on links or on line-through text
textLineThroughColorstringvar(--text-line-through-color-currentColor)Sets the color of the line-through on links or on line-through text
textLineThroughstringvar(--text-line-through)Shorthand for setting all the line-through properties
textDecorationLinestringvar(--text-decoration-line-none)Sets the kind of text decoration to use (like underline, overline, line-through)
textDecorationStylestringvar(--text-decoration-style-solid)Sets the style of the text decoration (like solid, wavy, dotted, dashed, double)
textDecorationColorstringvar(--text-decoration-color-currentColor)Sets the color of the text decoration
textDecorationstringvar(--text-decoration)Shorthand for setting all the text-decoration-* properties
textShadowstringvar(--text-shadow-none)Applies one or more shadows to the text
textOverflowstringvar(--text-overflow-clip)Specifies how overflowed content that is not displayed should be signaled to the user
textJustifystringvar(--text-justify-auto)Specifies the justification method to use when a line box is justified
textIndentstringvar(--text-indent-none)Specifies the indentation of the first line in a text block
textJustifyTrimstringvar(--text-justify-trim-auto)Specifies the justification method to use when a line box is justified and has trailing white space
textAlignLaststringvar(--text-align-last-auto)Describes how the last line of a block or a line, right before a forced line break, is aligned when text-align is justify

Example

This will render a heading of text with the color set to red-500, and the font weight set to bold.

<SectionHeading
  color="red-500"
  fontWeight="bold"
>
  Hello, world!
</SectionHeading>