The Strum logo: two oscillating strings from an instrument next to the word Strum
Skip to content
GitHub

Heading

Large text for section titles and subtitles
<Heading>Hello world</Heading>

Props
Link to this heading

<Heading>

import { Heading } from '@strum/react';
name
type
default
align
ConditionalStyle<Values<("left" | "right" | "center")[], { defaultClass: string; conditions: { xs: string; sm: string; md: string; lg: string; xl: string; }; }>>
-
as
"div" | "h1" | "h2" | "h3" | "h4" | "h5" | "h6" | "legend"
-
color
ConditionalStyle<Values<{ warning1: CSSVarFunction; warning2: CSSVarFunction; warning3: CSSVarFunction; warning4: CSSVarFunction; warning5: CSSVarFunction; ... 68 more ...; white: CSSVarFunction; }, { ...; }>>
neutral12
id
string
-
level
"1" | "2" | "3"
2
responsive
boolean
true
transform
"capitalize" | "lowercase" | "uppercase"
-
wordBreak
"break-word"
-

Levels
Link to this heading

The level prop will set both the size of the text and the semantic level of the element, e.g. <Heading level="2" /> will render an h2. You can override the HTML tag via the as prop.

<Heading level="1">Level 1</Heading>

<Heading level="2">Level 2</Heading>

<Heading level="3">Level 3</Heading>

<Heading as="h4" level="3">

  Level 3 as h4

</Heading>

Align
Link to this heading

<Heading align="left">Left</Heading>

<Heading align="center">Center</Heading>

<Heading align="right">Right</Heading>

Color
Link to this heading

<Stack alignItems="center" direction="horizontal" justifyContent="space-around">

  <Stack>

    <Heading color="accent11">Accent 11</Heading>

    <Heading color="error11">Error 11</Heading>

    <Heading color="warning11">Warning 11</Heading>

    <Heading color="success11">Success 11</Heading>

  </Stack>

  <Stack>

    <Heading color="neutral12">Neutral 12</Heading>

    <Heading color="neutral11">Neutral 11</Heading>

    <Heading color="neutral10">Neutral 10</Heading>

  </Stack>

</Stack>

Responsive
Link to this heading

By default, headings resize for smaller devices. You can disable this feature with the responsive property.

<Heading level="2" responsive={false}>

  I will not resize

</Heading>
Edit on GitHub