funkwhale/app/docs/designing-pages.md

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.

---