Flight Card Components Demo

Demonstration of FlightCardFlightInformation and FlightCardFlightFares components.

FlightCard Sub-Components Demo

Components FlightCardFlightInformation i FlightCardFlightFares migrats al Design System amb suport complet per a temes, accessibilitat i responsive design.

FlightCardFlightInformation

Component que mostra la informació del vol: aerolínia, horaris, durada, escales i emissions.

IberiaIberia*
10:30MAD
→
15:45FRA
5h 15m
IB3201
-0% CO₂
IberiaIberia
14:30MAD
→
16:00LHR
1h 30m
IB6275
-0% CO₂

FlightCardFlightFares

Component que mostra les tarifes disponibles amb opcions de selecció i comparació.

Basic

Flex

Basic

—

Tarifes seleccionades per comparar:

[
  null,
  null
]

Características

FlightCardFlightInformation

  • Informació completa del vol amb múltiples segments
  • Tooltips informativos amb hover
  • Indicadors d'emissions amb colors semàntics
  • Gestió d'operadors diferents
  • Responsive design per a dispositius mòbils

FlightCardFlightFares

  • Suport per a 1 o múltiples tarifes
  • Checkboxes personalitzats per a comparació
  • Botons d'acció diferenciats (primary/secondary)
  • Gestió d'estat per a selecció i comparació
  • Placeholders per a tarifes inexistents

Accessibilitat

  • Focus management i outline visible
  • Etiquetes ARIA apropiades
  • Navegació per teclat completa
  • Colors amb contrast adequat
  • Screen reader compatible