105 lines
2.5 KiB
Markdown
105 lines
2.5 KiB
Markdown
<script setup>
|
|
import Card from "~/components/ui/Card.vue"
|
|
import Button from "~/components/ui/Button.vue"
|
|
import Link from "~/components/ui/Link.vue"
|
|
import Layout from "~/components/ui/Layout.vue"
|
|
import Spacer from "~/components/ui/Spacer.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>
|
|
|
|
## Small height and square aspect ratio
|
|
|
|
<Layout grid class="preview">
|
|
|
|
<div style="grid-column: 1 / 7; grid-row: span 2">
|
|
|
|
```vue-html
|
|
<Button outline icon="bi-star"/>
|
|
<Button outline icon="bi-star large"/>
|
|
<Button outline square-small icon="bi-star" />
|
|
<Button outline square-small icon="bi-star large" />
|
|
<Button primary square >b</Button>
|
|
<Button primary >c</Button>
|
|
<Button primary square-small >a</Button>
|
|
<Button primary low-height >e</Button>
|
|
```
|
|
|
|
</div>
|
|
|
|
<Button outline icon="bi-star"/>
|
|
<Button outline icon="bi-star large"/>
|
|
<Spacer />
|
|
<Button outline square-small icon="bi-star" />
|
|
<Button outline square-small icon="bi-star large" />
|
|
<Spacer />
|
|
<Button primary square >b</Button>
|
|
<Button primary >c</Button>
|
|
<Spacer />
|
|
<Button primary square-small >a</Button>
|
|
<Button primary low-height >e</Button>
|
|
|
|
</Layout>
|
|
<Layout grid class="preview">
|
|
|
|
<div style="grid-column: -1 / -6; grid-row: span 4">
|
|
|
|
```vue-html
|
|
<Link icon="bi-star" to="."/>
|
|
<Link square-small icon="bi-star" to="."/>
|
|
<Link square-small to=".">g</Link>
|
|
<Link square to=".">h</Link>
|
|
<Link to=".">i</Link>
|
|
<Link square-small to=".">j</Link>
|
|
<Link low-height to=".">k</Link>
|
|
<Link square low-height to=".">l</Link>
|
|
```
|
|
|
|
</div>
|
|
|
|
<Link icon="bi-star" to="."/>
|
|
<Link square-small icon="bi-star" to="."/>
|
|
<Link square-small to=".">g</Link>
|
|
<Link square to=".">h</Link>
|
|
<Link to=".">i</Link>
|
|
<Link square-small to=".">j</Link>
|
|
<Link low-height to=".">k</Link>
|
|
<Link square low-height to=".">l</Link>
|
|
|
|
</Layout>
|
|
|
|
## Widths in the grid
|
|
|
|
::: details Default widths
|
|
|
|
|
|
|
|
:::
|
|
|
|
[Designing Pages — The grid](designing-pages#grid)
|