Home > FAQs > Fans United Widgets: Classic Quiz FAQs > Advanced Theme Options Customization > Classic Quiz Widget - Spacing Customization for Overlay Template

Classic Quiz Widget - Spacing Customization for Overlay Template

Customizing Widget Spacing Through Theme Options

The Spacing Scale theme option provides precise control over all spacing and padding throughout your Classic Quiz widget's Overlay template. Unlike fixed spacing that applies uniformly, the Spacing Scale allows you to customize the breathing room between elements, internal padding, and overall layout density to match your design preferences and brand guidelines.

πŸ“– Article Structure

This guide is organized into several sections to help you understand and configure Spacing effectively:

  1. βš™οΈ How Do I Access and Configure Spacing Scale Settings? - Step-by-step instructions for accessing Spacing Scale settings in our Storybook
  2. πŸ“– What Elements Does Spacing Scale Control in Overlay Template Quizzes? - Overview of the spacing scale structure and how it applies to different UI elements
  3. Spacing Scale Values & Their Applications - Detailed explanations of each spacing token (3xs through 3xl) with visual examples showing where they're used on the widget UI

βš™οΈ How Do I Access and Configure Spacing Scale Settings?

Currently, Spacing Scale settings can be configured through our Storybook interface. In the future, these settings will be available directly in the Management Portal, and this guide will be updated to reflect that change.

Steps to Access Spacing Scale in Our Storybook:

  1. Open Storybook - Navigate to our Widgets Storybook
  2. Select ClassicQuizPlay - In the left sidebar under "COMPONENTS", click on "ClassicQuizPlay"
  3. Choose a Quiz Story - From the list of quiz stories, select either:
    • "πŸ”§ Client Classic Quiz (Live Data)" - If you want to test with real, live data from your quiz
    • Any other hardcoded story - If you want to experiment and play around with the settings using pre-defined quiz data (no API credentials needed - just jump in and start customizing!)
  4. View the Controls Panel - At the bottom of the screen, you'll see the "Controls" tab with various options
  5. Expand themeOptions - Find and click on "themeOptions" to expand the advanced theme options
  6. Open spacingScale - Click on "spacingScale" to expand it and view all available spacing properties
  7. Customize Your Spacing - You'll see all available spacing tokens (3xs, 2xs, xs, sm, md, lg, xl, 2xl, 3xl). Enter your desired values in pixels (e.g., "24px", "16px")
  8. Preview Changes Live - Your spacing changes appear instantly in the quiz preview above

πŸ’‘ New to Storybook stories? Learn more about the Classic Quiz Storybook stories and how to use them in our Introduction to Classic Quiz Storybook guide.

πŸ“– What Elements Does Spacing Scale Control in Overlay Template Quizzes?

The Spacing Scale uses a structured token system with nine predefined spacing values. Each token is strategically applied to different UI elements throughout your quiz to create consistent spacing and visual rhythm.

Spacing Scale Tokens:

  • 3xs - Ultra-fine spacing / Extra extra extra small (Default: 2px)
  • 2xs - Extra-fine spacing / Extra extra small (Default: 4px)
  • xs - Fine spacing / Extra small (Default: 8px)
  • sm - Small spacing (Default: 12px)
  • md - Medium spacing (Default: 16px)
  • lg - Large spacing (Default: 24px)
  • xl - Extra-large spacing (Default: 32px)
  • 2xl - Double extra-large spacing (Default: 40px)
  • 3xl - Triple extra-large spacing (Default: 48px)

The Overlay template creates a visually immersive experience by overlaying your quiz content directly on the added background imagery. These spacing values control:

  • Internal padding within containers (questions, answer options, buttons)
  • Gaps between elements (between answer options, between buttons, between sections)
  • Vertical spacing between major sections (headline, question area, footer)

This granular spacing control allows you to create anything from compact, information-dense layouts to spacious, airy designs that emphasize breathing room and visual clarity.

 

Spacing Scale Values & Their Applications

Below, we'll show you what each spacing token controls in the Overlay template, including the default values and where they're applied throughout your quiz.

βš™οΈ 3xs: What Does It Control? How Do I Set It?

(Default value: 2px)

It affects:

  • Gap between title and description - The vertical spacing between the quiz title (e.g., "Bulgarian Football Legends: How Well Do You Know Dimitar Berbatov?") and the description text below it (e.g., "Do this Quiz and test your knowledge on the life and career of the bulgarian football legend!")

How to set it: Set your desired pixel value for the 3xs property in the spacingScale object. This will update the gap between the title and description throughout your quiz.

Start screen comparison - left side shows default 3xs spacing (2px) with minimal gap between title and description, right side shows custom 3xs spacing with arrows demonstrating the increased vertical separation between the title and description text

Question screen comparison showing the Overlay template - left side displays default 3xs spacing (2px), right side shows custom 3xs spacing with arrows indicating the increased gap between the quiz title and description text overlaid on the background image

