← ARTSABERS

ARTSABERS — Article Mockup 2 · Guides & Tips · Build Brief

BBAS20 Article ARTSABERS

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)

  1. 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
  2. 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
  3. 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