Cost Comparison Widget
Component Detail
User Interface
low complexity
frontend
2
Dependencies
0
Dependents
0
Entities
0
Integrations
Description
Side-by-side comparison table or card pair showing manual reporting costs versus Meander subscription cost and net saving. Accepts organization size as input and renders structured cost breakdown targeting finance and procurement stakeholders.
cost-comparison-widget
Sources & reasoning
Primary UI component required by the blueprint. Delivers the side-by-side cost breakdown to finance and procurement stakeholders visiting the sales site independently. Must be fully static and keyboard/screen-reader accessible.
No source references — this artifact was included based on reasoning alone (see above).
Responsibilities
- Render two-column cost comparison layout (manual vs Meander)
- Accept organization size input and trigger recalculation
- Display current cost, Meander cost, and net saving figures
- Support keyboard navigation and screen-reader labels per WCAG 2.2 AA
- Allow deep-link pre-fill via URL query parameters for shared state with Impact Calculator
Interfaces
CostComparisonWidget({organizationSize: int})
onOrganizationSizeChange(size: int): void
getComparisonResult(): CostComparisonResult
Relationships
Dependencies (2)
Components this component depends on