βš™οΈ 2xs: What Does It Control? How Do I Set It?

(Default value: 4px)

It affects:

  • Horizontal padding for Answer option text (with images) - The text padding inside answer option buttons when they include images, creating spacing between the option image and the text label

How to set it: Set your desired pixel value for the 2xs property in the spacingScale object. This will update the horizontal padding for the text of answer options that contain images.

Overlay template quiz showing answer options with images - left side shows default 2xs spacing (4px) with compact text padding, right side shows custom 2xs spacing with arrows demonstrating the increased horizontal padding creating more space around the date labels (e.g., "30 January 1971", "30 January 1981") within each answer option

βš™οΈ xs: What Does It Control? How Do I Set It?

(Default value: 8px)

It affects:

  • Answer option padding - The internal padding within individual answer option boxes
  • Score content wrapper vertical padding - The top and bottom padding around the score content area on the results screen

How to set it: Set your desired pixel value for the xs property in the spacingScale object. This will update all elements using the xs spacing token to maintain consistent fine spacing throughout your quiz.

Overlay template quiz showing answer options without images - left side shows default xs spacing (8px), right side shows custom xs spacing with arrows demonstrating the increased internal padding (both vertical and horizontal) within each answer option box

Overlay template quiz showing the results screen - left side shows default xs spacing (8px), right side shows custom xs spacing with arrows demonstrating the increased vertical padding (top and bottom) around the score content area

βš™οΈ md: What Does It Control? How Do I Set It?

(Default value: 16px)

The md spacing token controls medium spacing throughout your quiz, representing the most commonly used spacing value for padding and gaps.

It affects:

  • Main content area padding - The internal padding within the semi-transparent overlay card that contains questions and answer options
  • Main content area gap - The spacing between the question text and answer options within the semi-transparent overlay card
  • Score content area padding - The padding around the score content area on the results screen (containing the badge icon, congratulations text, score, and completion time)
  • Results screen elements gap - The spacing between the "Thank you for participating!" text and the action buttons below it
  • Answers screen card padding - The internal padding within each individual answer card container on the Answers tab (containing question number, question text, user's answer, and explanation)

How to set it: Set your desired pixel value for the md property in the spacingScale object. This will update all elements using the md spacing token throughout your quiz.

Overlay template quiz showing the question screen - left side shows default md spacing (16px), right side shows custom md spacing with arrows demonstrating the increased padding within the semi-transparent overlay card and the gap between the question text and answer options

Overlay template quiz showing the Results screen - left side shows default md spacing (16px), right side shows bigger custom md spacing with arrows demonstrating the increased padding around the score content area and the gap between "Thank you for participating!" text and the action buttons

Overlay template quiz showing the Answers tab - left side shows default md spacing (16px), right side shows custom md spacing with arrows demonstrating the increased internal padding within each answer card

βš™οΈ lg: What Does It Control? How Do I Set It?

(Default value: 24px)

It affects:

  • Score badge vertical padding - The top and bottom padding around the badge icon on the results screen
  • Answers screen outer padding - The padding around the entire answers container, creating breathing room between the answer cards and the edge of the screen

How to set it: Set your desired pixel value for the lg property in the spacingScale object. This will update all elements using the lg spacing token to create consistent large spacing throughout your quiz.

Overlay template quiz showing the Results screen - left side shows default lg spacing (24px), right side shows custom lg spacing with arrows demonstrating the increased vertical padding (top and bottom) around the badge icon

Overlay template quiz showing the Answers tab - left side shows default lg spacing (24px), right side shows  bigger custom lg spacing with arrows demonstrating the increased padding around the entire answers container

βš™οΈ xl: What Does It Control? How Do I Set It?

(Default value: 32px)

It affects:

  • Headline content padding - The internal padding around the headline section content (quiz label, title, description) and the branding, and buttons (including "Start Quiz" and "Next Question" buttons)
  • Results screen content padding - The padding around the entire results overlay card including the score content area, "Thank you for participating!" text, and action buttons

How to set it: Set your desired pixel value for the xl property in the spacingScale object. This will update all elements using the xl spacing token throughout your quiz.

Overlay template quiz showing the start screen - left side shows default xl spacing (32px), right side shows custom xl spacing with arrows demonstrating the increased padding around the headline content and Start Quiz button

Overlay template quiz showing the question screen - left side shows default xl spacing (32px), right side shows bigger custom xl spacing with arrows demonstrating the increased padding around the headline content, question card area and "Next Question"

Overlay template quiz showing the results screen - left side shows default xl spacing (32px), right side shows custom xl spacing with arrows demonstrating the increased padding around the entire results overlay card



Further Reading

π“‚ƒπŸ–Š Theme Options Documentation

πŸ“š Widget FAQs

πŸ“š Main Widget Documentation

Updated: