Grand Wildlife Zoo · Styleguide

Foundation F2 · base components

Rule <Rule /> <Rule diamond />

Gold horizontal rule with optional center diamond.

Act I
Act II
Corners <Corners />

4-corner ornate bracket frame. Wraps any element set to position:relative.

Act I
Hero frame
Act II
Painted frame
Ribbon <Ribbon>...</Ribbon>

Dark-brown ribbon header band (Act II primary; degrades on Act I).

Act I
Zone 16 · Conservation Center
Act II
Zone 02 · African Savannah
Pin <Pin top="..." left="..." />

Red painted-map pin marker. Absolutely positioned over its parent.

Act I
Act II
MapVignette <MapVignette size="...">...</MapVignette>

Circular painted-map vignette; pois slot for Pin overlays.

Act I
Act II
Card <Card act="..." interactive></Card>

Generic card. Switches surface for the requested Act; optional interactive variant.

Act I
Explore

Journey through extraordinary habitats.

Conserve

Hover or focus this card.
Act II
Highlights

16 zones · strong circulation · high family appeal.

Impact

Hover or focus this card.
Button <Button variant="primary|ghost" />

Polymorphic — renders as anchor when href is set.

Act I
As link
Act II
As link
Badge <Badge tone="lc|nt|vu|en|cr|ew|ex|neutral" />

IUCN status chip + neutral eyebrow chip.

Act I
Featured LC NT VU EN CR EW EX
Act II
Featured LC NT VU EN CR EW EX