Community Header Widget Web Component

Note: This example demonstrates the custom web component for the community header widget. See the Widgets Docs Index for theming and embed attributes.

Features: Displays community branding, search functionality, member/post stats, and online indicator.

Basic Usage

Include the script and use the custom element:

            <script src="/js/community-header-widget.js"></script>
            <legion-community-header api-url="https://your-domain.com"
            title="Community" show-search="true" show-stats="true"
            ></legion-community-header>
          

Core Attributes

api-url: Base URL of your application
title: Community title text (default: "Community")
show-search: Show search input
show-stats: Show member/post count stats
show-online: Show "Online now" indicator
community-url: URL for search/click navigation
theme: "light" or "dark" (default: light)

Minimal Example

            <legion-community-header api-url="https://your-domain.com"
            title="My Brand Community" show-search="false" show-online="false"
            ></legion-community-header>
          

Theming Attributes

header-primary-color: Primary accent color
header-background-color: Widget background
header-text-color: Primary text color
header-search-bg: Search input background
header-search-radius: Search input radius
header-stat-bg: Stats badge background
header-title-size: Title font size
header-title-weight: Title font weight

Dark Theme Example

            <legion-community-header api-url="https://your-domain.com"
            theme="dark" header-background-color="#1a1b1e"
            header-text-color="#c1c2c5" header-search-bg="#25262b"
            header-primary-color="#4cc9f0" ></legion-community-header>
          

Customization

For a visual customization experience with live preview, use the Community Header Widget Customizer .