## Card with everything

```js
const [checked, setChecked] = React.useState(1);
<SilkeCardGrid>
  {ipsum.list(5, (key) => (
    <SilkeCard
      key={key}
      colorBackdrop={key % 3 === 0 ? 'neutral-5' : true}
      title={ipsum.name()}
      subTitle={ipsum.name(5)}
      image={ipsum.image()}
      checked={checked === key}
      onCheck={(doCheck) => setChecked(doCheck ? key : -1)}
      tags={[
        { label: 'This is a tag' },
        { label: 'This is a tag with a veeeeeeeery long label' },
        { label: 'This is a tag with a veeeeeeeery long label' },
      ]}
      tagsTop={
        key % 3 === 0
          ? [{ label: 'Template', size: 'tiny' }]
          : key % 2 === 0
            ? [{ icon: 'project-plan', color: 'yellow', kind: 'primary' }]
            : []
      }
      menu={[{ label: 'Item 1' }, { label: 'Item 2' }]}
    />
  ))}
</SilkeCardGrid>;
```

## Card with multiple images

```js
<SilkeCardGrid>
  {ipsum.list(5, (key) => (
    <SilkeCard
      key={key}
      title={ipsum.name()}
      subTitle={ipsum.name(5)}
      image={[
        ipsum.image(),
        ipsum.image(),
        ipsum.image(),
        ipsum.image(),
        ipsum.image(),
        ipsum.image(),
      ]}
      menu={[{ label: 'Item 1' }, { label: 'Item 2' }]}
    />
  ))}
</SilkeCardGrid>
```

## Small cards

```js
const [checked, setChecked] = React.useState(0);

<SilkeCardGrid small>
  {ipsum.list(5, (key) => (
    <SilkeCard
      key={key}
      title={ipsum.name()}
      subTitle={ipsum.name(5)}
      image={ipsum.image()}
      checked={checked === key}
      tagsTop={
        key % 3 === 0
          ? [{ icon: 'tooltip', kind: 'primary' }]
          : key % 2 === 0
            ? [{ icon: 'project-plan', color: 'yellow', kind: 'primary' }]
            : []
      }
      onCheck={(doCheck) => setChecked(doCheck ? key : -1)}
    />
  ))}
</SilkeCardGrid>;
```

## Card with text

```js
<SilkeCardGrid>
  {ipsum.list(5, (key) => (
    <SilkeCard
      key={key}
      title={ipsum.name(10)}
      subTitle={ipsum.name(5)}
      image={ipsum.image()}
      text={ipsum.text()}
      onClick={() => console.log('Focused')}
    />
  ))}
</SilkeCardGrid>
```

## Small cards

```js
const [selected, setSelected] = React.useState(1);

<SilkeCardGrid small>
  {ipsum.list((key) => (
    <SilkeCard
      key={key}
      selected={key === selected}
      image={ipsum.image()}
      title={ipsum.name()}
      subTitle={ipsum.name(5)}
      onClick={() => setSelected(key)}
    />
  ))}
</SilkeCardGrid>;
```

## Loading cards (skeletons)

```js
const [isLoading, setLoading] = React.useState(true);

<SilkeBox column gap>
  <SilkeButton
    label="Toggle loading"
    onClick={() => setLoading(!isLoading)}
    kind="ghost"
    width="xxxl"
  />

  <SilkeCardGrid loading={isLoading}>
    {ipsum.list(3, (key) => (
      <SilkeCard key={key} image={ipsum.image()} title={ipsum.name()} subTitle={ipsum.name(5)} />
    ))}
  </SilkeCardGrid>

  <SilkeCardGrid small loading={isLoading}>
    {ipsum.list(3, (key) => (
      <SilkeCard key={key} image={ipsum.image()} title={ipsum.name()} subTitle={ipsum.name(5)} />
    ))}
  </SilkeCardGrid>
</SilkeBox>;
```