Layout Components
Reusable layout components from components/layout/ and page layout wrappers from layouts/.
OneColGrid
components/layout/OneColGrid.vue — Centered single-column layout with full height. Used for authentication flows (login, signup, password reset). Column width: md="7" xl="7".
Used in: login.vue, signup/index.vue, password-reset/index.vue
TwoColsBlock
components/layout/TwoColsBlock.vue — Two-column layout with flexible column ratio. Columns reorder on mobile. Most commonly used layout component.
| Prop | Type | Default | Description |
|---|---|---|---|
split | ColSplit | "5/7" | Column width ratio (e.g. "5/7", "6/6", "7/5") |
order | ColOrder | ['1','2'] | Desktop column order |
mobileOrder | ColOrder | ['2','1'] | Mobile column order (content first) |
Split 5/7 (default)
Content on left (5 cols), image/illustration on right (7 cols). Used for welcome, error, profile pages.
(typically ResponsiveImage)
Split 6/6 (equal)
Split 7/5 (content wider)
Used in: welcome.vue, declined.vue, change-password.vue, signed.vue, [...slug].vue
TwoColsGrid
components/layout/TwoColsGrid.vue — Asymmetric two-column layout for marketing/showcase pages. Left column is wider with padding columns, right column is sticky sidebar. Desktop only — stacks on mobile.
ContentBlock
components/layout/ContentBlock.vue — Simple max-width container. Props: narrow (boolean) for narrower variant.
Default width
Narrow
ColoredContainer
components/ColoredContainer.vue — Background color wrapper with padding. Used for highlighted form sections and card containers.
| Prop | Values |
|---|---|
color | 'grey' | 'grey-2' | 'blue' | 'green' | 'orange' | 'grey-light-4' |
Layout: Unauthenticated
layouts/unauthenticated.vue — Public pages layout for login, signup, password reset. SiteHeader with optional login/signup hints. Footer always shown.
Used in: login.vue, signup/index.vue, password-reset/*.vue
Layout: Simple
layouts/simple.vue — Minimal layout with optional header/footer. Header defaults to SiteHeader (logo-only). Footer hidden by default. Route meta: showHeader, showFooter.
Used in: Profile pages, signup flows, direct-sign
Layout: Starter
layouts/starter.vue — Onboarding wizard layout. Centered white box (750px height) on purple-light background. Fixed width: md="9" lg="7".
Used in: signup/starter/*.vue
Layout: Main (App)
layouts/main.vue — Primary application layout with app bar, sidebar navigation, optional sub-nav, banners, and widgets. Fixed app bar (80px desktop). Responsive drawer at lg+.
Slots: appbarContent, appbarNavigation, filterbar, banner, subNav, default, widgets, bottomNav
Layout: Admin
layouts/admin.vue — Business admin layout with sidebar and optional trial widget. Route meta: contentWidth ('full'|'wide'|default), sidebar (boolean for trial widget).
Used in: business/dashboard.vue, business/members/*.vue, business/billing/*.vue, business/settings.vue