PictureCard / React
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 onEnter
andSpace
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,
});