USER INTERFACE · LAYOUT

Footer

App bars, marketing footers and sticky action bars — each shown inside a small page so you see where it sits. Scroll inside the frames.

THEME

DENSITY

Playground

Build your footer — compare with the default

PREVIEWstays at the bottom while you scroll3 differences

avava.studio

Settings

TYPE

default: Marketing

LINK COLUMNS

default: 4 columns

BEHAVIOUR

default: Static

DIFF FROM DEFAULT

~ cols: 3 columns~ beh: Sticky+ status: status

App footers

Inside the admin

Thin app barversion · status · help · ?

avava.studio

Click the status dot to cycle normal → degraded → outage.

Sync statussaved · syncing · offline

avava.studio

Table footerrows per page · pages

AV-199Fjord Outdoor€2,137

AV-198Kaya Ceramics€3,074

AV-197Lumen Coffee€4,011

AV-196Mira Optics€4,948

AV-195Nordic Thread€5,885

1–5 of 128Rows

Card / modal footerCancel · Save · dirty state

Edit client

No changes

Marketing footers

Public pages — pricing, blog, coming soon

Full marketing footerbrand · 4 columns · newsletter · social · language · status

avava.studio

With call to actionCTA plate above the links

avava.studio

Minimallogo · 3 links · ©

avava.studio

Sticky bars

Stay at the bottom while you scroll

Wizard barBack / Continue

avava.studio

STEP 1 OF 4Client

Unsaved changesappears when you edit

avava.studio

PROJECT NAMEType something ↑

Bulk actionsselect rows → bar

avava.studio

Cookie bannerAccept · Settings · Reject

avava.studio

We use cookies to keep you signed in and to see what features you use. Learn more

Responsive

Columns → accordion on mobile

DESKTOP · 1280

avava.studio

TABLET · 768

avava.studio

MOBILE · 375

avava.studio

Rules & a11y

Semantics, spacing, sizes

Semantics

Landmark<footer role="contentinfo"> — one per page

Link groups<nav aria-label="Product">

Newsletter<label for="nl-…"> + aria-invalid + error text

StatusLink to status page, not colour alone

Sticky barrole="region" aria-label="Unsaved changes"

Sticky bars don’t cover content

✕ No padding

✓ padding-bottom = bar + 16

The last line (coloured) must stay visible above the bar.

Sizes

App barmin 40 px · 12 px text

Marketingpadding 26/24 · gap 22

Link13/600 · #c9ccd6 → cyan on hover

Column header10/900 · tracking .14em

Sticky barradius 18 · 10 px inset · blur 12

Mobile group44 px tap rows

DO✓Keep the app footer to one quiet line✓Group marketing links under 4–5 clear headings✓Give sticky bars bottom padding on the page✓Collapse link groups into an accordion on mobile✓Show system status as text, not just a dot

DON’T✕Put primary actions only in the footer✕Repeat the whole sidebar in the footer✕Let a sticky bar cover the last field✕Use more than one <footer role="contentinfo">✕Auto-hide the cookie banner without a choice