Heading

A polymorphic, responsive, adaptable heading component.

The quick brown fox jumps over the lazy dog

size xs sm md lg xl

color base brand

contrast

text

--- 
import { Heading } from 'fulldev-ui'
---

<Heading
  size="md"
  color="base"
  contrast={true}
  text="The quick brown fox jumps over the lazy dog"
/>

Props

Prop	Type	Default
level	1 | 2 | 3 | 4 | 5 | 6	2
size	xs | sm | md | lg | xl	-
color	base | brand	-
contrast	boolean	true
html	string	-
text	string	-
as	HTMLTag	h2
HTML Attributes	Polymorphic<as>	-

Example

size

The size prop cascades: it is inherited from the parent and it is applied to all children.

Heading sizes are handpicked to match the body text size. The sizes are also responsive, where the larger sizes respond more than the smaller ones.

The quick brown fox jumps over the lazy dog

The quick brown fox jumps over the lazy dog

The quick brown fox jumps over the lazy dog

The quick brown fox jumps over the lazy dog

The quick brown fox jumps over the lazy dog

---
import { Heading } from 'fulldev-ui'
---

<Heading size="xs">The quick brown fox jumps over the lazy dog</Heading>
<Heading size="sm">The quick brown fox jumps over the lazy dog</Heading>
<Heading size="md">The quick brown fox jumps over the lazy dog</Heading>
<Heading size="lg">The quick brown fox jumps over the lazy dog</Heading>
<Heading size="xl">The quick brown fox jumps over the lazy dog</Heading>

level

Levels behave similar to sizes, but they also set the html tag being used. For example, level 1 is the same as as=“h1”.

This way you can have a section with size lg for example, which a h1 till h6 that automatically have the right sizes.

The quick brown fox jumps over the lazy dog

The quick brown fox jumps over the lazy dog

The quick brown fox jumps over the lazy dog

The quick brown fox jumps over the lazy dog

The quick brown fox jumps over the lazy dog

The quick brown fox jumps over the lazy dog

---
import { Heading } from 'fulldev-ui'
---

<Heading level={1}>The quick brown fox jumps over the lazy dog</Heading>
<Heading level={2}>The quick brown fox jumps over the lazy dog</Heading>
<Heading level={3}>The quick brown fox jumps over the lazy dog</Heading>
<Heading level={4}>The quick brown fox jumps over the lazy dog</Heading>
<Heading level={5}>The quick brown fox jumps over the lazy dog</Heading>
<Heading level={6}>The quick brown fox jumps over the lazy dog</Heading>

contrast

Set to true by default on Headings, which you can override by setting it to false.

The quick brown fox jumps over the dog

The quick brown fox jumps over the dog

---
import { Heading } from 'fulldev-ui'
---

<Heading>The quick brown fox jumps over the dog</Heading>
<Heading contrast={false}>The quick brown fox jumps over the dog</Heading>