DevelopersEmbeds
Offer card
<fepli-offer-card>
One offer as a card: picture, name, date, fee and the apply button. Made for a news item or a list of your own; landscape where there is room, stacked where there is not.
Try it
Pick options – the snippet updates.
Dates
Accent colour
Corners
stadt.example.fepli.eu/ferienprogrammPreview
Preview of this embed follows
Snippet
<script type="module" src="https://example.fepli.eu/embed.js" data-key="pk_9f3a2c71e4b05d18a6c2e7f0"></script>
<fepli-offer-card offer="0192a4f1-6e3b-7c85-b1d2-8f4e6a9c3b03"></fepli-offer-card>Attributes
- Name
offer- Type
- string
- Required
- required
- Description
The UUID of the offer.
- Name
dates- Type
- "next" | "all"
- Default:
- next
- Description
The next date with a count of the others, or every date.
- Name
places- Type
- boolean
- Default:
- true
- Description
Show how many places are left, or that the offer is fully booked.
- Name
lang- Type
- "de" | "en"
- Description
- Language of the embed. By default, the
langattribute of your page.
The apply button leads to the offer's page on fepli. It is left out for an offer that is cancelled or takes no applications online.
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
- Buttons, active filters and links.
- Name
--fepli-radius- Type
- length
- Default:
- 8px
- Description
- Corners of cards, buttons and fields.
- 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:
- inherit
- Description
- Colour of body text.
- Name
--fepli-surface- Type
- color
- Default:
- Canvas
- Description
- Background of the dialog an offer opens in. Set it together with
--fepli-textif your page is dark.