GitHub

Link Column

A footer / sitemap / mega-menu column: heading + thin rule + a list of links. Inherits currentColor (the rule is derived from it), so it reads on a brand footer or a light surface without carrying brand values.

Stable .astro import EsaLinkColumn from '@esa/ecology/esa-link-column.astro';

On a light surface

Mitigation work
  • Projects
  • Contracts
  • Portfolios
  • Work elements
  • Estuary program
  • Tributary habitat
Reporting
  • Report Center
  • Programs
  • Maps
  • Publications
<EsaLinkColumn heading="Mitigation work" links={[{ label: 'Projects' }, …]} />

On a brand surface (currentColor)

Mitigation work
  • Projects
  • Contracts
  • Portfolios
  • Work elements
  • Estuary program
  • Tributary habitat
Reporting
  • Report Center
  • Programs
  • Maps
  • Publications
<div style="background:var(--color-primary);color:#fff">
  <EsaLinkColumn heading="Mitigation work" links={[…]} />
</div>

API

PropTypeDefaultDescription
heading string — Column heading.
href string — Optional link on the heading itself.
links { label: string; href?: string }[] — The list of links.

Theming surface

Every public token this component reads, extracted from its source at build time. The Resolves to column walks each token's real lineage — component → semantic → primitive → raw value — so you can see exactly where re-pointing it lands. A spoke re-skins by overriding these in its theme-<slug>.css; component internals are never edited. No hook for what you need? File it with /request-lego.

TokenTierResolves to
--link-column-heading-font-size component clamp(0.75rem, 0.66rem + 0.44vw, 0.9375rem) via --type-size-200
--link-column-item-font-size component clamp(0.6875rem, 0.61rem + 0.38vw, 0.875rem) via --type-size-150
--link-column-rule-color component color-mix(in srgb, currentColor 40%, transparent)
--font-weight-medium primitive 500
--spacing-100 primitive 0.25rem
--spacing-200 primitive 0.5rem