Create a responsive Fylo data storage component UI based on the provided design reference.
The component should clearly display the user’s storage usage, remaining storage, and a progress bar.
This is a pure UI task — focus on layout, spacing, typography, and responsiveness.
No backend or complex JavaScript required.
🧩 Requirements
Build a responsive data storage component.
Include:
-Total storage
-Used storage
-Remaining storage
-A progress bar visualizing usage
-Implement hover & focus states for any interactive elements.
📋 Tasks / Checklist
-Set up the basic project structure.
-Create the component container with proper spacing and alignment.
-Add headings, labels, and numerical indicators for storage usage.
-Build and style the progress bar with filled and empty portions.
-Apply responsive design using CSS flexbox/grid + media queries.
-Implement hover & focus states where applicable.
-Ensure pixel-perfect typography and spacing relative to the mockup.
-Test UI on multiple screen sizes.
🎯 Acceptance Criteria
-Progress bar is styled correctly with filled and unfilled sections.
-All text labels and usage values are properly displayed.
-Hover and focus states are implemented and accessible.
-No JavaScript logic is required; layout-only implementation acceptable.
-No visual overflow or broken layout on smaller screens.
Mockup:
Create a responsive Fylo data storage component UI based on the provided design reference.
The component should clearly display the user’s storage usage, remaining storage, and a progress bar.
This is a pure UI task — focus on layout, spacing, typography, and responsiveness.
No backend or complex JavaScript required.
🧩 Requirements
Build a responsive data storage component.
Include:
-Total storage
-Used storage
-Remaining storage
-A progress bar visualizing usage
-Implement hover & focus states for any interactive elements.
📋 Tasks / Checklist
-Set up the basic project structure.
-Create the component container with proper spacing and alignment.
-Add headings, labels, and numerical indicators for storage usage.
-Build and style the progress bar with filled and empty portions.
-Apply responsive design using CSS flexbox/grid + media queries.
-Implement hover & focus states where applicable.
-Ensure pixel-perfect typography and spacing relative to the mockup.
-Test UI on multiple screen sizes.
🎯 Acceptance Criteria
-Progress bar is styled correctly with filled and unfilled sections.
-All text labels and usage values are properly displayed.
-Hover and focus states are implemented and accessible.
-No JavaScript logic is required; layout-only implementation acceptable.
-No visual overflow or broken layout on smaller screens.
Mockup: