Guides

Rules Display

Game components support an optional rulesDisplay prop that renders an info icon (ⓘ) next to the component headline. Clicking the icon either opens a modal with the entity's rules, or navigates to an external rules page — depending on configuration.

RulesDisplay

type RulesDisplayType = "modal" | "link";

interface RulesDisplay {
  type: RulesDisplayType;
  url?: string;                       // required when type is "link"
  target?: LinkTargetType;            // optional, defaults to "_blank"
  component?: React.ReactElement;     // optional custom modal content
}

Display types

Modal (default)

const rulesDisplay: RulesDisplay = { type: "modal" };

Opens a centered modal showing the entity's rules field (configured in the Fans United backend). Supports HTML content rendering. Closable via the close button, Escape key, or clicking outside.

Modal with custom content

const rulesDisplay: RulesDisplay = {
  type: "modal",
  component: <CustomRulesContent />,
};

Renders your own React element inside the modal frame instead of the backend rules text.

Link

const rulesDisplay: RulesDisplay = {
  type: "link",
  url: "https://your-site.com/quiz-rules",
  target: "_blank",
};

Clicking the info icon navigates to url. Useful for long-form rules pages hosted elsewhere.

Behavior

  • The info icon appears in the headline area across all component states — main view, sign-in screen, error screen, score screen, lead-collection screen.
  • Theme-aware: the icon color adapts to the current mode and template variant.
  • Keyboard accessible and screen-reader friendly.
  • The icon is only rendered when rulesDisplay is provided.

Example

import { RulesDisplay } from "fansunited-frontend-core";

const rulesDisplay: RulesDisplay = { type: "modal" };

<ClassicQuizPlay {...otherProps} rulesDisplay={rulesDisplay} />

Supported components

ClassicQuizPlay, PollVote, PersonalityQuizPlay, MatchQuizPlay, EventGamePlay, EitherOrPlay. Predictor has its own built-in Rules tab — see its page.