Reference
<tl-event-card>
One event as a card: its image, name, next date, venue, what a ticket costs with fees, and how it is selling.
| HTML tag | <tl-event-card> |
| React | import { TlEventCard } from '@ticketlayer/elements-react' |
| Category | Discovery |
| Runs in | web (browser DOM), native (planned React Native set) |
One event as a card: its image, name, next date, venue, what a ticket costs with fees, and how it is selling.
From the Live listing and event views' offers the card shows what
one ticket costs with every fee in it, as a range (part price), the
event's state for this buyer (badge, locked included), and a countdown
to a sale that opens later (countdown). On an older response the price is
the face value, labelled "From".
Properties#
| Property | Attribute | Description | Type | Default |
|---|---|---|---|---|
event | -- | Event data to display (tl-event-list passes this) | TlEventCardEvent | undefined | undefined |
eventId | event-id | Load the event from the SDK by id when no event is given, so a single card works standalone (e.g. on a Webflow page). | string | undefined | undefined |
unstyled | unstyled | Render into the light DOM with no stylesheet, for a page that styles the element itself: every node carries a tl-event-card__* class. Without it the element is styled, and each node is a ::part() of the same name. | boolean | false |
Events#
| Event | Description | Type |
|---|---|---|
tlClick | Emitted when the card is clicked | CustomEvent<{ eventId: string; }> |
tlError | Emitted when the event could not be loaded by id | CustomEvent<{ message: string; }> |
Events are CustomEvents; the payload is on event.detail. In HTML, listen with element.addEventListener('tlXxx', handler); in React the wrapper exposes each one as an onTlXxx prop.
Related elements#
Used by: <tl-event-list>