Heading

heading text structured in levels

Chapter 1

Props

a11yTitle

Custom label to be used by screen readers. When provided, an aria-label will be added to the element.

"Open Drop"

alignSelf

How to align along the cross axis when contained in a Box or along the column axis when contained in a Grid.

"start"

"center"

"end"

"stretch"

color

A color identifier to use for the text color.

"neutral-1"

{"dark": "light-1", "light": "dark-2"}

gridArea

The name of the area to place this inside a parent Grid.

"a parent grid area name"

level

The heading level. It corresponds to the number after the 'H' for the DOM tag. Set the level for semantic accuracy and accessibility. The sizing can be further adjusted using the size property.

margin

The amount of margin around the component. An object can be specified to distinguish horizontal margin, vertical margin, and margin on a particular side.

"xsmall"

"small"

"medium"

"large"

"xlarge"

{
  "vertical": "...",
  "horizontal": "...",
  "top": "...",
  "bottom": "...",
  "left": "...",
  "right": "..."
}

responsive

Whether the font size should be scaled for mobile environments.

truefalse

size

The font size is primarily driven by the chosen tag. But, it can be adjusted via this size property. The tag should be set for semantic correctness and accessibility. This size property allows for stylistic adjustments.

"small""medium""large""xlarge""string"

textAlign

How to align the text inside the heading.

"start""center""end"

truncate

Restrict the text to a single line and truncate with ellipsis if it is too long to all fit.

truefalse

Theme

global.breakpoints

The possible breakpoints that could affect font-size and max-width

{
  "small": {
    "value": 768,
    "borderSize": {
      "xsmall": "1px",
      "small": "2px",
      "medium": "4px",
      "large": "6px",
      "xlarge": "12px"
    },
    "edgeSize": {
      "none": "0px",
      "hair": "1px",
      "xxsmall": "2px",
      "xsmall": "3px",
      "small": "6px",
      "medium": "12px",
      "large": "24px",
      "xlarge": "48px"
    },
    "size": {
      "xxsmall": "24px",
      "xsmall": "48px",
      "small": "96px",
      "medium": "192px",
      "large": "384px",
      "xlarge": "768px",
      "full": "100%"
    }
  },
  "medium": {"value": 1536},
  "large": {}
}

global.edgeSize

The possible sizes for margin.

{
  "none": "0px",
  "hair": "1px",
  "xxsmall": "3px",
  "xsmall": "6px",
  "small": "12px",
  "medium": "24px",
  "large": "48px",
  "xlarge": "96px",
  "responsiveBreakpoint": "small"
}

heading.extend

Any additional style for Heading.

"any CSS"

(props) => {}

heading.level

The level that impacts line-height, max-width, font size, weight and family of the Heading. Heading level is automatically adjusted at different screen sizes. These screen sizes are derived from breakpoints.

{
  "1": {
    "font": {},
    "small": {
      "size": "34px",
      "height": "40px",
      "maxWidth": "816px"
    },
    "medium": {
      "size": "50px",
      "height": "56px",
      "maxWidth": "1200px"
    },
    "large": {
      "size": "82px",
      "height": "88px",
      "maxWidth": "1968px"
    },
    "xlarge": {
      "size": "114px",
      "height": "120px",
      "maxWidth": "2736px"
    }
  },
  "2": {
    "font": {},
    "small": {
      "size": "26px",
      "height": "32px",
      "maxWidth": "624px"
    },
    "medium": {
      "size": "34px",
      "height": "40px",
      "maxWidth": "816px"
    },
    "large": {
      "size": "50px",
      "height": "56px",
      "maxWidth": "1200px"
    },
    "xlarge": {
      "size": "66px",
      "height": "72px",
      "maxWidth": "1584px"
    }
  },
  "3": {
    "font": {},
    "small": {
      "size": "22px",
      "height": "28px",
      "maxWidth": "528px"
    },
    "medium": {
      "size": "26px",
      "height": "32px",
      "maxWidth": "624px"
    },
    "large": {
      "size": "34px",
      "height": "40px",
      "maxWidth": "816px"
    },
    "xlarge": {
      "size": "42px",
      "height": "48px",
      "maxWidth": "1008px"
    }
  },
  "4": {
    "font": {},
    "small": {
      "size": "18px",
      "height": "24px",
      "maxWidth": "432px"
    },
    "medium": {
      "size": "18px",
      "height": "24px",
      "maxWidth": "432px"
    },
    "large": {
      "size": "18px",
      "height": "24px",
      "maxWidth": "432px"
    },
    "xlarge": {
      "size": "18px",
      "height": "24px",
      "maxWidth": "432px"
    }
  },
  "5": {
    "font": {},
    "small": {
      "size": "16px",
      "height": "22px",
      "maxWidth": "384px"
    },
    "medium": {
      "size": "16px",
      "height": "22px",
      "maxWidth": "384px"
    },
    "large": {
      "size": "16px",
      "height": "22px",
      "maxWidth": "384px"
    },
    "xlarge": {
      "size": "16px",
      "height": "22px",
      "maxWidth": "384px"
    }
  },
  "6": {
    "font": {},
    "small": {
      "size": "14px",
      "height": "20px",
      "maxWidth": "336px"
    },
    "medium": {
      "size": "14px",
      "height": "20px",
      "maxWidth": "336px"
    },
    "large": {
      "size": "14px",
      "height": "20px",
      "maxWidth": "336px"
    },
    "xlarge": {
      "size": "14px",
      "height": "20px",
      "maxWidth": "336px"
    }
  }
}

heading.weight

Default heading weight used unless a per level heading is defined.

heading.font

Default heading font used unless a per level heading is defined.

{}

heading.responsiveBreakpoint

The breakpoint to trigger changes in the Heading layout. The actual values will be derived from global.breakpoints.

"small"