Illustration

Communicates information in an interesting visual way.

Illustration

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

import Illustration from "@kiwicom/orbit-components/lib/Illustration";

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

<Illustration name="Accommodation" size="small" />

Props

Table below contains all types of the props available in Illustration component.

NameTypeDefaultDescription
altstringOptional property for passing own alt attribute to the DOM image element. Bby default, the name of illustration is used.
dataTeststringOptional prop for testing purposes.
nameenumName for the displayed illustration.
sizeenum"medium"The size of the Illustration.
spaceAfterenumAdditional margin-bottom after component. See this docs

enum

namesize
"Accommodation""extraSmall"
"AirHelp""small"
"AirportTransport""medium"
"AirportTransportTaxi""large"
"AirportShuttle""display"
"AppQRCode"
"BaggageDrop"
"Boarding"
"BoardingPass"
"BusinessTravel"
"CabinBaggage"
"CompassCollectPoints"
"CompassDemoted"
"CompassEmailAdventurer"
"CompassEmailCaptain"
"CompassEmailPromoted"
"CompassEmailPromotedCaptain"
"CompassEmailScout"
"CompassPoints"
"CompassTravelPlan"
"CompassSaveOnBooking"
"DesktopSearch"
"EnjoyApp"
"EVisa"
"Error"
"Error404"
"FastTrack"
"Feedback"
"Help"
"Improve"
"Insurance"
"InviteAFriend"
"GroundTransport404"
"Login"
"Lounge"
"Mailbox"
"Meal"
"MobileApp"
"Money"
"MusicalInstruments"
"NetVerify"
"NoBookings"
"NoFavoriteFlights"
"Nomad"
"NomadNeutral"
"NoNotification"
"NoResults"
"Offline"
"OnlineCheckIn"
"OpenSearch"
"Parking"
"Pets"
"PlaceholderAirport"
"PlaceholderDestination"
"PlaceholderHotel"
"PlaceholderTours"
"PlaneAndMoney"
"PriorityBoarding"
"Rating"
"ReferAFriend"
"RentalCar"
"Seating"
"SpecialAssistance"
"SportsEquipment"
"Success"
"Time"
"TicketFlexi"
"TimelineBoarding"
"TimelineDropBaggage"
"TimelineLeave"
"TimelinePick"
"Tours"
"Train"
"TransportBus"
"TransportTaxi"
"WomanWithPhone"