Footer — Krysalicss

Page-anchoring surface. Asymmetric block padding (heavier at the bottom) keeps the last row of links off the viewport edge. Tracks --kc-bg / --kc-fg by default; opts into a brand-pinned surface via .is-* combinations.

Live

Default footer: tracks theme bg/fg

Live

HTML

<footer class="footer">
<p style="margin: 0;">&copy; 2026 Krysalicss. <a href="#about">About</a> &middot; <a href="#contact">Contact</a></p>
</footer>

Minimal sass

@use '@adnap/krysalicss' with (
  $feature-list: ('base-reset', 'base-global', 'layout-footer')
);

Playground

.is-primary: brand-pinned surface

Live

HTML

<footer class="footer is-primary">
<p style="margin: 0;">Brand-pinned. Nested <a href="#docs">links</a> inherit the surface fg.</p>
</footer>

Minimal sass

@use '@adnap/krysalicss' with (
  $feature-list: ('base-reset', 'base-global', 'layout-footer')
);

Playground

Markup

<!-- Default: tracks --kc-bg / --kc-fg, follows the active theme. -->
<footer class="footer">
  <p>&copy; 2026 Krysalicss. <a href="/about">About</a> · <a href="/contact">Contact</a></p>
</footer>

<!-- Themed band via the shared .is-* combinations. -->
<footer class="footer is-primary">
  <p>Brand-pinned surface, links inherit the surface fg.</p>
</footer>

Variables

Variable	Default	Notes
`$selector`	`'.footer'`	Re-scope freely.
`$padding-block-start`	`3rem`	Top padding (logical).
`$padding-block-end`	`6rem`	Heavier bottom padding so the last row of links breathes.
`$padding-inline`	`$global-gap` (1rem)	Horizontal padding (logical).
`$default-combination`	`$color-combination-default`	Fallback tuple if neither `--kc-footer-bg/fg` nor `--kc-bg/fg` resolve.

Tokens consumed

--kc-footer-bg, --kc-footer-fg — direct overrides (highest precedence).
--kc-bg, --kc-fg — theme tokens, used as the default fallback.
--kc-<combination>-bg, --kc-<combination>-fg — emitted under each .footer.is-<combination> modifier.

Override example

@use '@adnap/krysalicss/layout/footer' with (
  $selector: '.site-footer',
  $padding-block-start: 4rem,
  $padding-block-end: 8rem,
  $padding-inline: 2rem,
);

Nested anchors inherit the surface foreground (color: currentColor) and stay underlined — the page-level --kc-link is calibrated against the page background, not the footer surface, so pinning links to currentColor keeps them contrast-safe on themed .is-* variants. Same rationale as Box and Alert.