Heading
The quick brown fox jumps
| Prop | Type | Default |
|---|---|---|
| size | 'sm' | 'md' | 'lg' | '2xl' | '3xl' | '4xl' | '5xl' | - |
| color | 'base' | 'brand' | base |
| level | 1 | 2 | 3 | 4 | 5 | 6 | 2 |
| contrast | boolean | true |
| html | string | - |
| text | string | - |
| as | HTMLTag | `h${level}` |
| HTML Attributes | Polymorphic<`h${level}`> | - |
Examples
The quick brown fox jumps
The quick brown fox jumps
The quick brown fox jumps
The quick brown fox jumps
The quick brown fox jumps
The quick brown fox jumps
---
import Heading from 'fulldev-ui/components/Heading.astro'
---
<Heading level={1}>The quick brown fox jumps</Heading>
<Heading level={2}>The quick brown fox jumps</Heading>
<Heading level={3}>The quick brown fox jumps</Heading>
<Heading level={4}>The quick brown fox jumps</Heading>
<Heading level={5}>The quick brown fox jumps</Heading>
<Heading level={6}>The quick brown fox jumps</Heading>
The quick brown fox jumps
The quick brown fox jumps
The quick brown fox jumps
---
import Heading from 'fulldev-ui/components/Heading.astro'
---
<Heading size="sm">The quick brown fox jumps</Heading>
<Heading size="md">The quick brown fox jumps</Heading>
<Heading size="lg">The quick brown fox jumps</Heading>
The quick brown fox jumps
The quick brown fox jumps
---
import Heading from 'fulldev-ui/components/Heading.astro'
---
<Heading>The quick brown fox jumps</Heading>
<Heading contrast={false}>The quick brown fox jumps</Heading>
The quick brown fox jumps
The quick brown fox jumps
---
import Heading from 'fulldev-ui/components/Heading.astro'
---
<Heading color="base">The quick brown fox jumps</Heading>
<Heading color="brand">The quick brown fox jumps</Heading>
The quick brown fox jumps
The quick brown fox jumps
---
import Heading from 'fulldev-ui/components/Heading.astro'
---
<Heading contrast={false} color="base">The quick brown fox jumps</Heading>
<Heading contrast={false} color="brand">The quick brown fox jumps</Heading>