Hero Image with CTA
As a developer, I need to create a "Hero Image with CTA" component to be utilized in the ACC.org microsites to deliver a captivating user experience while promoting specific campaigns or products.
Acceptance Criteria:
-
Arches CSS Version: The component should be developed and tested using the latest version of Arches CSS, as this depends on the component's production.
-
Design Pattern Adherence: The component should strictly follow the design pattern provided at this link. All styling, formatting, and elements in the design pattern should be correctly incorporated into the component.
-
Image Resizing for Multiple Devices: The component should use the provided image sizes based on the device viewed: Desktop Size 1200x300, Laptop Size 1024x256, Tablet Size 600x300, Small Size 300x450.
-
Breadcrumb Navigation: The component should display breadcrumb navigation that includes a back arrow and the connecting page of the main site this microsite connects to.
-
Configurable Microsite Title: The component should include a scalable title that adjusts its size based on the viewport.
-
Configurable CTA Title, Description, Button URL, and Label: The component should have fields for the CTA title, description, button URL, and label that can be configured to meet the needs of the specific campaign or product being promoted.
Definition of Done:
- The "Hero Image with CTA" component is completed and meets the acceptance criteria.
- The user experience team has reviewed the component.
- After Deployment, training is set for the Editors to know and use the new component.
Demo
TODO
- 🔼 Build the component