Etihad Design System
Comprehensive component library and design documentation for building modern web experiences. Browse components, atoms, molecules, and organisms organized by design patterns.
Design System
Browse our comprehensive component library organized by design hierarchy
Foundation
- → Design Tokens
- → Grid System
- → Typography
- → Typography Arabic
- → Spacing
- → Position
- → Divider
- → Loader
- → Ghost Loader
- → SVG Loader
- → SVG Loader (Static)
- → SVG Loader (Static HTML)
12 components
Atoms
- → Button
- → Link
- → Input
- → Select
- → Checkbox
- → Radio
- → Toggle
- → Text Area
- → Chips
- → Avatar
- → Tooltip
- → Progress Circle
- → Loyalty Ring
- → UAE Dirham
- → Controls
- → Announcement
16 components
Molecules
- → Cards
- → Content Cards
- → Segment Card
- → Feature Card
- → Grid Card
- → Rich Card
- → NBA Card
- → Extra Card
- → Extra Card 2.0
- → Logged In Card
- → Flight Card
- → Trip Card
- → Accordion
- → List Dropdown
- → Table
- → Dynamic Table
- → Modal
- → Popover
- → Toast Message
- → Toast Notification
- → Notification
- → Segmented Control
- → Stepper Mini
- → Look Up
- → Accordion Content
- → Stacked Content Card
26 components
Organisms
- → Navigation Bar
- → Navigation Bar Hidden
- → Profile Revamp
- → Anchored Navigation
- → Vertical Anchored Nav
- → Sticky Navigation
- → Tab Bar
- → Sidebar Tab
- → Sub Header
- → Header
- → Footer
- → Footer Minimized
- → Steppers
- → Steppers OND Flow
- → Content Carousel
- → Home Carousel
- → Fare Brands
- → Flight Status
- → Flight Details
- → Flight Search Pax
- → Flight Selection Tab
- → Flight Search Tabs
- → Seat Map
- → Seat Map Legends
- → Boarding Pass
- → Baggage Calculator
- → Miles Calculator
- → Recent Searches
- → OND Typeahead
- → Search Results
- → Panel Fullpage
- → Deals Cards
- → Bento Box
- → Lounge Access
- → Feature Carousel
- → Media Highlight
- → Homepage Banner
- → Beyond Borders
- → Video Stories
- → OND
- → Multi Pax Tab
- → Right Nav
- → Currency
- → Extra Baggage Modal
- → Seat Map Airbus A320
- → Seat Map B787-9
- → Seat Map B787-10
31 components
Reference Pages
- → Tier Benefits
- → Tier Tabs
- → Tiers at a Glance
- → Loyalty
- → Earn Miles
- → Points Transfer
- → Calendar
- → Messages
- → Misc Components
- → AEM Components
- → 404 Page
- → Email Template
- → Profile Upload Photo
- → Profile Dashboard
- → Profile Dashboard V2
- → Group PNR
- → Arabic Page (RTL)
- → Flight Search Panel
- → Sheer ID
- → Finjan Cups
- → Help Page
14 pages
Content Pages
- → Login
- → Create Account
- → Change Password
- → Passenger Details
- → Personal Information
- → Company Details
- → Lead Gen Form
- → Manage Preferences
- → Contact Us
- → Profile Account
- → Profile Benefits
- → Profile Miles
- → Profile Transactions
- → Profile Trips
- → Economy Deals
- → Our Partners
- → News Details
- → Stopover Widget
- → Loading Page
- → Share Boarding Pass
- → The Residence
- → Summary Card
- → Upload Passport
- → Passport Verify
- → Hero Banner
- → Timeline Nav
- → Form Page
- → Member Survey Form
- → Member Survey Form Message
- → Our Partners Page
- → Etihad Guest Platinum
- → MOTG
- → Submit Claim
- → Trips
- → Loading Page (No Header)
- → Standalone Login
- → Standalone Create Account
- → Standalone Forgot Password
- → Standalone with Announcement Bar
- → Standalone CUG
- → Profile About Companion
- → Profile About Wallet
- → Profile Wallet Details
- → Profile Travel Companions
- → Profile Benefits Custom
- → Profile Benefits Fulfillment
- → Profile Benefits Rewards
- → Profile Miles Claim
- → Profile Miles Family
- → Profile Miles Transfer
- → Profile Miles Guest Transfer
- → Profile Dashboard Card (Mobile)
21 pages
Variants & Ghost States
- → 404 Page 1
- → 404 Page 2
- → 404 Page 3
- → Boarding Pass (Single)
- → Boarding Pass Complete
- → Boarding Pass Complete 1
- → Boarding Pass Modal
- → Boarding Pass Modal 1
- → Content Cards 1
- → Content Cards 2
- → Content Cards 3
- → Content Cards 4
- → Content Cards 5
- → Content Cards 6
- → Content Cards 7
- → Content Cards 8
- → Content Cards 10
- → Content Cards 11
- → Content Cards 12
- → Content Cards 13
- → Content Cards 14
- → Content Cards 15
- → Content Cards 16
- → Content Cards 17
- → Content Carousel 1
- → Content Carousel 2
- → Content Carousel 3
- → Content Carousel 4
- → Content Carousels Grid
- → Content Cards Ghost
- → Digital Wallet Ghost
- → Member Survey Form Ghost
- → Profile Landing Ghost
33 pages