Appearance
Custom CSS
Restyle any part of your public site with your own CSS, beyond what Settings → Appearance offers: a darker basket, a branded Lucky Dip card, a different look for the menu link of the page you're on. You write the rules once, they apply on every customer-facing page, and the admin area is never affected.
Where to find it: Settings → Appearance → Custom CSS (/admin/settings?tab=appearance).
Try the Appearance settings first
Colours, fonts, card style, button style, border radius, the header and your logo size all have settings of their own. Those also reach your emails, which custom CSS can't. Use custom CSS for what the settings can't do.
Add your CSS
- Go to Settings → Appearance and find the Custom CSS card.
- Tick Enable custom CSS.
- Write or paste your CSS in the box.
- Press Save.
- Open your site and check the result. Your rules apply straight away.
Enable custom CSS is also your kill switch. If a rule ever breaks your layout, untick it and save: all your styling is switched off instantly, and your code is kept so you can fix it and switch it back on.
Find the part you want to style
Every part of the site you're likely to restyle carries a hook: a stable name for your CSS to target. Hooks are part of what we promise you. They aren't renamed or removed without notice, so a rule written against a hook keeps working as the site is updated. Other class names on the page change without warning, so don't style with them.
- Under the CSS box, open Available hooks.
- Type what you're after in the filter, such as
lucky dip,basketorfooter link. - Copy the selector it shows into your CSS.
Hooks come in three shapes:
[data-comps="basket-drawer"]: most parts of the site, such as the header, footer, basket and pop-ups..pb-lucky-dip__heading: the parts of a block on your pages. Each block has its own name (.pb-lucky-dip), and each of its parts adds a name after two underscores (__heading).[data-comps-role="basket-checkout"]: a button that does one particular job. Every button is also[data-comps="button"], so rules for all buttons still reach it.
Many hooks have an extra attribute that says which kind or which state, such as [data-comps-state="active"] on the menu link for the page you're on. Add it to the hook to narrow a rule down. The full list of hooks is in the reference at the end of this page.
Examples
A branded Lucky Dip block:
css
.pb-lucky-dip { background: #12005e; }
.pb-lucky-dip__heading { color: #ffd166; }
.pb-lucky-dip__note { opacity: 0.8; }Underline the menu link for the page you're on:
css
[data-comps="nav-link"][data-comps-state~="active"] {
text-decoration: underline;
text-underline-offset: 6px;
}A green checkout button in the basket only:
css
[data-comps-role="basket-checkout"] { background: #16a34a; }A shadow behind your header logo:
css
[data-comps="header-logo-img"] { filter: drop-shadow(0 2px 6px rgb(0 0 0 / 0.5)); }One amount on the Lucky Dip buttons stands out:
css
[data-comps="lucky-dip-picker"] [data-comps-amount="10"] { outline: 2px solid #ffd166; }Style one page only
Put one of these in front of a rule:
body[data-page-path="/about"]reaches one page by its address. The homepage is/, and a trailing slash makes no difference. Error pages don't carry it, so a page-specific rule never reaches them.body[data-comps-page="…"]reaches every page of one kind by its route name, for examplecompetitions-idfor every competition page orwinnersfor the winners page.
css
body[data-page-path="/about"] [data-comps="prose"] { max-width: 60ch; }
body[data-comps-page="competitions-id"] [data-comps="competition-title"] { letter-spacing: -0.02em; }To style the error page, use [data-comps="error-page"], with [data-comps-status="404"] for page-not-found.
When a rule doesn't take
Most hooks only need a plain rule. A few parts have strong built-in styling of their own: the hero layouts, the Winner Wall, the Live Feed and Jackpot Feed, and the instant win games. If a rule seems to do nothing there, make it stronger in one of two ways:
- Repeat the hook:
.pb-hero__title.pb-hero__title { … } - Add
!important:.pb-hero__title { color: #fff !important; }
If it still does nothing, check the hook is spelled the same as in Available hooks, and that Enable custom CSS is ticked and saved.
What custom CSS can't reach
- Emails. Email programs can't load your stylesheet. Set email colours under Email Colours instead.
- The admin area. This is deliberate: a bad rule can never stop you reaching the kill switch.
Your CSS does apply to every customer-facing page, including the maintenance / coming-soon page and error pages.
Some read-only signals are exposed too, such as [data-comps-offscreen] on a block scrolled out of view. Don't restyle those. They're there so a rule can avoid them.
Every hook
Each table lists a hook, what it is, any parts it has (for blocks), and any extra attribute you can add to it.
Site header
| Hook | What it is |
|---|---|
[data-comps="site-header"] | The whole header |
[data-comps="header-mobile-bar"] | The header bar on phones |
[data-comps="header-zone"] | Each desktop zone of the header Add: [data-comps-zone="left|center|right"] |
[data-comps="header-nav-band"] | The full-width navigation strip under the header bar |
[data-comps="header-logo"] | The logo link |
[data-comps="header-logo-img"] | The logo image |
[data-comps="header-logo-text"] | The site name shown when there is no logo image |
[data-comps="header-menu-toggle"] | The menu (hamburger) button |
[data-comps="header-menu-toggle-badge"] | The dot on the menu button |
[data-comps-role="header-account"] | The My Account button (signed in) |
[data-comps="header-account-badge"] | The prize badge on the My Account button |
[data-comps-role="header-login"] | The Log in button (signed out) |
[data-comps-role="header-register"] | The Register button (signed out) |
[data-comps="header-wallet"] | The wallet balance Add: [data-comps-variant="pill|card"] |
[data-comps="header-wallet-balance"] | The balance figure |
[data-comps="header-wallet-cash"] | The cash line under the balance |
[data-comps="header-basket"] | The basket button |
[data-comps="header-basket-count"] | The number of items on the basket button Add: [data-comps-state="syncing"] (the spinner shown in its place while the basket updates) |
[data-comps="header-jackpot"] | The jackpot widget Add: [data-comps-state="active|won|disabled"] |
[data-comps="header-jackpot-amount"] | The jackpot figure |
[data-comps="header-jackpot-label"] | The jackpot wording |
[data-comps="header-stat-badge"] | A stat badge Add: [data-comps-metric="winners_today|winners_total|instant_wins_today_count|instant_wins_today_value|prizes_won_value|live_competitions|customers"] |
[data-comps="header-stat-badge-value"] | The stat figure |
[data-comps="header-stat-badge-label"] | The stat wording |
[data-comps="header-contact-button"] | A contact button Add: [data-comps-channel="whatsapp|phone|email"] |
[data-comps="header-link-button"] | A link button Add: [data-comps-variant], [data-comps-shape] |
[data-comps="header-lucky-dip"] | The Lucky Dip widget Add: [data-comps-surface="bar|mobile-bar|menu"] |
[data-comps="header-lucky-dip-trigger"] | The Lucky Dip pill that opens the amounts |
[data-comps="header-lucky-dip-panel"] | The pop-over listing the amounts |
Navigation
| Hook | What it is |
|---|---|
[data-comps="nav-link"] | Every menu link, in the header and the slide-out menu Add: [data-comps-level="top|child"] (child = inside a dropdown or section), [data-comps-state="active"] (the link for the page you are on, or its parent), [data-comps-surface="menu"] (links in the slide-out menu) |
[data-comps="nav-dropdown-trigger"] | A menu item that opens a dropdown Add: [data-comps-state="open|active"] (can be both, so match with ~=) |
[data-comps="nav-dropdown"] | The dropdown panel |
Slide-out menu and app bar
| Hook | What it is |
|---|---|
[data-comps="mobile-menu-overlay"] | The dimmed backdrop behind the menu |
[data-comps="mobile-menu-panel"] | The slide-out menu |
[data-comps="mobile-menu-header"] | The top row of the menu |
[data-comps="mobile-menu-title"] | The menu title |
[data-comps="mobile-menu-close"] | The close button |
[data-comps="mobile-menu-nav"] | The list of links |
[data-comps="mobile-menu-section"] | A section heading in the menu Add: [data-comps-state="open|closed"] (collapsible sections only) |
[data-comps="mobile-menu-app-link"] | The Get the App links |
[data-comps="mobile-menu-footer"] | The note at the foot of the menu |
[data-comps="pwa-bottom-nav"] | The bottom bar in the installed app |
[data-comps="pwa-bottom-nav-item"] | Each bottom-bar button Add: [data-comps-item="back|competitions|account"], [data-comps-state="active"] |
Announcement bar
| Hook | What it is |
|---|---|
[data-comps="announcement-bar"] | The bar above the header |
[data-comps="announcement-inner"] | Its coloured box |
[data-comps="announcement-text"] | Its text |
Site footer
| Hook | What it is |
|---|---|
[data-comps="site-footer"] | The whole footer |
[data-comps="footer-brand"] | The logo and tagline column |
[data-comps="footer-logo"] | The footer logo |
[data-comps="footer-tagline"] | The tagline under the logo |
[data-comps="footer-column"] | Each link column Add: [data-comps-column="explore|quick-links|legal|contact"] |
[data-comps="footer-heading"] | A column heading |
[data-comps="footer-section-label"] | A small label inside a column |
[data-comps="footer-link"] | Every footer link, including Cookie Settings and the email address |
[data-comps="footer-contact"] | The phone number |
[data-comps="footer-social"] | The row of social icons |
[data-comps="footer-social-link"] | Each social icon Add: [data-comps-network] (facebook, x, instagram, tiktok, youtube…) |
[data-comps="footer-legal"] | The bottom strip |
[data-comps="footer-copyright"] | The copyright line |
[data-comps="footer-disclaimer"] | The 18+ line |
[data-comps="footer-badge"] | The small pills in the bottom strip Add: [data-comps-badge="powered-by|security"] |
Basket
| Hook | What it is |
|---|---|
[data-comps="basket-overlay"] | The dimmed backdrop behind the basket |
[data-comps="basket-drawer"] | The basket panel |
[data-comps="basket-header"] | Its top row |
[data-comps="basket-title"] | The Basket title |
[data-comps="basket-timer"] | The reservation countdown Add: [data-comps-state="urgent"] |
[data-comps="basket-close"] | The close button |
[data-comps="basket-loading"] | Shown while the basket loads |
[data-comps="basket-empty"] | The empty basket message |
[data-comps="basket-items"] | The list of items |
[data-comps="basket-item"] | Each item |
[data-comps="basket-item-image"] | The item image |
[data-comps="basket-item-title"] | The competition name |
[data-comps="basket-item-price"] | The ticket price |
[data-comps="basket-qty"] | The quantity stepper |
[data-comps="basket-qty-input"] | The quantity box |
[data-comps="basket-item-remove"] | The remove button |
[data-comps="basket-item-total"] | The item total |
[data-comps="basket-upsell"] | The suggested competition card |
[data-comps="basket-footer"] | The totals area |
[data-comps="basket-wallet"] | The use-my-balance option Add: [data-comps-state="applied"] |
[data-comps="basket-promo-discount"] | The promo code discount line |
[data-comps="basket-total"] | The total |
[data-comps="basket-warning"] | A warning above the checkout button Add: [data-comps-tone="warning"], [data-comps-reason="verify-email|min-spend"] |
[data-comps-role="basket-checkout"] | The checkout button |
[data-comps="promo-code"] | The promo code box |
[data-comps="promo-code-input"] | The promo code field |
[data-comps="promo-code-apply"] | The Apply button |
[data-comps="promo-code-applied"] | The applied code |
[data-comps="promo-code-error"] | The error message |
Pop-overs and notices
| Hook | What it is |
|---|---|
[data-comps="modal"] | Every dialog (the dimmed layer) |
[data-comps="modal-panel"] | The dialog box itself. A few dialogs carry their own name here instead: roundup-dialog and main-prize-boost-dialog. |
[data-comps="confirm-dialog"] | Yes/no confirmation dialogs |
[data-comps="toast-stack"] | Where pop-up messages appear |
[data-comps="toast"] | Each pop-up message Add: [data-comps-tone="success|error|info|warning"] |
[data-comps="toast-close"] | Its close button |
[data-comps="cookie-banner"] | The cookie banner |
[data-comps="cookie-banner-card"] | Its card |
[data-comps="cookie-banner-offer"] | The offer line, when there is one |
[data-comps="cookie-banner-title"] | Its title |
[data-comps="cookie-banner-text"] | Its text |
[data-comps-role="cookie-accept"] | Accept |
[data-comps-role="cookie-reject"] | Reject |
[data-comps="verification-banner"] | The verify-your-email banner |
[data-comps="verification-banner-text"] | Its text |
[data-comps="verification-banner-resend"] | The resend button |
[data-comps="verification-banner-close"] | The dismiss button |
[data-comps="confetti"] | The confetti burst |
[data-comps="winner-lightbox"] | The full-size winner photo viewer |
[data-comps="winner-lightbox-image"] | The photo |
[data-comps="winner-lightbox-title"] | The caption title |
[data-comps="winner-lightbox-description"] | The caption text |
[data-comps="winner-lightbox-close"] | Close |
[data-comps="winner-lightbox-prev"] | Previous |
[data-comps="winner-lightbox-next"] | Next |
Buttons
| Hook | What it is |
|---|---|
[data-comps="button"] | Every site button, including pop-up buttons Add: [data-comps-variant="primary|secondary|outline|ghost|gradient|destructive|danger|warning"] |
Competition cards
| Hook | What it is |
|---|---|
[data-comps="competition-card"] | Each competition card |
[data-comps="card-title"] | The card title |
[data-comps="card-price"] | The ticket price |
[data-comps="card-progress"] | The tickets-sold bar |
[data-comps="card-badge"] | Each badge Add: [data-comps-badge="early-bird|discount|app-exclusive|locked|sold-out|max-reached|instant-wins|selling-fast|main-prize-boost|instant-win-boost|cashback|cash-alternative|credit-alternative|auto-draw|timer|ended"] |
[data-comps="card-cta-winner"] | The winner line on an ended card |
[data-comps="card-image"] | The image area of a changed card |
[data-comps="card-status"] | The Sold Out / Ended status of a changed card |
[data-comps="card-buttons"] | The button row of a changed card |
[data-comps="card-block"] | The extra parts a changed card can show Add: [data-comps-block="summary|category-tag|tickets-left|max-per-person|prize-value|draw-date|opens-in|boost|cashback"], [data-boost-display="chip|band|panel|ticker"] (boost only), [data-cashback-display="chip|band|ticker"] (cashback only) |
Pop-ups
| Hook | What it is |
|---|---|
[data-comps="popup"] | Each pop-up's outer shell Add: [data-comps-frame="modal|corner|bar"], [data-comps-popup-id] (the last part of the pop-up's editor address; the Sign-up Popup is signup) |
[data-comps="popup-card"] | The card |
[data-comps="popup-close"] | Its close button |
[data-comps="popup-block"] | Each content block Add: [data-comps-type="heading|text|image|button|countdown|competition"] |
Competition page
| Hook | What it is |
|---|---|
[data-comps="competition-hero"] | The hero section |
[data-comps="competition-hero-backdrop"] | The hero backdrop (target img inside it to hide just the photo) |
[data-comps="competition-hero-badges"] | The status pill and prize badges |
[data-comps="competition-hero-content"] | The hero text block |
[data-comps="competition-hero-scroll-cue"] | The Scroll indicator |
[data-comps="competition-hero-blend"] | The fade from the hero into the page |
[data-comps="competition-ended-cta"] | The ended message in the hero |
[data-comps="competition-title"] | The competition title |
[data-comps="competition-summary"] | The summary under the title |
[data-comps="competition-countdown"] | The countdown |
[data-comps="competition-countdown-digit"] | Each countdown number |
[data-comps="competition-progress"] | The tickets-sold bar |
[data-comps="competition-early-bird"] | The early bird banner |
[data-comps="competition-cashback"] | The cashback banner |
[data-comps="competition-boost"] | The instant win boost banner |
[data-comps="competition-stats"] | Price, total tickets, max per order and draw date |
[data-comps="competition-video"] | The video section |
[data-comps="competition-gallery"] | The gallery section |
[data-comps="competition-gallery-grid"] | The gallery thumbnails |
[data-comps="competition-gallery-item"] | Each thumbnail (use :first-child for the lead image) |
[data-comps="competition-about"] | About This Prize |
[data-comps="competition-details"] | The details grid |
[data-comps="competition-bundle-offers"] | Bundle offers |
[data-comps="competition-instant-wins"] | The instant win prizes |
[data-comps="instant-win-boosted-ticket"] | An instant win ticket number that is boosted |
[data-comps="competition-entry-list"] | All entries |
[data-comps="competition-entry-table"] | The entries table |
[data-comps="competition-related"] | More Competitions |
[data-comps="competition-purchase"] | The purchase panel (desktop) |
[data-comps="competition-main-prize-boost"] | The main prize boost panel Add: [data-comps-state="earned|nudge"] |
[data-comps="competition-mobile-purchase"] | The sticky purchase bar (phones) |
[data-comps="competition-results"] | The results panel on an ended competition |
[data-comps="competition-my-tickets"] | The You already have X tickets banner |
[data-comps="competition-app-install"] | The app-exclusive install prompt |
[data-comps="competition-main-content"] | The left column |
[data-comps="competition-sidebar"] | The right column |
[data-comps="competition-skeleton"] | The loading placeholder |
Checkout and order confirmation
| Hook | What it is |
|---|---|
[data-comps="roundup-dialog"] | The Add a little more? dialog |
[data-comps="roundup-basket-total"] | Its basket total line |
[data-comps="roundup-section"] | Each group of options |
[data-comps="roundup-option"] | Each option |
[data-comps="roundup-option-hero"] | The option's big figure |
[data-comps="roundup-option-title"] | The option's title |
[data-comps="roundup-option-caption"] | The option's small print |
[data-comps="roundup-decline"] | The No thanks button |
[data-comps="main-prize-boost-dialog"] | The main prize boost dialog |
[data-comps="checkout-boosted"] | The boost note on a checkout line |
[data-comps="checkout-boost-kept"] | The boost row in the checkout totals |
[data-comps="prizes-checking"] | The checking-for-prizes message after payment |
[data-comps="prizes-progress"] | Its progress counter |
[data-comps="prizes-halted"] | The message when the prize check pauses |
[data-comps="instant-wins-summary"] | The instant wins you won |
[data-comps="instant-win-row"] | Each instant win |
[data-comps="instant-wins-wallet"] | The credit-added line |
[data-comps="reveal-boost-card"] | The boost card in the instant win reveal |
[data-comps="order-line-boosted"] | The boost note on an order line |
[data-comps="ticket-wall-toggle"] | The show-all-tickets button |
[data-comps="ticket-wall-checking"] | The checking-tickets note |
[data-comps="order-cashback"] | The cashback line |
[data-comps="jackpot-contributed"] | The jackpot contribution line |
[data-comps="entry-boosted-chip"] | The Boosted chip on My Entries |
[data-comps="winner-boosted-chip"] | The Boosted chip on the winners page |
Jackpot
| Hook | What it is |
|---|---|
[data-comps="jackpot-amount"] | The figure on the Jackpot block Add: [data-comps-state="active|won|disabled"] |
[data-comps="jackpot-feed-amount"] | The figure on the Jackpot Feed block Add: [data-comps-state="active|won|disabled"] |
[data-comps="jackpot-feed-pulse"] | The live contribution line on the Jackpot Feed |
[data-comps="jackpot-feed-row"] | Each Jackpot Feed row |
[data-comps="jackpot-win-popup"] | The jackpot win pop-up |
[data-comps="jackpot-win-popup-card"] | Its card |
[data-comps="jackpot-win-panel"] | The jackpot win panel after payment |
Pages and text
| Hook | What it is |
|---|---|
[data-comps="prose"] | Long-form text (policy and information pages). Paragraphs and lists take a colour set here; target headings, links and quotes directly, e.g. [data-comps="prose"] :is(h1,h2,h3). |
[data-comps="error-page"] | The error page Add: [data-comps-status] (the error code, e.g. 404 or 500) |
[data-comps="error-card"] | Its card |
[data-comps="error-code"] | The big error code |
[data-comps="error-title"] | The error message |
[data-comps="error-links"] | The links under it |
[data-comps="auth-logo"] | The logo on the log in and register pages |
[data-comps="auth-logo-text"] | The site name shown there when there is no logo image |
Page-builder blocks
Every block sits in a wrapper you can target by type. The block's own parts are the classes in the groups below.
| Hook | What it is |
|---|---|
[data-comps="page-block"] | Every block's wrapper Add: [data-comps-type] (the block type: hero, text, lucky-dip, card-grid…), [data-comps-nested="true"] (inside a Two Columns block), [data-comps-empty="true"] (has nothing to show), [data-comps-offscreen="true"] (scrolled out of view (read only: don't restyle)), [data-comps-unsized="true"] (sizes itself (read only)) |
Hero block
Every hero layout uses the same part names, wherever it has that part.
| Hook | What it is |
|---|---|
.pb-hero | The hero block Parts: .pb-hero__header, .pb-hero__live, .pb-hero__headline, .pb-hero__tagline, .pb-hero__actions, .pb-hero__loading, .pb-hero__featured, .pb-hero__empty, .pb-hero__empty-title, .pb-hero__empty-text, .pb-hero__empty-cta, .pb-hero__card, .pb-hero__image, .pb-hero__badges, .pb-hero__badge, .pb-hero__timer, .pb-hero__title, .pb-hero__summary, .pb-hero__price, .pb-hero__progress, .pb-hero__sold, .pb-hero__cta, .pb-hero__prev, .pb-hero__next, .pb-hero__dots, .pb-hero__dot, .pb-hero__scrubber, .pb-hero__frame-labelAdd: [data-layout="bento|carousel|classic-grid|cover-flow|diagonal|filmstrip|masonry|minimal|scroll|split|spotlight|stacked"] (on __featured), [data-featured="true"] (on the large lead __card), [data-badge="featured|app-exclusive|instant-wins"] (on __badge), [data-state="active"] (on the current __dot) |
Lucky Dip block
| Hook | What it is |
|---|---|
.pb-lucky-dip | The Lucky Dip block (also [data-comps="lucky-dip"]) Parts: .pb-lucky-dip__icon, .pb-lucky-dip__heading, .pb-lucky-dip__subheading, .pb-lucky-dip__picker, .pb-lucky-dip__note |
[data-comps="lucky-dip"] | The Lucky Dip block card |
[data-comps="lucky-dip-picker"] | The amount buttons, on the block and in the header Add: [data-comps-source="block|header"], [data-comps-amount] (on each button, e.g. [data-comps-amount="10"]) |
Heading, Text and Divider blocks
| Hook | What it is |
|---|---|
.pb-heading | Heading block Parts: .pb-heading__title, .pb-heading__gradient, .pb-heading__subtitle |
.pb-text | Text block Parts: .pb-text__body |
.pb-divider | Divider block Parts: .pb-divider__line, .pb-divider__text |
Image, Image Row, Video and Embed blocks
| Hook | What it is |
|---|---|
.pb-image | Image block Parts: .pb-image__link, .pb-image__img, .pb-image__caption |
.pb-image-row | Image Row block Parts: .pb-image-row__item, .pb-image-row__img |
.pb-video | Video block Parts: .pb-video__player, .pb-video__embed, .pb-video__placeholder, .pb-video__caption |
.pb-video-bg | Video block with Play as background ticked Parts: .pb-video-bg__cover, .pb-video-bg__frameAdd: [data-fit="fill|fit"], [data-state="loading|playing|stopped|static"] |
.pb-embed | Embed block Parts: .pb-embed__frame, .pb-embed__placeholder |
.pb-custom-html | Custom HTML block: the box your pasted code goes into. Its placeholder part is the card shown in its place in page-builder previews only, never on the live site. Parts: .pb-custom-html__placeholder |
Two Columns, Button Row, Card and Card Grid blocks
| Hook | What it is |
|---|---|
.pb-columns | Two Columns block Parts: .pb-columns__column |
.pb-button-row | Button Row block (its buttons are [data-comps="button"]) |
.pb-card | Card block Parts: .pb-card__panel, .pb-card__media, .pb-card__image, .pb-card__icon, .pb-card__title, .pb-card__description, .pb-card__cta |
.pb-card-grid | Card Grid block Parts: .pb-card-grid__card, .pb-card-grid__media, .pb-card-grid__image, .pb-card-grid__icon, .pb-card-grid__title, .pb-card-grid__description, .pb-card-grid__cta |
.pb-accordion | Accordion block Parts: .pb-accordion__heading, .pb-accordion__list, .pb-accordion__item, .pb-accordion__trigger, .pb-accordion__question, .pb-accordion__chevron, .pb-accordion__answerAdd: [data-state="open|closed"] (on __item) |
Trust block
| Hook | What it is |
|---|---|
.pb-trust | Trust block. __eyebrow is the small line (the Heading setting); __heading is the big title (the Subheading setting). Parts: .pb-trust__glow, .pb-trust__eyebrow, .pb-trust__heading, .pb-trust__grid, .pb-trust__card, .pb-trust__icon, .pb-trust__title, .pb-trust__description |
Competitions Grid and Ending Soon blocks
The cards inside are competition cards, so the card hooks reach them too.
| Hook | What it is |
|---|---|
.pb-competitions-grid | Competitions Grid block Parts: .pb-competitions-grid__header, .pb-competitions-grid__eyebrow, .pb-competitions-grid__heading, .pb-competitions-grid__controls, .pb-competitions-grid__chip, .pb-competitions-grid__sort, .pb-competitions-grid__filter-heading, .pb-competitions-grid__clear, .pb-competitions-grid__tile, .pb-competitions-grid__tile-image, .pb-competitions-grid__tile-label, .pb-competitions-grid__rail, .pb-competitions-grid__active-chip, .pb-competitions-grid__filter-toggle, .pb-competitions-grid__panel, .pb-competitions-grid__panel-done, .pb-competitions-grid__count, .pb-competitions-grid__grid, .pb-competitions-grid__skeleton, .pb-competitions-grid__empty, .pb-competitions-grid__empty-title, .pb-competitions-grid__empty-text, .pb-competitions-grid__empty-cta, .pb-competitions-grid__moreAdd: [data-tag-slug] (on each __chip), [aria-pressed="true|false"] (on a chip: the selected filter) |
.pb-ending-soon | Ending Soon block Parts: .pb-ending-soon__header, .pb-ending-soon__eyebrow, .pb-ending-soon__eyebrow-dot, .pb-ending-soon__heading, .pb-ending-soon__subheading, .pb-ending-soon__placeholder, .pb-ending-soon__rail, .pb-ending-soon__track, .pb-ending-soon__item, .pb-ending-soon__prev, .pb-ending-soon__next |
Next Draw, Countdown and stats blocks
| Hook | What it is |
|---|---|
.pb-next-draw | Next Draw block Parts: .pb-next-draw__heading, .pb-next-draw__link, .pb-next-draw__card, .pb-next-draw__badge, .pb-next-draw__title, .pb-next-draw__title-link, .pb-next-draw__countdown, .pb-next-draw__unit, .pb-next-draw__unit-value, .pb-next-draw__unit-label, .pb-next-draw__ctaAdd: [data-state="loading"] (on __card while it loads) |
.pb-countdown | Countdown block Parts: .pb-countdown__heading, .pb-countdown__expired, .pb-countdown__units, .pb-countdown__unit, .pb-countdown__unit-value, .pb-countdown__unit-label, .pb-countdown__inlineAdd: [data-state="running|expired"] |
.pb-stats-row | Stats Row block Parts: .pb-stats-row__panel, .pb-stats-row__stat, .pb-stats-row__value, .pb-stats-row__labelAdd: [data-stat="live|winners|prizes"] (on __stat) |
.pb-stat-tiles | Stat Tiles block, Tiles layout Parts: .pb-stat-tiles__card, .pb-stat-tiles__value, .pb-stat-tiles__labelAdd: [data-state="loading"] (on __value while it loads) |
.pb-stat-hero | Stat Tiles block, Hero layout Parts: .pb-stat-hero__badge, .pb-stat-hero__heading, .pb-stat-hero__value, .pb-stat-hero__label, .pb-stat-hero__text |
Jackpot and Jackpot Feed blocks
| Hook | What it is |
|---|---|
.pb-jackpot | Jackpot block Parts: .pb-jackpot__card, .pb-jackpot__heading, .pb-jackpot__subheading, .pb-jackpot__amount, .pb-jackpot__caption, .pb-jackpot__cause, .pb-jackpot__winner, .pb-jackpot__odds, .pb-jackpot__cta |
.pb-jackpot-feed | Jackpot Feed block Parts: .pb-jackpot-feed__pot, .pb-jackpot-feed__heading, .pb-jackpot-feed__subheading, .pb-jackpot-feed__amount, .pb-jackpot-feed__caption, .pb-jackpot-feed__cause, .pb-jackpot-feed__list, .pb-jackpot-feed__pulse, .pb-jackpot-feed__empty, .pb-jackpot-feed__view-all, .pb-jackpot-feed__row, .pb-jackpot-feed__row-icon, .pb-jackpot-feed__name, .pb-jackpot-feed__row-amount, .pb-jackpot-feed__row-cause, .pb-jackpot-feed__timeAdd: [data-fresh="true"] (briefly, on a row that has just arrived) |
Live Feed, Winner Ticker, Winner Wall and Social Follow blocks
| Hook | What it is |
|---|---|
.pb-live-feed | Live Feed block Parts: .pb-live-feed__header, .pb-live-feed__live-dot, .pb-live-feed__heading, .pb-live-feed__subheading, .pb-live-feed__view-all, .pb-live-feed__skeleton, .pb-live-feed__empty, .pb-live-feed__list, .pb-live-feed__row, .pb-live-feed__row-icon, .pb-live-feed__kicker, .pb-live-feed__time, .pb-live-feed__name, .pb-live-feed__headline, .pb-live-feed__supporting, .pb-live-feed__thumb, .pb-live-feed__chevronAdd: [data-type] (on __row: what happened, e.g. instant_win), [data-fresh="true"] (briefly, on a row that has just arrived) |
[data-comps="live-feed"] | The Live Feed block |
[data-comps="live-feed-row"] | Each Live Feed row |
.pb-winner-ticker | Winner Ticker block Parts: .pb-winner-ticker__track, .pb-winner-ticker__item, .pb-winner-ticker__badge, .pb-winner-ticker__name, .pb-winner-ticker__prize, .pb-winner-ticker__separator, .pb-winner-ticker__empty, .pb-winner-ticker__fadeAdd: [data-type="main_prize|instant_win|jackpot"] (on __item) |
.pb-winner-wall | Winner Wall block Parts: .pb-winner-wall--carousel, .pb-winner-wall--strip, .pb-winner-wall--masonry, .pb-winner-wall--mosaic, .pb-winner-wall--grid, .pb-winner-wall__header, .pb-winner-wall__heading, .pb-winner-wall__subheading, .pb-winner-wall__stage, .pb-winner-wall__frame, .pb-winner-wall__media, .pb-winner-wall__photo, .pb-winner-wall__caption, .pb-winner-wall__title, .pb-winner-wall__context, .pb-winner-wall__description, .pb-winner-wall__prev, .pb-winner-wall__next, .pb-winner-wall__thumbs, .pb-winner-wall__thumb, .pb-winner-wall__marquee, .pb-winner-wall__track, .pb-winner-wall__track--scrollable, .pb-winner-wall__rail, .pb-winner-wall__masonry, .pb-winner-wall__mosaic, .pb-winner-wall__grid, .pb-winner-wall__tile, .pb-winner-wall__tile-inner |
.pb-social-follow | Social Follow block Parts: .pb-social-follow__header, .pb-social-follow__heading, .pb-social-follow__subheading, .pb-social-follow__grid, .pb-social-follow__link, .pb-social-follow__card, .pb-social-follow__icon, .pb-social-follow__name, .pb-social-follow__tagline, .pb-social-follow__arrow |