FACEIT BANNER / DOCS
New banner layout
A layout is a combination of a preset, rendering in the widget and styles. The list below covers everything to change so the layout shows up in the generator, the widget and the documentation.
Steps
- widget/src/styles/styles.ts: add the id to the styles list (modernOnly: true) and a preset to broadcastPresets with width and height. Flags: animated (ANIM badge), versus (VERSUS mode), square (always 1:1).
- src/settings/definition.ts: add <id>Accent and, if the layout has a level glow, <id>LevelGlow and <id>LevelGlowStrength. Add any extra layout options the same way.
- widget/src/widget/Widget.tsx: add a render branch (renderSoloExtra, renderVersus or your own) and add the id to lists such as isSoloExtra.
- Styles: a new .less file or a section with the selector .wrapper.banner-design-2026[data-layout='id'], the theme .id-theme:extend(.normal-theme all) and the import in Widget.tsx.
- src/translations/*.json: the keys style.<id> and style.<id>.description in all three languages.
- src/components/PresetThumb.tsx: add the thumbnail drawing to the DRAWINGS object.
- src/components/PresetSettings.tsx: add the layout to the exceptions list if it has no "Rank place" option.
- pnpm docs: the documentation derives layouts, sizes and limits from the presets.
Rules worth knowing
- VERSUS mode works only with the 2026 look and the versus flag filters the VERSUS layouts.
- The preset size is the Recommended size and the limits come from the 0.4 and 2.5 multipliers (banner_size.ts).
- Animations should respect prefers-reduced-motion.
- Elements with a glow need overflow: visible, otherwise the glow gets clipped.
Updated: