To implement the Itinerary component into your project you’ll need to add the import:

import Itinerary, {
  ItinerarySegment,
  ItineraryStatus,
  ItineraryBadgeList,
  ItinerarySegmentStop,
  ItinerarySegmentDetail,
} from "@kiwicom/orbit-components/lib/Itinerary";

After adding import to your project you can use it simply like:

<Itinerary>
  <ItinerarySegment spaceAfter="large">
    <ItinerarySegmentStop
      city="Moscow"
      station="Sheremetyevo International Airport (SVO)"
      date="Fri, 19.10"
      time="14:05"
    />
    <ItinerarySegmentDetail duration="2h 30m" summary={<BadgeGroup />}>
      <CollapsedContent />
    </ItinerarySegmentDetail>
    <ItinerarySegmentStop
      city="Prague"
      station="Václav Havel Airport Prague (PRG)"
      date="Fri, 19.10"
      time="16:35"
    />
  </ItinerarySegment>
</Itinerary>

The ItinerarySegment component serves as a wrapper of atomic unit ItinerarySegmentStop and `ItinerarySegmentDetail, have a status prop for showing important information about the connection between two segments of a journey.

ItinerarySegmentStop is an atomic unit of the Itinerary component, shows two locations, date and time, have the warning property which changes the icon to <AlertCircle color="warning" /> to attract user attention to some important information about a journey.

ItineraryStatus is a wrapper for ItinerarySegment or a group of segments. Shows the status of the Itinerary or ItinerarySegment

ItinerarySegmentDetail serves as a connection between two ItinerarySegmentStop components (segments)

The table below contains the types of props of objects of type ContentItem.

The table below contains the types of props of objects of type ContentDetail.