Designing Pages ​

Grid ​

The page grid consists of 46px wide tracks, separated by 32px wide gaps. See examples on design.funkwhale.audio

Page sections ​

Use the Layout Section component to structure the page into separate sections, each with a heading. Make sure the heading level hierarchy makes sense.

<Section
    :alignLeft="alignLeft"
    :columns-per-item="3"
    h2="My albums"
    :action="{
        text:'Go to library',
        to:'/'
    }"
>
    <Card small solid yellow title="Album 1" />
    <Card small solid green title="Album 2" />
    <Card small solid blue title="Album 3" />
</Section>

Sections and their contents are automatically aligned to the default grid.

Read more: Designing user navigation and routes