DevelopersEmbeds

Offer list

<fepli-offers>

The published offers of an edition as your fepli website shows them: its offer cards, and its filter for search, category, date, age and price.

Try it

Pick options – the preview and the snippet update.

Edition

Attributes

Name
edition
Type
string
Required
required
Description
The alias of the edition, for example herbstferien-2026. Several aliases, separated by commas, make one list: edition="herbstferien-2026,winterferien-2026".
Name
category
Type
string
Description
Opens with this category (alias) chosen; the filter can add others.
Name
age
Type
number
Description
Only offers suitable for this age, shown in the filter, where it can be removed.
Name
layout
Type
"list" | "grid"
Default:
list
Description
The website's offer cards one under the other, the picture beside, or in a grid.
Name
filters
Type
boolean
Default:
true
Description
Show the website's filter above the offers: search, categories, when, age and price.
Name
lang
Type
"de" | "en"
Description
Language of the embed. By default, the lang attribute of your page.

Opening an offer

A click on an offer opens it in a dialog on your page, with its dates, fees, places and the apply button: the offer detail, in place. The button leads to the offer's page on fepli.

To show the offer yourself instead, on a page of your own or in your own dialog, listen for fepli-offer-select and cancel it. The event bubbles out of the element and carries the offer's uuid and the url of its page on fepli.

document.addEventListener('fepli-offer-select', (event) => {
  event.preventDefault()
  location.href = `/ferienprogramm/angebot?id=${event.detail.uuid}`
})

A click with a modifier key, or with the middle button, follows the link to fepli as any link does.

Theming

Set these CSS custom properties on the element or on any parent. Everything else follows your page.

Name
--fepli-accent
Type
color
Default:
oklch(0.60 0.22 29)
Description
Your brand colour, as entered: links, dates and the apply button. As in the fepli admin, a red brand colour turns the apply button ink, so it does not read as a warning, and one too light for white text is darkened until it reads.
Name
--fepli-radius
Type
length
Default:
8px
Description
Corners of buttons, fields and chips; cards and the dialog take one and a half times this, badges three quarters. 0 makes everything square.
Name
--fepli-shadow
Type
0 | 1
Default:
1
Description
Shadows: 1 the slight ones of the fepli website, 0 none; dialogs keep a little.
Name
--fepli-font
Type
font-family
Default:
inherit
Description
Font of the embed. By default, the font of your page.
Name
--fepli-text
Type
color
Default:
Mist 900
Description
Colour of the text on cards and in the dialog.
Name
--fepli-surface
Type
color
Default:
white
Description
Background of cards and of the dialog an offer opens in; white by default. Set it together with --fepli-text if your page is dark.
Name
color-scheme
Type
light | dark
Default:
inherit
Description
Standard CSS. On a dark page set color-scheme: dark; the greys and status colours turn round as in the admin’s dark theme.