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

Name	Type	Description
to	string	The URL to link to when the tile is clicked.
icon	string	Source of the icon.
altText	string	Alternative text for the icon.
header	string	Title of tile.
children	string	Content of tile.
bgColor	string	Defines the background-color style property. Default value: #ffffff
bgImage	string	Defines the background-image style property. Default value: none
color	string	Defines the color of text.
disableArrow	boolean	Hides 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