Tile

<Tile>
  Default tile
</Tile>

<ClickableTile
  href="#"
>
  Clickable Tile
</ClickableTile>

<TileGroup
  defaultSelected="default-selected"
  legend="Radio Tile Group"
  name="tile-group"
>
  <RadioTile
    id="tile-1"
    name="tiles"
    tabIndex={0}
    value="standard"
  >
    Radio Tile
  </RadioTile>
  <RadioTile
    id="tile-2"
    name="tiles"
    tabIndex={0}
    value="default-selected"
  >
    Radio Tile
  </RadioTile>
  <RadioTile
    id="tile-3"
    name="tiles"
    tabIndex={0}
    value="selected"
  >
    Radio Tile
  </RadioTile>
</TileGroup>

<div
  aria-label="selectable tiles"
  role="group"
>
  <SelectableTile
    id="tile-1"
    name="tiles"
    tabIndex={0}
    title="title"
    value="value"
  >
    Multi-select Tile
  </SelectableTile>
  <SelectableTile
    id="tile-2"
    name="tiles"
    tabIndex={0}
    title="title"
    value="value"
  >
    Multi-select Tile
  </SelectableTile>
  <SelectableTile
    id="tile-3"
    name="tiles"
    tabIndex={0}
    title="title"
    value="value"
  >
    Multi-select Tile
  </SelectableTile>
</div>

<ExpandableTile
  tabIndex={0}
  tileCollapsedIconText="Interact to Expand tile"
  tileExpandedIconText="Interact to Collapse tile"
  tileMaxHeight={0}
  tilePadding={0}
>
  <TileAboveTheFoldContent>
    <div style={{ height: '64px'}}>
      Above the fold content here
    </div>
  </TileAboveTheFoldContent>
  <TileBelowTheFoldContent>
    <div style={{ height: '64px'}}>
      Below the fold content here
    </div>
  </TileBelowTheFoldContent>
</ExpandableTile>