Last updated 6 months ago

Tile

<ThinTile to="#" icon={iconSrc} header="Autonomy">
  Lorem ipsum dolor sit amet, pri putent oportere quaerendum in, ea mea justo invenire aliquando.
  Usu modo suavitate ea. Et sed labitur epicurei adipiscing. Nibh zril labitur an usu.
</ThinTile>
<ThinTile to="#" header="Autonomy" bgImage={gradient} color="#fff" textAlign="left">
  Lorem ipsum dolor sit amet, pri putent oportere quaerendum in, ea mea justo invenire
  aliquando. Usu modo suavitate ea. Et sed labitur epicurei adipiscing. Nibh zril labitur an
  usu. Usu modo suavitate ea. Et sed labitur epicurei adipiscing. Nibh zril labitur an usu. Et
  sed labitur epicurei adipiscing. Nibh zril labitur an usu.
</ThinTile>

<WideTile to="#" header="Opportunity">
  Lorem ipsum dolor sit amet, pri putent oportere quaerendum in, ea mea justo invenire aliquando.
  Usu modo suavitate ea. Et sed labitur epicurei adipiscing. Nibh zril labitur an usu.
</WideTile>
<WideTile to="#" header="Opportunity" icon={themeImg} disableArrow>
  Lorem ipsum dolor sit amet, pri putent oportere quaerendum in, ea mea justo invenire
  aliquando. Usu modo suavitate ea. Et sed labitur epicurei adipiscing. Nibh zril labitur an
  usu.
</WideTile>

Props

NameTypeDefaultDescription
tostringThe URL to link to when the tile is clicked.
iconstringSource of the icon.
headerstringTitle of tile.
childrenstringContent of tile.
bgColorstring#ffffffDefines the background-color style property.
bgImagestringnoneDefines the background-image style property.
colorstringDefines the color of text.
disableArrowbooleanfalseHides the arrow.
headerAlign'left' | 'right' | 'center' | 'justify'leftDefines the text-align property for header.
textAlign'left' | 'right' | 'center' | 'justify'leftDefines the text-align property for content.