Tile

Tile

import Tile from "@kiwicom/orbit-components/lib/Tile";
<Tile title="Title" />

Props

NameTypeDefaultDescription
childrenReact.NodeContent of expandable Tile.
asstring"div"The element used for the root node.
dataTeststringOptional prop for testing purposes.
idstringSet id for Tile
descriptionReact.NodeThe description of the Tile.
expandablebooleanfalseIf true, the Tile will be expandable.
externalbooleanfalseIf true, the Tile opens link in a new tab. See Functional specs
headerReact.NodeThe header of the Tile. Useful when you need different layout than combination of e.g. title and description properties.
hrefstringThe URL of the link to open when Tile is clicked. See Functional specs
htmlTitlestringHTML attribute title for adding extra piece of information.
noHeaderIconbooleanfalseIf true, the icon on the right won’t appear. But when Tile is expandable, this property won’t have any effect.
noPaddingbooleanIf true, the children content won’t have inner spacing.
iconReact.NodeDisplayed icon on the left side of the Tile.
initialExpandedbooleanfalseInitial state of expandable Tile when it mounts.
onClickevent => void \| PromiseFunction for handling onClick event.
titleReact.NodeThe title of the Tile.
expandedbooleanIf true, the Tile will be expanded.

Functional specs

  • When the external is specified, noopener value will be automatically added to attribute rel for security reason.
  • By passing the href prop into Tile, it will render into a element.