Customize the appearance of your opportunities widget with real-time preview. Perfect for WordPress and any website.
Quick Presets
How many opportunities to display (1-20)
Display orientation
One anatomy, five sizes
Select tags to filter opportunities
Widget height setting
Your website domain (leave empty for current origin)
CTA button background
Text on the accent color
Chip shown over the image
Rounded corners for the card
CTA and save buttons
CSS border for the card surface
CSS box-shadow for the card
Fixed ratio of the media frame, e.g. "5 / 4" or "16 / 9"
Defaults to Bricolage Grotesque
Hover lift/shadow speed — set to 0s to disable
Live Preview
Embed Code
Complete Embed Code
<script src="https://your-domain.com/js/opportunities-widget.js"></script> <legion-opportunities count="5" layout="horizontal" base-url="https://your-domain.com" ></legion-opportunities>
Step 1: Add Script (One Time)
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>
Step 2: Add Widget
Paste this code in a Custom HTML block (Gutenberg) or switch to Text/HTML mode in Classic Editor
<legion-opportunities count="5" layout="horizontal" base-url="https://your-domain.com" ></legion-opportunities>
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.
Script Placement: For best performance, add the script tag to your site footer instead of header.
Complete reference for all available customization options.
Core Attributes
count - Number of opportunities (1-20), default: 5 layout - "horizontal" or "vertical", default: horizontal variant - Card style: portrait, square, banner, list, hero tags - Comma-separated filter tags theme - Preset theme name (light, dark, minimal, bold, corporate, vibrant) height - "auto", "100%", or specific px value base-url - Your deployment URL api-key - Optional API key for authentication
Card Surface
opp-accent - CTA button background, default: #16181d opp-accent-contrast - Text on the accent color, default: #ffffff opp-card-bg - Card surface background, default: #ffffff opp-text-color - Base text color, default: #16181d opp-card-radius - Card border radius, default: 18px opp-card-shadow - Card box-shadow value opp-card-hover-shadow - Card box-shadow on hover opp-card-border - Card border, default: 1px solid #e6e8ec opp-font-family - Body font, default: Hanken Grotesk
Media Frame & Chips
opp-media-ratio - Image frame aspect ratio, default: "5 / 4" opp-media-bg - Background behind images, default: #dfe2e7 opp-category-bg - Category chip background over the image opp-category-color - Category chip text color opp-reward-bg - Reward pill background, default: #fdeecb opp-reward-color - Reward pill text, default: #8a5a00 opp-reward-size - Reward pill font size
Typography
opp-title-size - Font size, default: 19px opp-title-color - Text color (inherits card text color) opp-title-weight - Font weight (400-900), default: 700 opp-title-font-family - Font family, default: Bricolage Grotesque opp-description-size - Font size for description, default: 13.5px opp-description-color - Text color, default: #626a78 opp-expires-size - Font size for expiration text, default: 12.5px opp-expires-color - Text color, default: #8b93a1
Buttons & Animations
opp-button-radius - CTA and save button radius, default: 12px opp-save-border - Save button border color opp-save-bg - Save button background opp-save-color - Save button icon color opp-transition-duration - Hover animation speed, e.g. "0.3s"
default - White card surface with a dark accent button
dark - Dark card surface with light text and inverted CTA
minimal - Border-only cards, no shadows, clean look
bold - Larger titles, rounder corners, stronger shadows
corporate - Slate accent, sharp corners, no animations
vibrant - Indigo accent with a colored hover glow
• Text never sits on top of the photo — the image lives in a fixed-ratio frame, so cards read the same with any image (or none)
• Match opp-accent to your brand color and keep opp-accent-contrast readable on it
• Use variant="list" for sidebars and dense lists, variant="hero" for a featured slot
• Set opp-transition-duration="0s" to disable the hover lift for a more static look
• For WordPress, add the script tag only once per page (in header or footer)
• Test on both desktop and mobile to ensure your styling works at all sizes
Styles not changing: Ensure attributes are set directly on the <legion-opportunities> element and clear browser cache
Widget not appearing: Confirm your base-url points to the correct environment (staging vs production)
WordPress issues: Make sure you are in "Text/HTML" mode, not "Visual" mode when pasting code
CORS errors: Ensure your domain is allowed in the widget's CORS configuration
Script not loading: Check browser console for errors and verify the script URL is accessible