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

Classic Quiz Widget - Spacing Customization for Standard 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 Standard 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 in our Storybook
  2. πŸ“– What Elements Does Spacing Scale Control in Standard 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 Standard 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 Standard template uses a card-based layout where 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, progress bar, 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 Standard 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 in both desktop and mobile layouts.

Standard template quiz with default 3xs spacing (2px) - controls the minimal gap between the quiz title "Bulgarian Football Legends: How Well Do You Know Dimitar Berbatov?" and the description text below it

Testing with custom 3xs spacing (42px) instead of default 2px to clearly demonstrate which UI element this spacing controls - the significantly increased gap creates more visual separation between the title and description

Mobile view comparison showing the 3xs spacing effect - left side shows default spacing, right side shows the increased gap between title and description text with the custom 3xs value

 

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

(Default value: 4px)

It affects:

  • Answer option horizontal padding (with images) - The 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 answer options that contain images.

Standard template quiz showing answer options with images - the 2xs spacing (default 4px) controls the horizontal padding for the answer text labels (e.g., "30 January 1971", "30 January 1981")

Testing with custom 2xs spacing (larger value) to clearly demonstrate which UI element this spacing controls - the increased horizontal padding creates noticeably more space between the images and the text within each answer option, making the date labels appear more separated from their corresponding images

Mobile view comparison - left side shows default 2xs spacing (4px) with compact padding, right side shows custom testing value with increased spacing between the option images and text labels

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

(Default value: 8px)

It affects:

  • Progress bar/stepper vertical padding - The top and bottom padding around the progress indicator showing quiz completion
  • Answer option padding - The internal padding within individual answer option boxes
  • Answer option gap - The spacing between answer options
  • Score content wrapper padding - The padding around the score content area on the results screen
  • Action buttons vertical padding - The top and bottom padding inside the "Play Again" and "Share Result" buttons

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.

Standard template quiz: questions and results screens showing multiple UI elements controlled by xs spacing (default 8px)

Testing with custom xs spacing (larger value) instead of default 8px to clearly demonstrate which UI elements this spacing controls - the arrows indicate the increased top and bottom padding and gaps across different elements

βš™οΈ 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 standard padding and gaps.

It affects:

  • Main content area horizontal padding - The left and right padding of the main content area (for Desktop view)
  • Main content area bottom padding - The padding at the bottom of the main content area
  • Main content area gap - The spacing between major child elements (headline, stopwatch, stepper, question, footer)
  • Question Content Container horizontal padding - The left and right padding inside the card containing questions and answer options
  • Question Content Container top padding - The padding at the top of the question card
  • Question and options gap - The spacing between the question text and answer options
  • Score state: main content area padding - The  padding for the score state main area
  • Score section elements gap - The spacing between elements on the score state screen (between the score and thank you text, between text and buttons)
  • Action buttons gap - The spacing between the "Play Again" and "Share Result" buttons
  • 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.f

Quiz screen comparison - left side shows default md spacing (16px), right side shows larger custom testing value with arrows to show the difference and clearly demonstrate what md controls on the UI

Results screen comparison - left side shows default md spacing (16px), right side shows custom testing value with arrows to show the difference and clearly demonstrate what md controls on the UI

Answers screen comparison - left side shows default md spacing (16px), right side shows custom testing value with arrows to show the difference and demonstrate what md controls on the UI - the internal padding within each answer card container

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

(Default value: 24px)

It affects:

  • Question Content Container bottom padding - The padding at the bottom of the question card
  • Footer gap (Results screen) - The spacing between the "Thank you for participating!" text and the action buttons, and between the buttons and the branding logo

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.

Quiz screen comparison - left side shows default lg spacing (24px), right side shows custom testing value with arrows to show the difference and clearly demonstrate what lg controls on the UI

Results screen comparison - left side shows default lg spacing (24px), right side shows custom testing value with arrows to clearly show the difference and demonstrate what lg controls on the UI

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

(Default value: 40px)

It affects:

  • Start button container gap - The vertical spacing between the headline and the "Start Quiz" button, and between the button and the branding logo on the filter screen (shown before the quiz starts)

How to set it: Set your desired pixel value for the 2xl property in the spacingScale object.

Start screen with default 2xl spacing (40px) - shows the standard spacing between the description, start button, and branding section

Start screen with larger custom 2xl spacing - arrows show the difference and demonstrate what 2xl controls on the UI - the vertical gaps above and below the "Start Quiz" button

 

Further Reading

π“‚ƒπŸ–Š Theme Options Documentation

πŸ“š Widget FAQs

πŸ“š Main Widget Documentation

Updated: