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-background-brand);color:#fff">
  <EsaLinkColumn heading="Mitigation work" links={[…]} />
</div>

API

PropTypeDefaultDescription
heading string required Column heading.
href string — Optional link on the heading itself.
links LinkItem[] required The list of links.

Theming surface

Every public token this component reads, extracted from its source at build time, split by blast radius: the hooks that belong to this component, then the shared and system tokens it consumes alongside everything else. 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.

Type roles it names

This component does not set a size, weight, face or tracking of its own — it names a composite, and the composite carries all five. A composite is a class rather than a token, so none of it appears in the tables below; re-theme text by re-pointing the token family, not by editing the component.

RoleRe-pointReach
.typography-body-sm
  • --typography-body-sm-font-family 'DM Sans', sans-serif via --typography-font-family-sans → --font-family-dm-sans
  • --typography-body-sm-font-size clamp(0.6875rem, 0.61rem + 0.38vw, 0.875rem) via --font-size-150
  • --typography-body-sm-font-weight 350 via --typography-font-weight-regular → --font-weight-350
  • --typography-body-sm-letter-spacing 0.01em via --letter-spacing-default
  • --typography-body-sm-line-height 1.6 via --line-height-normal
+20 more components esa-alert-box, esa-breadcrumbs, esa-button-toggle, esa-card, esa-checkbox-group, esa-combobox, esa-command-palette, esa-date-picker, esa-empty-state, esa-file-upload, esa-form-field, esa-input-tag, esa-loading-overlay, esa-progress-bar, esa-radio-group, esa-search-panel, esa-select, esa-stat, esa-text-field, esa-textarea
.typography-label-md
  • --typography-label-md-font-family 'DM Sans', sans-serif via --typography-font-family-sans → --font-family-dm-sans
  • --typography-label-md-font-size clamp(0.75rem, 0.66rem + 0.44vw, 0.9375rem) via --font-size-200
  • --typography-label-md-font-weight 500 via --typography-font-weight-medium → --font-weight-500
  • --typography-label-md-letter-spacing 0.01em via --letter-spacing-default
  • --typography-label-md-line-height 1.6 via --line-height-normal
+33 more components esa-app-bar, esa-breadcrumbs, esa-button-group, esa-button-toggle, esa-card, esa-checkbox-group, esa-color-picker, esa-combobox, esa-command-palette, esa-confirm-dialog, esa-danger-zone, esa-date-picker, esa-dialog, esa-empty-state, esa-entity-search, esa-file-upload, esa-filter-container, esa-form-field, esa-header-nav, esa-input-tag, esa-page-header, esa-pillbox, esa-popover, esa-progress-bar, esa-radio-group, esa-range-slider, esa-select, esa-side-dialog, esa-sidebar-nav, esa-stat, esa-text-field, esa-textarea, esa-tooltip

Wired to this component

No other component reads these — re-point them and esa-link-column is the only thing that moves.

Token Tier Resolves to
--link-column-rule-color component color-mix(in srgb, currentColor 40%, transparent)

Shared tokens it reads

Owned by a family or by the semantic layer. Still overridable — but scope the override (esa-foo { --form-border-color: … }) unless you mean to move everything that reads it. Reach says what else that is.

Token Reach Resolves to
--typography-label-md-font-size semantic every component clamp(0.75rem, 0.66rem + 0.44vw, 0.9375rem) via --font-size-200
--font-size-150 primitive every component clamp(0.6875rem, 0.61rem + 0.38vw, 0.875rem)
--spacing-100 primitive every component 0.25rem
--spacing-200 primitive every component 0.5rem