Cross Links
The CrossLinkTile component is used for crosslinking to other pages (or to invoke some action as 'button') using bigger tiles.
Usage
_10import {_10 CrossLinkTileIcon,_10 CrossLinkTile,_10 CrossLinkTileDescription,_10 CrossLinkTileTitle_10} from '@ef-global/backpack/Link'
As anchor with title only
Title
_10<CrossLinkTile as="a" href="https://www.google.pl" target="_blank">_10 <CrossLinkTileTitle>Title</CrossLinkTileTitle>_10</CrossLinkTile>
Inverse colors
_10<CrossLinkTile as="a" href="https://www.google.pl" target="_blank">_10 <CrossLinkTileTitle>Title</CrossLinkTileTitle>_10</CrossLinkTile>
As button with title only
_10<CrossLinkTile_10 as="button"_10 onClick={() => console.log("This is button now!")}_10>_10 <CrossLinkTileTitle>Title</CrossLinkTileTitle>_10</CrossLinkTile>
As button with title and icon
_10<CrossLinkTile as="button" type="submit">_10 <CrossLinkTileIcon>_10 <IconBeachClub />_10 </CrossLinkTileIcon>_10 <CrossLinkTileTitle>Title</CrossLinkTileTitle>_10</CrossLinkTile>
As anchor with title, description and icon
TitleThis is description
_10<CrossLinkTile as="a" href="https://www.google.com" target="_blank">_10 <CrossLinkTileIcon>_10 <IconBeachClub />_10 </CrossLinkTileIcon>_10 <CrossLinkTileTitle>Title</CrossLinkTileTitle>_10 <CrossLinkTileDescription>This is description</CrossLinkTileDescription>_10</CrossLinkTile>
As anchor with title, description and flag
Title
_10<CrossLinkTile as='a' href='https://www.google.com' target='_blank'>_10 <CrossLinkTileIcon>_10 <FlagAe32 style={{ width: '24px', height: '24px' }} />_10 </CrossLinkTileIcon>_10 <CrossLinkTileTitle>Title</CrossLinkTileTitle>_10</CrossLinkTile>