LCFS - Update Summary Card Layout to Match Dashboard Design Standard
- Dominant language
- Python
- Stars
- 6
- Forks
- 6
- Avg merge
- 2d 7h
- Merged PRs (30d)
- 87
Description
**Describe the task**
Update the Summary card component to align with the dashboard card design standard shown in the provided example. The Summary card should use the same visual structure, spacing, header treatment, sizing, alignment, and responsive behaviour as other dashboard cards.
**Purpose**
Create a consistent user experience across the application by standardising dashboard card layouts. Consistent card styling improves usability, visual hierarchy, accessibility, and makes dashboard information easier to scan and interpret.
**Acceptance Criteria**
- [ ] The Summary card layout matches the standard dashboard card design shown in the approved design example.
- [ ] The card header styling is consistent with other dashboard cards, including colour, placement, sizing, and spacing.
- [ ] Content within the Summary card is aligned and spaced consistently with the dashboard design system.
- [ ] The card dimensions, padding, margins, and visual hierarchy align with other dashboard cards on the page.
- [ ] Responsive behaviour is consistent across supported screen sizes and devices.
- [ ] No visual regressions are introduced to existing dashboard cards.
- [ ] The updated design meets WCAG 2.2 accessibility requirements.
**Additional context**
- The Summary card should visually match the styling used by dashboard cards such as Transactions and Compliance Reports.
- Review spacing, typography, card container styling, and header presentation to ensure consistency across the dashboard.
- Validate behaviour across supported browsers and devices.
- Ensure accessibility via keyboard navigation and selection.
- Please validate compliance with WCAG 2.2 accessibility guidelines.
- Test across different browsers and devices to confirm consistent behaviour.
Contributor guide
Research direction
Start by locating the Summary card and comparing it with the Transactions and Compliance Reports dashboard cards and the approved design example. Validate layout, spacing, header treatment, sizing, responsive behaviour, keyboard navigation, WCAG 2.2 compliance, and regression coverage across supported browsers and devices.
Written by the indexing model from the issue text.
Assessment
- Domain
- accessibility, design, frontend
- Issue type
- Feature
- Difficulty
- 4/5
- Estimated time
- 3-5 days
- Activity status
- Active
- Clarity
- Mostly clear
- Newbie friendliness
- 48/100