Site Footer#
Properties
Color Scheme
Border
SiteFooter implements a 3-column-on-desktop CSS Grid.
Props
| name | type | default | description |
|---|
Logo#
Use SiteFooterLogo to insert a logo that works with the footer.
Unlike the logo component for SiteHeader. This one is not a link by default.
List#
Properties
Color Scheme
site-footer-list-xa horizontal list with dividers between the list items.site-footer-list-ya subtle vertical listsite-footer-lista responsive list style
Links#
You can assign site-footer-link class to increase affordance for clickable items.
Properties
Content Presets#
this is just a temporary solution until we figure out what the essential content are and how we should manage them (for example via a CMS).
Essential Links#
import { siteFooterContentPresets } from "@tinka/react";
/*
[
{ text: "privacy", href: "/privacy" },
{ text: "cookies", href: "/cookies" },
{ text: "algemene voorwaarden", href: "/algemene-voorwaarden" },
]
*/
siteFooterContentPresets.links
.map(({ text, href }) => {
return { text, href: `https://tinka.nl${href}` };
/* output:
*/
})
.map(({ text, href }) => {
return (
<a className="site-footer-link" href={href}>
{text}
</a>
);
});Example: Super Minimal Footer#
<Triangle flatSide="bottom" slope={0.15} />
<SiteFooter noSlogan />