Community Groups Widget Web Component
Note: This example demonstrates the custom web
component for the community groups widget. See the
Widgets Docs Index for
theming and embed attributes.
Important: Set community-url to your
community's base URL, or use view-all-url to specify the
exact URL for your groups page. The "View all Groups" link will navigate
users to this URL. If you don't have a dedicated groups page, set
show-view-all="false" to hide the link.
Basic Usage
Include the script and use the custom element:
<script src="/js/community-groups-widget.js"></script>
<legion-community-groups api-url="https://your-domain.com"
count="6" layout="grid" theme="light"
></legion-community-groups>
Core Attributes
- api-url: Base URL of your application
-
count: Number of groups to display (1-20,
default: 6)
- layout: "grid" or "list" (default: grid)
- theme: "light" or "dark" (default: light)
- show-view-all: Show "View all Groups" link
-
community-url: Base URL for community pages
(default: /community)
-
view-all-url: URL for "View all" link (defaults
to {community-url}/groups)
- sort-by: "trending" | "popular" | "recent"
List Layout Example
<legion-community-groups api-url="https://your-domain.com"
count="4" layout="list" sort-by="popular"
></legion-community-groups>
Theming Attributes
- groups-primary-color: Primary accent color
- groups-background-color: Widget background
- groups-text-color: Primary text color
- groups-card-bg: Card background color
- groups-card-radius: Card border radius
- groups-card-shadow: Card box shadow
-
groups-avatar-size: Avatar size (default: 48px)
- groups-avatar-radius: Avatar border radius
- groups-hover-scale: Hover scale factor
Dark Theme Example
<legion-community-groups api-url="https://your-domain.com"
count="6" theme="dark" groups-background-color="#1a1b1e"
groups-card-bg="#25262b" groups-text-color="#c1c2c5"
groups-primary-color="#4cc9f0" ></legion-community-groups>