7.8 KiB

Raw Permalink Blame History

import Section from "~/components/ui/Section.vue";

Layout section

Sections divide the page vertically. Choose an appropriate heading level for each section: h1 or h2 or h3.

<Section h3="My title" />

Align the section to the page

<Section h3="My title" alignLeft />

Make the section header align with the section contents

The section aligns its title and items to a grid, following the designs. To make sure the header of a section exactly aligns with its contents, set the item width:

Do you want to align the header to

no-items (mixed content),
tiny-items (each item is one column wide),
small-items (each item is two columns wide, e.g. default cards),
medium-items (each item is three columns wide, such as Activities or medium cards)?

If all items stretch all columns (style=grid-column: 1 / -1), use no-items.

<Section medium-items />

Provide an action

The link or button will be shown on the right side of the header.

<Layout stack gap-64>
  <Spacer />
  <Section h3="With a link"
    :action="{ text:'My library', to:'/' }" />

  <Section h3="With a button"
    :action="{ text:'Say hello!', onClick:()=>console.log('Hello') }" />
</Layout>

You can add props to the Link or Button, for example to make them primary or add an icon:

<Section solid primary icon="bi-star"
    h3="Example" :action="{ text:'Say hello!', onClick:()=>console.log('Hello') }" />

Set gaps between consecutive sections

Place consecutive sections into a Layout stack with a 64px gap (gap-64) to give them a regular vertical rhythm. Use different sizes for very small or very large headings.

Note the spacer above the layout. By default, sections begin at the baseline of the heading. This enables us to explicitly define the vertical rhythm, independently of the heading's line height.

<Spacer/>
<Layout stack gap-64>
  <Section h3="Section 1" />
  <Section h3="Section 2" />
</Layout>

Mix sections of different item widths

<Layout flex>
<Toggle v-model="alignLeft" label="Left-align the layout"/>
</Layout>

<Spacer />

<Layout stack gap-64>

<Section :alignLeft="alignLeft" small-items h3="Cards (small items)" :action="{ text:'more...', to:'/' }">
    <Card small title="Relatively Long Album Name">
        Artist Name
    </Card>
    <Card small title="Relatively Long Album Name">
        Artist Name
    </Card>
    <Card small title="Relatively Long Album Name">
        Artist Name
    </Card>
</Section>

<Section
    :alignLeft="alignLeft"
    medium-items
    h3="Activities (medium items)"
    :action="{ text:'more...', to:'/' }"
>
    <Activity :track="track" :user="user" />
    <Activity :track="track" :user="user" />
    <Activity :track="track" :user="user" />
</Section>
</Layout>

Artist Name Artist Name Artist Name

Responsivity

Cards and Activities snap to the grid columns. They have intrinsic widths, expressed in the number of columns they span. For Card, it is 3 and for Activity, it is 4.
On a typical laptop screen, you may have 4 album cards or 3 activities side-by-side. On a typical mobile screen, you will have one medium card or two small ones in a row.
The remaining space is evenly distributed.
Title rows align with the content below them. The action on the right will always end with the last item in the grid. Resize the window to observe how the items move.

7.8 KiB Raw Permalink Blame History