PictureCard / React

Also known as ImageCard, TripCard

Displays a card with a picture and space for information and actions.

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

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

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

<PictureCard
  image={{
    original: "385x320",
    code: "dubai_ae",
    name: "Dubai Arab Emirates",
    placeholder: "385x320",
  }}
  subTitle="Prague"
  title="Dubai"
/>

Props

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

Name	Type	Default	Description
dataTest	`string`		Optional prop for testing purposes.
title	`string`		The title of PictureCard
subTitle	`string`		The subTitle of PictureCard
label	`string`		The label of PictureCard
children	`React.Node`		The content of PictureCard
actions	`React.Node`		Actions – especially Buttons that will be rendered on the bottom.
height	`string`	`"300"`	The height of PictureCard.
width	`string`		The width of PictureCard.
href	`string`		The link of PictureCard.
external	`boolean`	`false`	If `true`, PictureCard opens link in a new tab
image	`Image` `ImageCustom`		Image of PictureCard See Functional specs
onClick	`onClick`		Function for handling onClick event.
tabIndex	`string \| number`	`"0"`	Specifies the tab order of an element

Image

Table below contains all types of the props available for object in Image

Name	Type	Description
original	`string`	The size of image
name	`string`	The name of image, defines alt prop for image
code	`string`	The code of image, defines which image will be rendered.
placeholder	`string`	The preferred placeholder size See Functional specs

ImageCustom

Table below contains all types of the props available for object in Image

Name	Type	Description
name	`string`	The name of image, defines alt prop for image
src	`string`	The location of an image if you want it to be from your own source.

Functional specs

You don’t have to pass entire src of the image. Just dubai_ae, paris_fr etc. is enough.
OnClick is also called on Enter and Space keypresses.
For usage with server-side rendering (SSR), a placeholder can be emitted for it to work correctly. This is a React issue see more on this https://github.com/facebook/react/issues/15446 and https://github.com/zeit/next.js/issues/7047. Lastly if you are using Next.js you can do this workaround with dynamic import set to SSR false. https://nextjs.org/docs/advanced-features/dynamic-import#with-no-ssr

const PictureCard = dynamic({
  loader: () => import('PictureCard'),
  loading: () => <Placeholder />,
  ssr: false,
});