Tile

Copy
Copied
<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

NameTypeDescription
tostringThe URL to link to when the tile is clicked.
iconstringSource of the icon.
altTextstringAlternative text for the icon.
headerstringTitle of tile.
childrenstringContent of tile.
bgColorstringDefines the background-color style property. Default value: #ffffff
bgImagestringDefines the background-image style property. Default value: none
colorstringDefines the color of text.
disableArrowbooleanHides the arrow. Default value: false
headerAlign'left' | 'right' | 'center' | 'justify'Defines the text-align property for header. Default value: left
textAlign'left' | 'right' | 'center' | 'justify'Defines the text-align property for content. Default value: left