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.
| Name | Type | Default | Description |
|---|---|---|---|
| children | React.Node | Content of expandable Tile. | |
| as | string | "div" | The element used for the root node. |
| dataTest | string | Optional prop for testing purposes. | |
| id | string | Set id for Tile | |
| description | React.Node | The description of the Tile. | |
| expandable | boolean | false | If true, the Tile will be expandable. |
| external | boolean | false | If true, the Tile opens link in a new tab. See Functional specs |
| header | React.Node | The header of the Tile. Useful when you need different layout than combination of e.g. title and description properties. | |
| href | string | The URL of the link to open when Tile is clicked. See Functional specs | |
| htmlTitle | string | HTML attribute title for adding extra piece of information. | |
| noHeaderIcon | boolean | false | If true, the icon on the right won’t appear. But when Tile is expandable, this property won’t have any effect. |
| noPadding | boolean | If true, the children content won’t have inner spacing. | |
| icon | React.Node | Displayed icon on the left side of the Tile. | |
| initialExpanded | boolean | false | Initial state of expandable Tile when it mounts. |
| onClick | event => void \| Promise | Function for handling onClick event. | |
| title | React.Node | The title of the Tile. | |
| expanded | boolean | If true, the Tile will be expanded. |
Functional specs
- When the
externalis specified,noopenervalue will be automatically added to attributerelfor security reason. - By passing the
hrefprop into Tile, it will render intoaelement.