ARTSABERS — Article Mockup 2 · Long-form Guides & Tips · Build Brief
Purpose
Full-page article mockup of an ARTSABERS blog post in Long-form mode, Guides & Tips flavour. Tests the flexible article template at mid-density long-form editorial with structured how-to patterns (callout, image pair, numbered list) but on a compact hero (not full-bleed).
Consumes:
- BBAS18 (Editorial Content Spec) — pattern library. Follow verbatim.
- SAS1 v4.2.1 (Kyber Hull styleguide).
- PB + DB — brand voice + audit context.
The article
- Title: Forged in Fire and Beskar: Why You Need Both a Saber and a Helmet
- Category chip: Lightsaber Guides & Tips
- Byline: Chloe · 12 Jun 2026 · 8 min read
- Subtitle: The blade tells one side of the story. The helmet tells the other. Here’s why the pair is more than the sum of its parts.
- Hero variant: compact panel-joint background, ~460px (taller than announcement to accommodate longer title + subtitle line). Byline appears IN hero.
- Body density: Long-form mode. ~1,400 words. Single-column, max-width 68ch.
- Content patterns used (writer opted in per BBAS18):
- Drop-cap on opening paragraph (Gutenberg
dropCap attribute — ember, 5 lines tall)
- Section breaks with ember hairline every ~350 words
- Four H2 section headings: The blade alone · The helmet alone · Why the pair works · Three pairings we love
- One KEY TAKEAWAY callout box mid-body (roughly between "The helmet alone" and "Why the pair works"). Callout body verbatim: "A helmet turns a saber from a solo prop into a costume. Costume-ready shifts your collection from displayable to wearable."
- One inline image pair at ~60% scroll depth (
core/columns with 2× core/image). See imagery below.
- Numbered list under "Three pairings we love" (three items — writer picks the pairings, drawn from real ARTSABERS + real helmet catalogue)
- Terminal sign-off: "May the force be with you both."
- Article footer:
- Ember hairline separator
- Tag chip row (4-5 tags:
Buying Guide, Helmets, Costume, Blade Types, Beginner)
- Share row (X · Facebook · Reddit · Copy link)
- Related-articles 3-up card
Real imagery
- Inline image pair at ~60% scroll — a saber + a helmet, real ARTSABERS product photography, side-by-side (
core/columns layout, stacks on mobile):
- Left:
https://artsabers.com/wp-content/uploads/sites/10/2025/03/Apprentice-Black-Duelling-Lightsaber-RGB-X-600x600.jpg — caption: "An Apprentice duelling saber — the neutral starting hilt."
- Right:
https://artsabers.com/wp-content/uploads/sites/10/2025/03/Mandalorian-Helmet-600x600.jpg — caption: "A Mandalorian helmet — the character-lock counterpart."
Related-articles 3-up (specific cards)
- Order Delay Update: Production & Fulfilment Status — ARTSABERS News — 3 min read — image
https://artsabers.com/wp-content/uploads/sites/10/2025/03/Starkiller-V3-Lightsaber-Xenopixel-V3-600x600.jpg
- Claim the Blade. Wear the Mask. Live the Myth. — Lore & Short Stories — 12 min read — image
https://artsabers.com/wp-content/uploads/sites/10/2025/03/Carbon_Strike_1-600x600.jpg
- Choosing Your Saber Core: Xenopixel v3 vs Proffie 2.2 vs Neopixel — Lightsaber Guides & Tips — 6 min read — image
https://artsabers.com/wp-content/uploads/sites/10/2025/03/Darth-Vader-ROTJ-Lightsaber-600x600.jpg
Site chrome
Same site nav + footer as Article 1 (identical wrapper across all article mockups).
Body copy
Written to the shape above — ~1,400 words in the ARTSABERS Chloe voice. Educational + warm + confident, not preachy. Covers: what a saber alone gives you (display, the physical prop, the moment of ignition), what a helmet alone gives you (silhouette, character-lock, identity), why the pair works (transformation from "prop owner" to "in-character"), three practical pairings (drawn from real ARTSABERS catalogue combinations — e.g. Anakin ROTS + Anakin helmet, Kylo Ren + Kylo mask, Ahsoka duelling + Ahsoka montrals). Terminal sign-off italic.
Kyber Hull styling notes
Per SAS1 + BBAS18. Ember on: drop-cap, category chip hairline, section-break hairlines, hero eyebrow, callout box ember border + eyebrow, list-number markers, related-articles hairlines, tag chip hairlines. Callout uses KEY TAKEAWAY variant (ember hairline + ember eyebrow chip + ember icon).
What this mockup deliberately does NOT include
- No full-bleed hero (compact only — full-bleed reserved for Lore mode)
- No large pull-quote (long-form Guides use callouts, not pull-quotes — pull-quotes carry narrative weight; callouts carry structural weight)
- No comment section
- No author profile card
- No sidebar
- No inline product cross-sell / CTA to the linked pairings (this is editorial, not commerce)
Success criteria
At full-page scale:
- Compact hero at ~460px reads with authority for the longer title/subtitle without demanding a full-bleed
- Body max-width 68ch holds through 1,400 words without visual fatigue
- Drop-cap opener works cleanly with the actual opening paragraph
- Callout box breaks up the flow at the intended point (~40% scroll) without feeling like an interruption
- Image pair at ~60% scroll gives visual relief and shows the article’s central claim (saber + helmet = the pair)
- Numbered list under "Three pairings" reads clearly with ember number markers
- Article footer (tag + share + related-3-up) is the natural close
- Page total ~4,500-5,500px rendered