About Unions storytelling. Homepage versions of Three-Column Callout, Strength in Numbers, and Organize your workplace are in Batch 4.
What Unions Do Marketing Design this
Example: https://aflcio.org/what-unions-do
Treat this as one landing, using the blocks below in this order:
- Three-Column Callout (hero: “Unions Begin With You”)
- Strength In Numbers (“The Union Difference”)
- How Unions Work
- Organize your workplace (“Unions Are Democratic Bodies”)
- Unions Advocate For And Provide (“People in Unions Advocate For”)
- Unions Don’t
How Unions Work (Block) Marketing Design this
Marketing explainer block.
Unions Advocate For And Provide (Block) Marketing Design this
Static marketing block.
Unions Don't (Block) Marketing Design this
Static marketing block.
Strike Map (Block) Marketing Design this
Example: https://aflcio.org/strike-map
Authorable (block)
| Field | Type | Required | Notes |
|---|---|---|---|
| Map Heading | String | Not Required | Default: “Strike Map”. Live example uses “FIND A PICKET LINE.” |
| Intro Copy | String Long | Not Required | Optional line under the heading. |
| CSV Upload | File | Required | Strike data. |
UI
| Part | Behavior now | Design |
|---|---|---|
| Layout | Desktop: list ~1/3 + map ~2/3. Mobile: map stacked above list; heading sits between them. | Need desktop + mobile. |
| List item | “{org} at {employer}” + “Learn More >”. Opens the detail panel. | Default, hover, selected (panel open). |
| Active item panel | Slides over the list. Back control closes it and resets the map. Contents: title; Details (notes); Striking Location(s) (click a location to zoom + open that pin’s popup); Point of Contact; Point of Contact Email; Donate (if a strike-fund URL exists). Omit empty sections. | This is the main detail UI. |
| Pin | Custom icon (default + hover). Click opens popup, zooms map, and opens the matching panel. | Default, hover, selected. Icon is ours to replace. |
| Cluster | Count badge on grouped pins (default + hover). | Default, hover. Icon is ours to replace. |
| Pin popup | Google InfoWindow: “{org} at {employer}”. Map click / Back / close resets. | We control popup styling and content — change it if the current one is too thin. |
| Map colors | Custom styled Google Map (muted land, teal water, teal pins in the current design). | We control map colors. Restyle if it should match the new system. |