BluKavantUI Design system
TEMPLATES

Professional advisory

A warm architectural advisory website with expertise, people and an enquiry form ready for your API.

Web + OutSystemsCommunity
Open web preview ↗Download Community screen ↓Get complete starter →

Screen preview

The image below shows the TypeScript screen. Open the web preview to try its controls; it runs the same source included in the starter.

Professional advisory TypeScript screen

What is custom?

Fieldwork’s architectural photography, editorial text arrangement, native disclosure sections and enquiry form compose the page. Media, shape masks and expandable profiles are independent library components.

Additional CSS: website-templates.css owns template layout, typography, branding, spacing, responsive rules and finite entrance effects. It respects reduced motion. Component behavior remains in the library.

Web / TypeScript setup

Components used

HeroSection · MediaImage · ShapeMask · ProfileCard · Button

Files to copy

advisory.ts · website-shared.ts · website-templates.css

  1. Install @blukavantui/community using the downloadable starter. Copy these files together into your templates directory.
  2. Load @blukavantui/community/theme.css once. Keep the component CSS imports and the local website-templates.css import; use a bundler that supports CSS.
  3. Call mount(host, env), then call destroy() when removing the screen. Each instance owns and disposes its components.
import '@blukavantui/community/theme.css'
import {mount} from './templates/advisory'
const screen = mount(document.getElementById('app')!, {
  assetBase: '/assets/templates/',
  galleryUrl: '/templates',
})
// On route exit: screen.destroy()

Data and actions

Replace the fictional practice and advisor. Supply env.onEnquiry({name, email, message}) to send enquiries through your validated API. Reject on failure to retain the draft. Without the callback, the form validates a preview and sends nothing.

Images and appearance

Download the template photographs or host your own, then set assetBase to their directory. Stillwater uses stay-coast.jpg and stay-suite.jpg; Fieldwork uses advisory-house.jpg, portrait-2.jpg and interior.jpg. Keep the included source/attribution manifest and use meaningful alternative text. Marketing screens explicitly use the light palette for their branded compositions. Split Login follows the application theme for its form and uses the light palette for its workspace illustration. The local composition styles preserve the template’s visual identity; test your replacement content and colors for contrast, keyboard operation and mobile reflow.

OutSystems Community setup

Copy TemplateAdvisory from BluKavantUi_Community_Demo, together with its private WebsiteTemplateLayout layout and required assets. Producers: BluKavantUi_Community_Core, BluKavantUi_Community_Content, BluKavantUi_Community_Layout.

Components: HeroSection · MediaImage · ShapeMask · ProfileCard · Button.

  1. Select the referenced Blocks, public structures and static entities in Manage Dependencies. Use the original producer-owned types.
  2. Set BluUICommunityTheme from BluKavantUi_Community_Core as your consumer’s Base Theme.
  3. Copy WebsiteTemplateLayout with its Style Sheet and placeholders. Preserve the screen’s classes, locals, lifecycle and event handlers. Each library Block supplies its own runtime and CSS.
  4. Replace sample data and preview actions with validated Server Actions. Apply your own access roles; do not inherit demo permissions blindly.

Replace the fictional practice, advisor and photo Resources. Connect SubmitEnquiry to a Server Action that validates Name, Email and Enquiry and records or sends the enquiry. Keep the draft on failure and provide accessible feedback. The supplied action validates a local preview only.

The native shared layout includes website-templates.css plus scoped adjustments for native wrappers and the existing login form. Copy its full Style Sheet with the layout.

Community on Web and OutSystems

Every component used by this template is Community. The Community Web starter includes this screen and its shared files, using @blukavantui/community.

The native TemplateAdvisory screen is published in BluKavantUi_Community_Demo. Copy its private WebsiteTemplateLayout layout and preserve producer-owned types, scripts and event mappings. Your application supplies access roles, authentication and persistence.

All nine Community and five Pro native templates are published in the development environment. Official Forge distribution remains pending.

Open OutSystems screen ↗

Search BluKavantUI