Flight Card - Copy this React, Mui Component to your project
Certainly! Here is a detailed breakdown of the visual layout of the flight card for a designer to recreate it: ### Top Section (Header) - **Airline Information**: - Left-aligned at the top. - **Airline Logo** (American Airlines logo) followed by **American Airlines** text. - Below the airline name, in smaller font, "Operated by KLM Royal Dutch Airlines". - Below that, in even smaller font, "Airbus A320 Neo · AA1139". ### Middle Section (Main Information) - **Flight Times and Locations**: - **Departure Time and Location**: - On the left side, a **dot** icon indicating the starting point. - "8:13 AM CEST" in bold, large font. - Below that, in smaller font, "Oslo (TRF) · 8:13 AM CEST". - Below that, in even smaller font, "Thu, May 21 2023". - **Layover**: - Centered horizontally with a dotted line connecting the departure and arrival sections. - "Overnight layover" in red text. - "Copenhagen (CPH)" in regular font. - Below that, in smaller font, "6h 15m". - **Arrival Time and Location**: - On the right side, a **plane** icon indicating the destination. - "11:23 PM CEST" in bold, large font. - Below that, in smaller font, "Rome (CIA) · 6:23 PM CET". - Below that, in even smaller font, "Fri, May 22 2023". ### Bottom Section (Additional Information) - **Travel Duration and Availability**: - Left-aligned, small font. - "Travel time 12h 50m". - "9 Seats Remaining". - "4 Classes Available". - "75 kg CO2e". - **Additional Indicators** (on the right side of the middle section): - "Cheapest" in a blue rounded rectangle. - "Often delayed by 30+ min" in a yellow rounded rectangle. - "-23% Emissions" in a green rounded rectangle. - "Combinable" in a purple rounded rectangle. ### Price and Action Button - **Price Information**: - Right-aligned. - Large, bold font. - "$540.67 / passenger". - **Action Button**: - Below the price. - Blue button with white text "Select Flight". ### Visual Style and Spacing - **Colors**: - Background: White or light gray. - Text: Mostly black, with specific highlights (red for layover, blue for cheapest, yellow for delays, green for emissions, purple for combinable). - Icons: Consistent with the airline’s color scheme. - **Spacing**: - Ample padding around sections for clarity. - Use of dividers and icons to separate information clearly. - **Fonts**: - Clear, legible fonts with varying weights for emphasis (bold for main times and prices, regular for details, smaller fonts for dates and additional information). By following this detailed description, a designer can recreate the flight card with a clear and organized layout, ensuring all the important information is visually distinct and easy to read.
