Classic Quiz Widget - Customizing the Header Element

📖 What is the Header Element?

The Header is the introductory section at the top of your quiz that provides context. It consists of three text components:

• Quiz Label - The small "QUIZ" identifier
• Quiz Title - Your quiz's main headline
• Description - Supporting text that explains what the quiz is about

The Header appears consistently across all three widget templates (Standard, Split, and Overlay), though its positioning varies by template.

📖 Template-Specific Positioning

Understanding where the Header appears in each template helps you visualize how your customizations will look:

Standard Template: The Header elements appear at the top of the quiz card

Split Template: The Header elements appear at the top of the left image panel, overlaid on your image

Overlay Template: The Header elements appear overlaid on your background image at the top of the quiz card

⚙️ How to Customize the Header Elements

📖 Changing Header Text Colors

What controls the colors of the header elements: The textColor property in Color Schemes

What it affects:

• Quiz Label color
• Quiz Title color
• Description text color

Where to find it: themeOptions → colorSchemes → light (or dark) → textColor

Default values:

• Light mode: #212121
• Dark mode: #FAFAFA

How to set it:

1. Navigate to the Storybook
2. Expand themeOptions → colorSchemes → light/dark
3. Find the textColor property
4. Enter your desired hex color (e.g., "#FF5733")

📝 Note: Currently, these settings can be easily configured through our Storybook, where you can even preview your changes in real-time. Once you're satisfied with your customization, you can copy the configuration and embed it in your implementation. In the future, these settings will be available directly in the Management Portal for even easier access.

The screenshots below show the textColor property (set to #FFA500 orange for demonstration) applied to the Header elements (Quiz Label, Title, and Description) in different templates.

Note: textColor also controls other text elements visible in these screenshots, including question text and answer options.

📖 Changing Header Typography

1) Quiz Label

What controls the Quiz Label font: The secondary font in Custom Font Family

What it affects:

• The small "QUIZ" label font

Where to find it: themeOptions → customFontFamily → light (or dark) → secondary

Default value: "Roboto, sans-serif"

How to set it:

1. Navigate to the Storybook
2. Expand themeOptions → customFontFamily → light/dark
3. Enter your desired font family in the secondary field (e.g., "Roboto, sans-serif")

📝 Note: Currently, these settings can be easily configured through our Storybook, where you can even preview your changes in real-time. Once you're satisfied with your customization, you can copy the configuration and embed it in your implementation. In the future, these settings will be available directly in the Management Portal for even easier access.

The screenshots below demonstrate the secondary font property (set to "Brush Script MT, cursive" for demonstration) applied to the Quiz Label in the Header element for different templates.

Note: The secondary font also controls other text elements throughout the quiz, including question number labels (e.g., "QUESTION 1", "QUESTION 2") and explanation text in the Answers tab.

📖 Changing Header Typography

2) Quiz Title & Description Font

What controls the Title & Description font: The primary font in Custom Font Family

What it affects:

• Quiz Title font
• Description text font

Where to find it: themeOptions → customFontFamily → light (or dark) → primary

Default value: "Ubuntu, sans-serif"

How to set it:

1. Navigate to the Storybook
2. Expand themeOptions → customFontFamily → light/dark
3. Enter your desired font family in the primary field (e.g., "Georgia, serif")

📝 Note: Currently, these settings can be easily configured through our Storybook, where you can even preview your changes in real-time. Once you're satisfied with your customization, you can copy the configuration and embed it in your implementation. In the future, these settings will be available directly in the Management Portal for even easier access.

The screenshots below demonstrate the primary font property (set to "Edwardian Script ITC, cursive" for demonstration) applied to the Header element (Quiz Title and Description) in all different templates. 

Note: The primary font also controls other key text elements throughout the quiz, including question text, answer options, and button text (e.g., "NEXT QUESTION").

📖 Adjusting Spacing Between Title and Description

What controls the spacing: The 3xs spacing token in Spacing Scale

What it affects:

• The vertical gap between the quiz title and the description text below it

Where to find it: themeOptions → spacingScale → 3xs

Default value: 2px

How to set it:

1. Navigate to the Storybook
2. Expand themeOptions → spacingScale
3. Find the 3xs property
4. Enter your desired value in pixels (e.g., "8px", "12px")

💡 Tip: If you want more breathing room between your title and description, try increasing this to 8px or 12px.

📝 Note: Currently, these settings can be easily configured through our Storybook, where you can even preview your changes in real-time. Once you're satisfied with your customization, you can copy the configuration and embed it in your implementation. In the future, these settings will be available directly in the Management Portal for even easier access.

The screenshots below demonstrate the 3xs spacing token (increased from the default 2px for demonstration) controlling the vertical gap between the Quiz Title ("Bulgarian Football Legends: How Well Do You Know Dimitar Berbatov?") and the Description text in the Header element. The arrows indicate where this spacing is applied.

Quick Reference Table

Other Widget Elements:

• 📚 Customizing the Progress Bar Element
• 📚 Customizing the Stopwatch Element (📖 Coming Soon)
• 📚 Customizing the Main Content Area
• 📚 Customizing Navigation Buttons (📖 Coming Soon)
• 📚 Customizing the Results Screen

𓂃🖊 Theme Options Documentation

• Classic Quiz Widget - Advanced Customization with Theme Options - Complete guide to all available theme options and customization features