Heading, kicker & gradient text
Headings are set in Zarathustra, the serif display face of hackclub.com, over Phantom Sans body text. <hc-kicker> is the tracked-out label above section titles, and <hc-gradient-text> fills text with the red→orange brand gradient or the animated rainbow from the homepage hero. If you prefer classes, .hc-display, .hc-title, .hc-heading, .hc-kicker, .hc-lead and .hc-gradient-text come with the CSS.
Lead paragraphs use the muted text color at 24px.
<hc-kicker>Hack Club</hc-kicker>
<hc-heading level="1" size="display">
A home for <hc-gradient-text variant="rainbow">teen</hc-gradient-text> hackers
</hc-heading>
<hc-heading level="2">Build something <hc-gradient-text>awesome</hc-gradient-text></hc-heading>
<hc-heading level="3">Section heading</hc-heading>
<p class="hc-lead">Lead paragraphs use the muted text color at 24px.</p>API
Attributes
| Name | Type | Default | Description |
|---|---|---|---|
hc-heading level | number | 2 | Heading level, 1–6 |
hc-heading size | "display" | "title" | "heading" | "xl" | "lg" | "body" | by level | Visual size, independent of level |
hc-kicker color | "red" | "muted" | "inherit" | "red" | |
hc-gradient-text variant | "brand" | "deep" | "rainbow" | "brand" | |
hc-gradient-text still | boolean | false | Stop the rainbow animation |
CSS parts
| Name | Description |
|---|---|
heading | The <h1>–<h6> inside <hc-heading> |