@highlight-ui/tile

Using npm:

1npm install @highlight-ui/tile

Using yarn:

1yarn add @highlight-ui/tile

Using pnpm:

1pnpm install @highlight-ui/tile

In your (S)CSS file:

1@import url('@highlight-ui/tile');

Once the package is installed, you can import the library:

1import { Tile, LinkTile } from '@highlight-ui/tile';

Usage

1import React from 'react';
2import { Tile } from '@highlight-ui/tile';
3
4export default function TileExample() {
5  return (
6    <Tile>
7      <Typography component="h2" token="heading-2xl" color="text-subdued">
8        35
9      </Typography>
10      <Typography component="h6" token="heading-small" color="text-subdued">
11        employees
12      </Typography>
13    </Tile>
14  );
15}

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.