Component Catalogue

SiteHeader — Public (Login/Signup)

components/SiteHeader.vue — Used in unauthenticated layout. No logo in the header bar (logo is rendered inside the page content via OneColGrid). Header only shows action buttons on the right. Height: 90px.

With login hint (signup page)

Already have an account?

Layout: unauthenticated | Props: showLogo=false, login=true

With signup hint (login page)

No account yet?

Layout: unauthenticated | Props: showLogo=false, signup=true

Empty (no hints)

Layout: unauthenticated | Props: showLogo=false, login=false, signup=false (e.g. password-reset)

SiteHeader — Logo Only

Minimal header with just the Skribble logo. Used in simple and starter layouts. Props: logoOnly=true.

Layouts: simple, starter | Props: logoOnly=true

SiteHeader — Logged In (Desktop)

Main app header on desktop (md and up). Shows logo, navigation items, and profile avatar with dropdown. Used in main layout via AppBarNavigation.

12 credits

MK

Layout: main (md and up) | Height: 80px | Components: AppBarNavigation, Avatar, CreditsBadge

SiteHeader — Logged In (Mobile)

Mobile variant shows hamburger menu trigger (opens MainNav drawer) + avatar on right. Height: 70px.

MK

Layout: main (xs/sm) | Height: 70px | Hamburger opens MainNav drawer

SiteHeader — Dismissible

Header with close button on the left, title in center, and optional right content. Props: dismissible=true. Used in profile flows, wizard steps. Close button is 90x90px with right border.

Props: dismissible=true | Close button emits action or navigates back

With right slot content

Edit visual signature

Props: dismissible=true | Slots: left (close), center (title), right (actions)

SiteHeader — Bordered

Header with bottom border. Props: bordered=true. Used when header needs visual separation from content.

Props: bordered=true | Border: 1px solid $c-border (#DADEE6)

SiteHeader — Overlay Mode

When overlay=true, renders as VToolbar instead of VAppBar. Centered logo only. Used in overlay/full-screen contexts.

Props: overlay=true | Renders VToolbar (not fixed/sticky)

ToolbarBase — Default

components/ToolbarBase.vue — Simplified toolbar for wizards and modals. Height: 90px. Shows Skribble logo with optional title and right-side options slot. Props: title, bordered (default: true), dismissible.

Create signature request

Props: title, bordered=true | Logo in bordered box on left

ToolbarBase — Dismissible

With close button. Props: dismissible=true. Close button is 90x90px with right border.

Edit signer group

Props: dismissible=true, bordered=true | Emits: close

ToolbarBase — With Company Branding

When a company branding logo URL is available, displays the custom logo instead of Skribble's.

Sign document

Company branding logo replaces Skribble logo | Available via business settings

WizardHeader

components/wizard/WizardHeader.vue — Wraps ToolbarBase with back/forward/close actions and a title. Desktop: actions in toolbar. Mobile: actions in separate footer bar (88px).

New signature request

Props: title, loading | Emits: back, forward, close | Slots: title, actions

DocumentToolbar

components/document/DocumentToolbar.vue — Toolbar for document view with signature request actions. Right side has bordered action sections.

Props: closable, hiddenActions[] | Actions slot contains SignatureRequestActions | Right sections bordered

OverlayHeader

components/overlays/OverlayHeader.vue — Minimal header for overlay dialogs. Just a close button (90x90px, sticky). Used in signing overlays.

Sticky positioned | Uses custom:c_close icon | Emits: close

OverlayHeaderLogo

components/overlays/OverlayHeaderLogo.vue — Overlay header with centered Skribble logo. Props: url (clickable link), bordered, centered.

Props: centered=true | Used in: OverlaySigningSuccessNas, OverlayTransferToIdent

Bordered variant

Props: centered=true, bordered=true

OverlayHeaderLogo — Company Branding

When companyBrandingLogoUrl is provided, displays the custom company logo instead.

ACME Corporation

Props: companyBrandingLogoUrl, centered=true, bordered=true

AppBarNavigation

components/navigation/AppBarNavigation.vue — Right-side navigation items in the main app bar. Shows credits badge, feedback, changelog (with unread count), help menu, and profile avatar dropdown. Only visible on md and up.

Full nav (with credits)