# Typography

# Text components

  • CpHeading: used for headings. A h1 element by default.

# Heading

The CpHeading component is used for all headings. It directly maps to a h1 element by default. It can be changed using :heading-level props, passing heading level 'h1', 'h2', 'h3', 'h4', 'h5', 'h6'.

The size options are: 100, 200, 300, 400, 500 (default), 600, 700, 800, 900.

100: The quick brown fox jumps over the lazy dog

200: The quick brown fox jumps over the lazy dog

300: The quick brown fox jumps over the lazy dog

400: The quick brown fox jumps over the lazy dog

500: The quick brown fox jumps over the lazy dog

600: The quick brown fox jumps over the lazy dog

700: The quick brown fox jumps over the lazy dog

800: The quick brown fox jumps over the lazy dog

900: The quick brown fox jumps over the lazy dog

<cp-heading :size="100" heading-level="h3">100: The quick brown fox jumps over the lazy dog</cp-heading>
<cp-heading :size="200" heading-level="h3">200: The quick brown fox jumps over the lazy dog</cp-heading>
<cp-heading :size="300" heading-level="h3">300: The quick brown fox jumps over the lazy dog</cp-heading>
<cp-heading :size="400" heading-level="h3">400: The quick brown fox jumps over the lazy dog</cp-heading>
<cp-heading :size="500" heading-level="h3">500: The quick brown fox jumps over the lazy dog</cp-heading>
<cp-heading :size="600" heading-level="h3">600: The quick brown fox jumps over the lazy dog</cp-heading>
<cp-heading :size="700" heading-level="h3">700: The quick brown fox jumps over the lazy dog</cp-heading>
<cp-heading :size="800" heading-level="h3">800: The quick brown fox jumps over the lazy dog</cp-heading>
<cp-heading :size="900" heading-level="h3">900: The quick brown fox jumps over the lazy dog</cp-heading>

# Changing the semantic element

The CpHeading component will always render a h1 until you specify otherwise with the :heading-level property. It’s important to realize that the style of a heading is independent from the semantic underlying element.

Heading h3

<cp-heading heading-level="h3">Heading h3</cp-heading>

# CpHeading Props

# :heading-level string = 'h1'

Props mapped to :is attribute, allowing to change the semantic element ('h1', 'h2', 'h3', 'h4', 'h5', 'h6')

# :size enum = 500

The size of the heading.