Partners can fully customize the appearance of the Opportunities widget without forking code. Use custom attributes on the <legion-opportunities> element to pass values that map to CSS variables inside the widget iframe.
The card system keeps text off the image: the photo lives in a fixed-ratio frame and all copy sits on a solid surface, so cards read the same whether the image is bright, dark, busy, or missing entirely. One anatomy, five sizes (portrait, square, banner, list, hero).
For an interactive customization experience with live preview, visit:
/widgets/opportunities/customize
1<legion-opportunities
2 count="5"
3 layout="horizontal"
4 base-url="https://your-domain.com"
5 opp-accent="#5a48e6"
6 opp-card-radius="18px"
7 opp-title-size="19px"
8>
9</legion-opportunities>Notes:
base-url should point to your Legion deployment domain.opp-panel-*, opp-title-shadow, opp-animation-scale, …) from the previous card design are no longer used and are safely ignored.Use the variant attribute to pick a card style:
| Variant | Best for |
|---|---|
portrait | Feeds & discovery — media-forward (5:4 image) |
square | Grids & dashboards — compact 1:1 tile |
banner | Promoted slots — image and copy side by side |
list | Dense lists & sidebars — thumbnail + one line |
hero | Featured — full-bleed image, copy on a panel |
If omitted, horizontal layouts use portrait and vertical layouts use list.
1<legion-opportunities
2 variant="square"
3 count="6"
4 base-url="https://your-domain.com"
5>
6</legion-opportunities>Use the theme attribute for quick preset styling:
| Theme | Description |
|---|---|
light | Default — white surface, dark accent button |
dark | Dark card surface with light text |
minimal | Border-only cards, no shadows |
bold | Larger titles, rounder corners |
corporate | Slate accent, sharp corners, no animations |
vibrant | Indigo accent with colored hover glow |
<legion-opportunities theme="bold" count="5" base-url="https://your-domain.com">
</legion-opportunities>| Attribute | Type | Default | Description |
|---|---|---|---|
count | number | 5 | Number of opportunities (1-20) |
layout | string | horizontal | "horizontal" or "vertical" |
variant | string | auto | portrait, square, banner, list, hero |
tags | string | - | Comma-separated filter tags |
theme | string | light | Preset theme name |
height | string | auto | "auto", "100%", or specific px |
base-url | string | current origin | Your deployment URL |
api-key | string | - | Optional API key |
| Attribute | CSS Variable | Default | Description |
|---|---|---|---|
opp-accent | --opp-accent | #16181d | CTA button background |
opp-accent-contrast | --opp-accent-contrast | #ffffff | Text/icon color on the accent |
opp-card-bg | --opp-card-bg | #ffffff | Card surface background |
opp-text-color | --opp-text-color | #16181d | Base text color |
opp-card-radius | --opp-card-radius | 18px | Card border radius |
opp-card-shadow | --opp-card-shadow | soft layered shadow | Card box-shadow |
opp-card-hover-shadow | --opp-card-hover-shadow | deeper layered shadow | Card box-shadow on hover |
opp-card-border | --opp-card-border | 1px solid #e6e8ec | Card border |
opp-font-family | --opp-font-family | Hanken Grotesk | Body font family |
| Attribute | CSS Variable | Default | Description |
|---|---|---|---|
opp-media-ratio | --opp-media-ratio | 5 / 4 | Aspect ratio of the image frame |
opp-media-bg | --opp-media-bg | #dfe2e7 | Background behind images |
opp-category-bg | --opp-category-bg | rgba(16,18,24,.5) | Category chip background |
opp-category-color | --opp-category-color | #ffffff | Category chip text color |
opp-reward-bg | --opp-reward-bg | #fdeecb | Reward pill background |
opp-reward-color | --opp-reward-color | #8a5a00 | Reward pill text color |
opp-reward-size | --opp-reward-size | 12.5px | Reward pill font size |
| Attribute | CSS Variable | Default | Description |
|---|---|---|---|
opp-title-size | --opp-title-size | 19px (per variant) | Title font size |
opp-title-color | --opp-title-color | inherits text color | Title color |
opp-title-weight | --opp-title-weight | 700 | Title font weight |
opp-title-font-family | --opp-title-font-family | Bricolage Grotesque | Title font family |
opp-description-size | --opp-description-size | 13.5px | Description size |
opp-description-color | --opp-description-color | #626a78 | Description color |
opp-description-font-family | --opp-description-font-family | inherit | Description font |
opp-description-line-height | --opp-description-line-height | 1.45 | Line height |
opp-expires-size | --opp-expires-size | 12.5px | Expiry text size |
opp-expires-color | --opp-expires-color | #8b93a1 | Expiry text color |
| Attribute | CSS Variable | Default | Description |
|---|---|---|---|
opp-button-radius | --opp-button-radius | 12px | CTA and save button radius |
opp-save-border | --opp-save-border | #e0e3e8 | Save (bookmark) button border |
opp-save-bg | --opp-save-bg | transparent | Save button background |
opp-save-color | --opp-save-color | #626a78 | Save button icon color |
| Attribute | CSS Variable | Default | Description |
|---|---|---|---|
opp-transition-duration | --opp-transition-duration | 0.3s | Hover lift/shadow speed (0s = off) |
1<legion-opportunities
2 count="3"
3 base-url="https://your-domain.com"
4 opp-accent="#0f766e"
5 opp-card-radius="22px"
6>
7</legion-opportunities>1<legion-opportunities
2 count="6"
3 layout="vertical"
4 variant="list"
5 base-url="https://your-domain.com"
6>
7</legion-opportunities>1<legion-opportunities
2 count="5"
3 base-url="https://your-domain.com"
4 opp-accent="#1e293b"
5 opp-card-radius="6px"
6 opp-button-radius="6px"
7 opp-transition-duration="0s"
8>
9</legion-opportunities>Add this script to your theme's header.php or use a plugin like "Header Footer Code Manager":
<script src="https://your-domain.com/js/opportunities-widget.js"></script>Gutenberg/Block Editor: Use a "Custom HTML" block and paste the widget code.
Classic Editor: Switch to "Text" mode (not Visual) and paste the code.
Elementor: Use the "HTML" widget and paste the complete embed code.
Widget Areas: Use a "Custom HTML" widget in your sidebar or footer.
1<!-- Add to Custom HTML block or widget -->
2<legion-opportunities
3 count="5"
4 layout="horizontal"
5 base-url="https://your-domain.com"
6 theme="bold"
7>
8</legion-opportunities>opp-accent to your brand color and keep opp-accent-contrast readable on it./widgets/opportunities/customize for real-time preview.