InitiativeGrid

Sustainability-style "initiative" card grid, each card numbered and top-rule accented.

Content

Usage

import { InitiativeGrid } from "@zudo-sg/ui/src/landing/initiative-grid/initiative-grid";

<InitiativeGrid heading="Our initiatives" initiatives={initiatives} />

Default (5 initiatives)

SDGs initiatives (data swap)

Narrow (card wrap)

Source

import { InitiativeGrid } from "@zudo-sg/ui/src/landing/initiative-grid/initiative-grid";

<InitiativeGrid heading="Our initiatives" initiatives={initiatives} />

Live CSS

Injected into the previews above. InitiativeGrid

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