funkwhale/front/ui-docs/using-width.md

<script setup>
import Card from "~/components/ui/Card.vue"
import Layout from "~/components/ui/Layout.vue"
</script>

# Using widths

## Add width via prop

<Layout flex class="preview" style="flex-grow: 1">

```vue-html
<Card min-content title='min-content' />
<Card tiny title='tiny' />
<Card buttonWidth title='buttonWidth' />
<Card small title='small' />
<Card medium title='medium' />
<Card auto title='auto' />
<Card width="170.5px" title='width=170.5px' />
<Card full title='full' />
```

  <Card min-content title='min-content' />
  <Card tiny title='tiny' />
  <Card buttonWidth title='buttonWidth' />
  <Card small title='small' />
  <Card medium title='medium' />
  <Card auto title='auto' />
  <Card width="170.5px" title='width=170.5px' />
  <Card full title='full' />
</Layout>

## Widths in the grid

::: details Default widths

![alt text](image-1.png)

:::

[Designing Pages — The grid](designing-pages#grid)