Skip to main content
v1.4
|
Design System Sandbox
View Site Entity & Structure Wireframes →
Component Boundary: MainLayout.vue (Outer Paper Board)
Component Boundary: TopUtilityBar.vue (Theme, Radio, Clock, Sound)
BlizzCon:0d 00h 00m 00s July 2026
Component Boundary: ChronicleHeader.vue (Active: HeaderDesign3)
Camelot Design System
Guild Compendium & UI Architecture

Design System & Styleguide

"From the fiery anvils of Ironforge to the quiet herb gardens of Darnassus, mastery of trade is the true backbone of every champion’s quest."

Page Content Slot (<slot />)

Standardized Header Design Presets

Select from our 5 unified Header Design Presets (HeaderDesign1 through HeaderDesign5) below to preview the header layout live above.

Select Header PresetActive: HeaderDesign3

Complete Reusable Component Directory

Live interactive previews of all commonized UI components used across WoW Forever News routes.

1. DropCapText.vue

Encapsulates initial letter drop-cap formatting & float styling.

or centuries, the royal scribes of Ironforge have recorded the heroic deeds of champions across Azeroth. Every dispatch is written by hand in pure Dwarven Ink.

2. WaxSeal.vue

Burgundy wax seal brand logo with interactive route navigation.

WaxSeal.vue
F
3. ArticleCard.vue

Standardized article preview card with category badges, headlines & medieval dates.

TheorycraftingTheorycrafting

The Dragon's Breath: Classic Plus Alchemy Overhauls Revealed

Senior alchemists in Ironforge disclose brand new transmutations, volatile flame flasks, and rare recipe droplists for the upcoming season.

Read full chronicle →
4. SpotlightCard.vue

Re-usable Classifieds Front-Page Spotlight bulletin sponsor card.

Classified Notice
Spotlight

Grand Tournament of Ironforge — 1v1 PvP Duel Championship

"5,000 Gold Prize Pool! Sign up your champion today at the Great Forge."

View Bulletin → ✦ Weekly Print Edition Featured

Want to be highlighted here? Post on Classifieds Page →

5. ScriptoriumOath.vue

Chronicle "100% Human-Crafted / Dwarven Ink (No AI)" signature oath seal.

F

Our dispatches remain 100% human-crafted and strictly free of commercial spellcraft.

6. SealedSection.vue

Double-dashed notice banner callout box for section announcements.

Classic Plus Trade Overhauls & Crafting Compendiums

Chronicle Inscription Notice

Senior scribes track active Classic Plus profession rebalances, new artisan recipes, custom material drop matrices, and specialization overhauls.

Component Boundary: ChronicleFooter.vue (Mode: Full)