@highlight-ui/tile
v4.2.5
Published
[![npm](https://img.shields.io/npm/v/@highlight-ui/tile)](https://www.npmjs.com/package/@highlight-ui/tile) [![personio.design](https://img.shields.io/static/v1?label=Personio&message=zeroheight&color=yellow)](https://www.personio.design/40d648a47/v/0/p/3
Downloads
490
Maintainers
Keywords
Readme
@highlight-ui/tile
Using npm:
npm install @highlight-ui/tile
Using yarn:
yarn add @highlight-ui/tile
Using pnpm:
pnpm install @highlight-ui/tile
In your (S)CSS file:
@import url('@highlight-ui/tile');
Once the package is installed, you can import the library:
import { Tile, LinkTile } from '@highlight-ui/tile';
Usage
import React from 'react';
import { Tile } from '@highlight-ui/tile';
export default function TileExample() {
return (
<Tile>
<Typography component="h2" token="heading-2xl" color="text-subdued">
35
</Typography>
<Typography component="h6" token="heading-small" color="text-subdued">
employees
</Typography>
</Tile>
);
}
Props 📜
Tile
| Prop | Type | Required | Default | Description |
| :---------- | :---------------- | :------- | :------ | :----------------------------------- |
| children
| React.ReactNode
| Yes | | The contents inside the Tile |
| className
| string
| No | | Allows providing a custom class name |
LinkTile
| Prop | Type | Required | Default | Description |
| :---------- | :---------------- | :------- | :------ | :--------------------------------------------- |
| children
| React.ReactNode
| Yes | | The contents inside the Tile |
| href
| string
| Yes | | Specifies the URL of the page the link goes to |
| target
| React.ReactNode
| No | | Specifies where to open the link |
| className
| string
| No | | Allows providing a custom class name |
Contributing 🖌️
Please visit personio.design for usage guidelines and visual examples.
If you're interested in contributing, please visit our contribution page.