Tile

Groups actionable content to make it easy to scan.

Tile

To implement Tile component into your project you’ll need to the import at least the Tile:

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

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

<Tile title="Title" />

Props

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

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.