Source code

Getting Started

Color CSS Grid 🧪Grid Icons RichText Shadows Spacing Theming Typography

Accordion Accordion (njk)Activator Details Card Activator Resource Card Add Player Address Search Advert Banner Advert Banner TF Alert Banner Avatar Back Top Bank Cards Benefit Card Benefit Card (njk)Breadcrumb Button Button (njk)Card Card (njk)Carousel Carousel (njK)Carousel Hero Banner CarouselV2 Coach Accreditation Card Coach Accreditation Expiry Card Coach Accreditation status Card Coach Area Event Card Coach Area Independent Learning Coach Area Next Step Card Coach Area Profile Card Coach Area Resource Card Coach Content Feedback Coach Media Carousel Coach Notification Banner Coach Outstanding Actions Card Coach Work Card Color Splash Content Hub Layout Content Hub Layout Templates Content Layout Content Layout Templates Copy to Clipboard Counntdown Countdown (njk)Course Class Booking Course Search Result Card Court Area Court Location Search Court Pagination Court Search Court Search Hero Banner CreditoMeter Date Picker Date Picker Display Date Range Picker Digital Media Service Navigation Document Link Donate block Event Banner Event Card Exclusive members content card Exclusive members content card (njk)Exclusive members content card carousel Exclusive Members Content Carousel (njk)Favourite Player Card Filter Panel Footerv2 Footerv2 Padel Footerv3 Form Generator Game Section Header Graphics copy block Hero Banner Hero Banner - Standard Hero Card Highlight Banner Home Page Hero Banner - Padel Home Page Hero Banner V2 Image Image (njk)Image Upload Just Giving Donation Key Points (deprecated)Landing page hero TF Lead Partner Lists Lists (njk)Loader Location Search Login Prompt Login Prompt TF Major Events Hero Banner Map block TF Map CTA block TF Match Details Match Result Match Result Status Match Score Update Match Table Media Carousel MegaNav MegaNav (Dark)MegaNav-sign-in Members Area Navbar (njk)Members Area Navigation Membership Banner Mission inspire block TF Modal Modal (njk)Navigational Navigational (njk)News letter Notification Card Notification Container Officials Area Basic Info Card Package Card Package Card (njk)Pagination Payment Gateway Selector Play Your Way Banner Player Details Player Ranking Player Stats Player Tracker Primary Navbar Quotation Block Radio Radio (njk)Ring progressbar Rivals promotional Banner Score Result Scrollable Content Search Field Search Field Banner Section Header Select Select (njk)Side Navigation Snackbar Snackbar (njk)Social Share Social Share V2 Social Wall Sponsor Panel SponsorBanner Spotlight Card Spotlight Card Old Spotlight Card Old Spotlight Card TF Stats Banner Steps Suggestion Text Input Table Tabs Tabs (njk)Tag Tag (njk)Tennis League Card TEST Text Input Text Input (njk)Time Keeper Timeline Toggle Button Toggle Submit Button UserInfo Venue Facilities Venue Search Video Embed Video Embed TF Video hero Web Components | Success Screen Youth Campaign YouTube Playlist Carousel

Guides

Architecture Basic usage Config options Question schema

Extending

Creating a new question component Module-specific types Adding a sample to the playground

Playgrounds

General Form Components Household Components Search & Finder Components Venue Registration Components

Overview

Feedback

Snackbar Error Snackbar Success Screen

Layout

Info Screen Header Section Block Confirm Section Edit Card Info

Overlays

Overlay Modal Form Modal

Media

Carousel V2 Venue Carousel YouTube Shorts YouTube Short Carousel

Marketing

App Download Banner App Feature Promotional Component Promotional Hero Banner Email Consent

Controls

Counter Favorite Icon Test Component

Web Components ·Playgrounds

Favourite Icon

Toggle favourite state via is-favorite. Edit markup and click Apply.

Sizes and states

Live preview

Markup (editable)