Heading

Used to render semantic HTML heading elements.

Extends the Heading component from Chakra UI. For non-level headings (subheadings), see Text with font ThemeFont.SubHeader.

Component usage

import { Heading } from "@caspeco/casper-ui-library";

export default function Demo() {
  return <Heading as="h3">A nice heading</Heading>;
}

The as-property defines the heading level, this will render as an <h3>-HTML tag. You should always check what level your header should be based on where it is placed in your page content.

“A common navigation technique for users of screen reading software is jumping from heading to quickly determine the content of the page. Because of this, it is important to not skip one or more heading levels. Doing so may create confusion, as the person navigating this way may be left wondering where the missing heading is.”

Source: MDN Web Docs: Heading Elements.

This is the reason for the as-property being required for Heading.

Size

The heading size is set with the fontSize-property. Default value (and the smallest font size recommended for heading usage) is ThemeFontSize.XLarge.

Note: Heading levels (h1, h2, h3 etc) should indicate order of page content. They should not be used for styling, instead use fontSize.

import { Heading, Stack, ThemeFontSize } from "@caspeco/casper-ui-library";

export default function Demo() {
  return (
    <Stack whiteSpace="nowrap" w="100%">
      <Heading as="h1" fontSize={ThemeFontSize.X6Large}>
        (6xl) Casper UI Library
      </Heading>
      <Heading as="h2" fontSize={ThemeFontSize.X5Large}>
        (5xl) Casper UI Library
      </Heading>
      <Heading as="h3" fontSize={ThemeFontSize.X4Large}>
        (4xl) Casper UI Library
      </Heading>
      <Heading as="h4" fontSize={ThemeFontSize.X3Large}>
        (3xl) Casper UI Library
      </Heading>
      <Heading as="h5" fontSize={ThemeFontSize.X2Large}>
        (2xl) Casper UI Library
      </Heading>
      <Heading as="h6" fontSize={ThemeFontSize.XLarge}>
        (xl) Casper UI Library
      </Heading>
    </Stack>
  );
}

Truncate heading

If you’d like to truncate the heading after a specific number of lines, pass the noOfLines prop.

This will render an ellipsis when the heading exceeds the width of the parent container.

import { Box, Heading } from "@caspeco/casper-ui-library";

export default function Demo() {
  return (
    <Box maxWidth="100px">
      <Heading noOfLines={1} as="h1">
        I will be cut off by an ellipsis
      </Heading>
    </Box>
  );
}