# Missing implementation & Design

```js
<SilkeBox column gap>
  <SilkeTile title="Tile title" subTitle="Tile Sub Title">
    <p>Text info in this text</p>
  </SilkeTile>

  <SilkeTile title="Clickable tile" subTitle="With tags" tags={['tags', 'text']} onClick={() => {}}>
    <p>Text info in this text</p>
  </SilkeTile>
  <SilkeTile title="Selected tile" subTitle="Tile Sub Title" selected onClick={() => {}}>
    <p>Text info in this text</p>
  </SilkeTile>
</SilkeBox>
```

## With menu

```js
<SilkeBox column gap>
  <SilkeTile title="With menu" menu={[{ label: 'Item 1' }, { label: 'Item 2' }]}>
    <p>Text info in this text</p>
  </SilkeTile>
</SilkeBox>
```

## Basic expandable

```js
const [firstOpen, setFirstOpen] = React.useState();
<SilkeBox column gap>
  <SilkeTile title="Tile title" subTitle="Tile Sub Title" expandable onExpand={setFirstOpen}>
    <h3>This text shows when expanded</h3>
    {ipsum.p()}
  </SilkeTile>
  <SilkeTile
    title="Allready expanded tile"
    subTitle="This tile will close when the first tile get expaneded"
    expandable
    expanded={!firstOpen}
  >
    {ipsum.p()}
  </SilkeTile>
</SilkeBox>;
```

## Async/Promise expandable

```js
const [text, setText] = React.useState();

const handleExpand = (expanding) => {
  if (expanding && !text) {
    return sleep(2000).then(() => setText(ipsum.p()));
  }
  setText(null);
};
<SilkeTile title="Tile title" subTitle="Tile Sub Title" expandable onExpand={handleExpand}>
  {text}
</SilkeTile>;
```

## Tile with media

```js
<SilkeBox column gap>
  <SilkeTile
    icon="check"
    title="Tile with simple avatar icon"
    subTitle="Tile Sub Title"
    onClick={() => {}}
  >
    <p>Text info in this text</p>
  </SilkeTile>

  <SilkeTile
    icon={{ type: 2, value: { url: ipsum.image() } }}
    subTitle={ipsum.text()}
    title="Tile with image icon"
  />

  <SilkeTile
    image={ipsum.image(800)}
    title="Tile with 16:9 media image"
    subTitle="Tile Sub Title"
    onClick={() => {}}
  >
    <p>Text info in this text</p>
  </SilkeTile>
</SilkeBox>
```