Customize the appearance of the Community Groups widget using custom attributes on the <legion-community-groups> element.
🎨 Visual Customizer
For an interactive customization experience with live preview, visit:
/widgets/community-groups/customize
Quick Start
1<legion-community-groups
2 count="6"
3 layout="grid"
4 theme="light"
5 show-view-all="true"
6 community-url="/community"
7 view-all-url="/community/groups"
8 sort-by="trending"
9 api-url="https://your-domain.com"
10 groups-primary-color="#228be6"
11 groups-card-radius="12px"
12>
13</legion-community-groups>
Core Attributes
| Attribute | Type | Default | Description |
|---|
count | number | 6 | Number of groups to display (1-20) |
layout | string | grid | "grid" or "list" |
theme | string | light | "light" or "dark" |
sort-by | string | trending | "trending", "popular", or "recent" |
show-view-all | boolean | true | Show "View all Groups" link |
community-url | string | /community | Base URL for community pages |
view-all-url | string | {communityUrl}/groups | URL for the "View all" link (overrides community-url) |
api-url | string | origin | Your deployment URL |
Important: When embedding this widget on your site, set community-url to point 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.
CSS Theming Attributes
Container Theming
| Attribute | CSS Variable | Default | Description |
|---|
groups-primary-color | --groups-primary-color | #228be6 | Primary accent color |
groups-background-color | --groups-background-color | transparent | Container background |
groups-text-color | --groups-text-color | #1a1b1e | Primary text color |
groups-secondary-text-color | --groups-secondary-text-color | #868e96 | Secondary text |
groups-border-color | --groups-border-color | #dee2e6 | Border color |
Card Theming
| Attribute | CSS Variable | Default | Description |
|---|
groups-card-bg | --groups-card-bg | #ffffff | Card background |
groups-card-radius | --groups-card-radius | 12px | Card radius |
groups-card-shadow | --groups-card-shadow | 0 2px 8px rgba(0,0,0,0.06) | Card shadow |
groups-card-hover-shadow | --groups-card-hover-shadow | 0 4px 16px rgba(0,0,0,0.1) | Hover shadow |
groups-card-padding | --groups-card-padding | 12px | Card padding |
Avatar Theming
| Attribute | CSS Variable | Default | Description |
|---|
groups-avatar-size | --groups-avatar-size | 44px | Avatar size |
groups-avatar-radius | --groups-avatar-radius | 8px | Avatar radius |
Typography
| Attribute | CSS Variable | Default | Description |
|---|
groups-font-family | --groups-font-family | inherit | Font family |
groups-name-size | --groups-name-size | 14px | Group name size |
groups-name-weight | --groups-name-weight | 600 | Group name weight |
groups-meta-size | --groups-meta-size | 12px | Meta text size |
Animations
| Attribute | CSS Variable | Default | Description |
|---|
groups-transition-duration | --groups-transition-duration | 0.2s | Animation speed |
groups-hover-scale | --groups-hover-scale | 1.02 | Hover scale |
groups-grid-gap | --groups-grid-gap | 12px | Grid gap |
Dark Theme Example
1<legion-community-groups
2 count="6"
3 theme="dark"
4 api-url="https://your-domain.com"
5 groups-card-bg="#25262b"
6 groups-text-color="#c1c2c5"
7 groups-border-color="#373a40"
8>
9</legion-community-groups>
Custom Branded Example
1<legion-community-groups
2 count="4"
3 layout="list"
4 api-url="https://your-domain.com"
5 groups-primary-color="#e91e63"
6 groups-card-radius="8px"
7 groups-avatar-radius="50%"
8 groups-hover-scale="1.05"
9>
10</legion-community-groups>
WordPress Integration
Add to your theme's header:
<script src="https://your-domain.com/js/community-groups-widget.js"></script>
Then use in any Custom HTML block:
1<legion-community-groups
2 count="6"
3 theme="light"
4 api-url="https://your-domain.com"
5>
6</legion-community-groups>