SdgsHighlight

Top-page excerpt of a company's sustainability initiatives, shown as accent cards, teasing through to the full sustainability page.

Landing

Usage

import { SdgsHighlight } from "@zudo-sg/ui/src/landing/sdgs-highlight/sdgs-highlight";

<SdgsHighlight heading="Working toward a sustainable future" initiatives={initiatives} href="/sustainability/sdgs" />

Default

Narrow (card wrap)

Source

import { SdgsHighlight } from "@zudo-sg/ui/src/landing/sdgs-highlight/sdgs-highlight";

<SdgsHighlight heading="Working toward a sustainable future" initiatives={initiatives} href="/sustainability/sdgs" />

Live CSS

Injected into the previews above. SdgsHighlight

/* Live CSS — edits inject into every preview above.
   Try overriding a component utility, e.g.:
   .btn { letter-spacing: 0.04em; } */