Tile

Small surfaces that highlight interesting bits of information. There are two variants: Tile and IngredientTile.

Polymorphic Component

By default, content is rendered inside a <div>, but this can be overriden by passing any valid tag name or component with the as prop.

Examples

Basic Brand Tile

A larger, data-centric tile. This is the default if tileType is omitted. Available in two sizes.

93%

report effective

104%

report effective

import { Tile } from '@curology/ui-components-web/react/Tile';

<Tile 
  size="{sm|lg}" 
  tileType="brand" 
  tileTitle="104%" 
  tileDescription="report effective" 
/>

Basic Highlight Tile

A smaller, text-based title. Available in two sizes.

4M+ served

4M+ served

import { Tile } from '@curology/ui-components-web/react/Tile';

<Tile 
  size="{sm|lg}" 
  tileType="highlight" 
  tileTitle="4M+ served" 
/>

Ingredient Tile

A large, scientific tile. Used for highlighting ingredients.

Az

Azelaic Acid

Keeps pores clear while reducing redness

import { IngredientTile } from '@curology/ui-components-web/react/Tile/IngredientTile';

<IngredientTile
  abbreviation="Az"
  ingredient="..."
  description="..."
/>

Multiple Ingredient Tiles

Several ingredient tiles can be chained together and their borders will collapse automatically.

Az

Azelaic Acid

Description

Tr

Tretinoin

Description

import { IngredientTile } from '@curology/ui-components-web/react/Tile/IngredientTile';

<IngredientTile
  abbreviation="Az"
  ingredient="..."
  description="..."
/>
...
<IngredientTile
  abbreviation="Tr"
  ingredient="..."
  description="..."
/>

Props

TileProps

Name	Type	Default Value	Required	Description
All attributes of a <div />
description	ReactNode		No	The content of the tile. Ignored for a `highlight` tile.
size	"lg" | "sm"	"lg"	No	How large should the tile be?
tileTitle	ReactNode		Yes	The primary content. Large, bold text for a `brand` tile, and the only content of a `highlight` tile.
tileType	"highlight" | "brand"	"brand"	No	Which type of tile should be rendered?

IngredientTileProps

Name	Type	Default Value	Required	Description
All attributes of a <div />
abbreviation	string		Yes	The ingredient symbol abbreviation. Usually two characters.
description	ReactNode		Yes	The content of the tile.
ingredient	string		Yes	The ingredient name.