Goal:
When a user clicks the CTA button on an action card in resistance hub, mark it as "completed", persist that state using cookies, and reorder the box to the end of the grid.

 

Functional Requirements

• Each card on the page represents a task or action.

• Each card has a unique ID or identifier.

• When a user clicks the action button CTA on a card:

• Mark the box as completed (see designs below).
• Store this completion state in a cookie (or multiple cookies, if preferred).
• Move the box to the end of the grid layout.

• On page load:

• Check the cookie(s).
• Apply the completed visual state to relevant boxes (see designs below).
• Ensure completed boxes are placed at the end of the grid.

Cookie Details

• Store a list of completed box IDs in a single cookie (e.g., completedTasks).
• Set reasonable cookie expiry (e.g., 30–90 days).

 

DESIGNS BELOW - (OPTION 1)

• Checkbox icon with "Completed" on top of title
• Featured image disappears
• Title and description remain the same but are aligned left and font is block
• CTA changes to black font and black underline
• Background color changes to bright green #66CC00

 

Resources

• Figma design: https://www.figma.com/design/g8VVK7TqRGr2B2jFnGdnE1/Time-To-Resist---Fair-Share---GPI?node-id=148-857&t=9J15V8PA0omtHK7j-4 
• Resistance Hub tech spec: https://docs.google.com/document/d/1lLtQbrfjFBqRFT12H3VhBfdl3AvJVcmiHLtg4uZvixg/edit?usp=sharing