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

<script setup>
import { color, setColors } from "~/composables/colors.ts"
import { useRoute } from "vue-router"

import Button from "~/components/ui/Button.vue"
import Card from "~/components/ui/Card.vue"
import Link from "~/components/ui/Link.vue"
import Layout from "~/components/ui/Layout.vue"
import Alert from "~/components/ui/Alert.vue"
import Spacer from "~/components/ui/layout/Spacer.vue"

const route = useRoute();
const here = route.path
</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)