Interactable - many touch areas. The heading in the title can act as a hyperlink.
The pointer cursor will remain and all other touch points like a link in the content segment or a button will utilize their given statefulness.
| Name | Type | Required | Default | Description |
|---|---|---|---|---|
| children | ReactNode | false | ||
| className | string | false | ||
| orientation | "portrait" | "landscape" | true | ||
| style | CSSProperties | false | Additional CSS styles | |
| variant | "interactive" | false | To change tile behaviour |
Link is used to navigate to an item.
| Name | Type | Required | Default | Description |
|---|---|---|---|---|
| children | ReactNode | false | ||
| className | string | false | Additional classNames | |
| orientation | "portrait" | "landscape" | true | ||
| style | CSSProperties | false | Additional CSS styles | |
| variant | "link" | false | To change tile behaviour |
Selectable can be treated like checkbox or radio button.
| Name | Type | Required | Default | Description |
|---|---|---|---|---|
| children | ReactNode | false | ||
| className | string | false | Additional classNames | |
| disabled | boolean | false | Only with selectable variant. | |
| orientation | "portrait" | "landscape" | true | ||
| selected | boolean | false | Only with selectable variant. | |
| style | CSSProperties | false | Additional CSS styles | |
| variant | "selectable" | false | To change tile behaviour | |
| onClick | Function | false | A function for controlling |
| Name | Type | Required | Default | Description |
|---|---|---|---|---|
| children | ReactNode | false | ||
| className | string | false | Additional classNames | |
| style | CSSProperties | false | Additional CSS styles |
As children can be passed text, pill and etc.
As children can be passed img, svg, video, picture and etc.
| Name | Type | Required | Default | Description |
|---|---|---|---|---|
| children | ReactNode | false | ||
| className | string | false | Additional classNames | |
| onOverlayClick | MouseEventHandler<HTMLDivElement> | false | ||
| overlay | boolean | false | ||
| style | CSSProperties | false | Additional CSS styles |
| Name | Type | Required | Default | Description |
|---|---|---|---|---|
| children | ReactNode | false | ||
| className | string | false | Additional classNames | |
| style | CSSProperties | false | Additional CSS styles |
| Name | Type | Required | Default | Description |
|---|---|---|---|---|
| children | ReactNode | false | ||
| className | string | false | Additional classNames | |
| style | CSSProperties | false | Additional CSS styles |
| Name | Type | Required | Default | Description |
|---|---|---|---|---|
| children | ReactNode | false | ||
| className | string | false | Additional classNames | |
| style | CSSProperties | false | Additional CSS styles |
Additional classNames