Footer
The always-dark grid-paper footer. Every slot comes with Hack Club defaults: the logo, “For teens, by teens.”, social links, the copyright line and a theme toggle. To remove a default, pass an empty element to its slot. An optional illustration can peek over the top edge.
<hc-footer>
<hc-footer-column heading="Hack Club">
<a href="#">Philosophy</a>
<a href="#">Team & board</a>
<a href="#">Brand guide</a>
</hc-footer-column>
<hc-footer-column heading="Resources">
<a href="#">Clubs</a>
<a href="#">Hackathons</a>
<a href="#">HCB</a>
</hc-footer-column>
</hc-footer>API
Attributes
| Name | Type | Default | Description |
|---|---|---|---|
logo-href | string | "/" | Where the logo links |
Slots
| Name | Description |
|---|---|
(default) | <hc-footer-column heading="…"> elements containing links |
logo | Replace the flag |
about | Text under the logo |
social | Replace the social icons |
legal | Replace the copyright line |
end | Bottom-right controls (default: a theme toggle) |
art | An illustration overlapping the top edge |
CSS parts
| Name | Description |
|---|---|
footer | The <footer> element |