Numbered Cards #6

2025-08-18T14:06:50Z

an.di commented

2025-08-18 14:06:50 +00:00

Add NumberedCards Component

Overview

This PR introduces a responsive NumberedCards component system for the CommunityRule marketing site.
It displays a 3-step process flow with numbered cards, titles, and descriptions, adapting across multiple breakpoints. The system includes four subcomponents (NumberedCards, NumberedCard, SectionNumber, SectionHeader) with Storybook documentation and SEO schema integration.

Changes

Implemented responsive layouts across breakpoints (xsm, sm, lg, xl)
Added SectionHeader with dynamic title (“How CommunityRule works” / “How CommunityRule helps”) and subtitle
Built NumberedCard subcomponent with step number, title, description, and PNG background icon
Created SectionNumber for number overlays with proper alt text
Added CTA button behavior:
- Xsm/Sm → “Create CommunityRule” (default variant, centered)
- Lg/Xl → “See how it works” (outlined variant, centered)
Applied design tokens for colors, spacing, typography
Verified accessibility (WCAG 2.1 AA, semantic headings, ARIA labels, 44px+ touch targets)
Integrated SEO schema markup for numbered steps
Added Storybook stories for responsive states and content variations

Screenshots

How to Test

Run Storybook and open NumberedCards stories.
Verify:
- Layout adapts at xsm, sm, lg, xl breakpoints
- SectionHeader titles/subtitles scale as expected
- Numbered cards render steps 1–3 with correct text/icons
- CTA button changes style and position per breakpoint
- Keyboard navigation and screen readers correctly read numbered steps
- Touch targets meet 44px+ guideline
Cross-check rendering in Chrome, Firefox, Safari, Edge.
Test on mobile to confirm responsive behavior and touch targets.

Notes

Dark mode support will be handled in a future PR.
Animation for card entry/hover may be added later.
Component is self-contained but reusable across other pages if needed.

# Add NumberedCards Component ## Overview This PR introduces a responsive **NumberedCards** component system for the CommunityRule marketing site. It displays a 3-step process flow with numbered cards, titles, and descriptions, adapting across multiple breakpoints. The system includes four subcomponents (NumberedCards, NumberedCard, SectionNumber, SectionHeader) with Storybook documentation and SEO schema integration. ## Changes - Implemented **responsive layouts** across breakpoints (xsm, sm, lg, xl) - Added **SectionHeader** with dynamic title (“How CommunityRule works” / “How CommunityRule helps”) and subtitle - Built **NumberedCard** subcomponent with step number, title, description, and PNG background icon - Created **SectionNumber** for number overlays with proper alt text - Added **CTA button behavior**: - Xsm/Sm → “Create CommunityRule” (default variant, centered) - Lg/Xl → “See how it works” (outlined variant, centered) - Applied **design tokens** for colors, spacing, typography - Verified **accessibility** (WCAG 2.1 AA, semantic headings, ARIA labels, 44px+ touch targets) - Integrated **SEO schema markup** for numbered steps - Added **Storybook stories** for responsive states and content variations ## Screenshots <img width="213" alt="Screenshot 2025-08-18 at 8.05.50 AM.png" src="attachments/409a5c67-3503-40bc-8f13-86bab89f5404"> <img width="495" alt="Screenshot 2025-08-18 at 8.03.45 AM.png" src="attachments/10fc64a3-d9cd-499a-a9bf-8ac8e8a5db03"> <img width="781" alt="Screenshot 2025-08-18 at 8.04.36 AM.png" src="attachments/aca62ebb-538a-40dd-b7a6-c3db56ca5cb4"> <img width="1250" alt="Screenshot 2025-08-18 at 8.05.03 AM.png" src="attachments/f41567aa-1c38-4d4d-9c2a-6f7b7679e9ef"> ## How to Test 1. Run Storybook and open `NumberedCards` stories. 2. Verify: - Layout adapts at xsm, sm, lg, xl breakpoints - SectionHeader titles/subtitles scale as expected - Numbered cards render steps 1–3 with correct text/icons - CTA button changes style and position per breakpoint - Keyboard navigation and screen readers correctly read numbered steps - Touch targets meet 44px+ guideline 3. Cross-check rendering in Chrome, Firefox, Safari, Edge. 4. Test on mobile to confirm responsive behavior and touch targets. ## Notes - Dark mode support will be handled in a future PR. - Animation for card entry/hover may be added later. - Component is self-contained but reusable across other pages if needed.

Screenshot 2025-08-18 at 8.03.45 AM.png

113 KiB

Screenshot 2025-08-18 at 8.05.50 AM.png

59 KiB

Screenshot 2025-08-18 at 8.04.36 AM.png

136 KiB

Screenshot 2025-08-18 at 8.05.03 AM.png

181 KiB

an.di added 5 commits 2025-08-18 14:06:50 +00:00

Default NumberedCards size implemented a6add70067

Numbered Cards small breakpoint 6b214f2711

Numbered Cards large breakpoint 3ab67d5096