focus-list

Source

framework/brand/nerdworks/scss/blocks/_preorder-showcase.scss (production class .preorder-showcase)
framework/theme/saberco/scss/blocks/_product-showcase.scss (production class .product-showcase)
framework/theme/paratura_gaming/scss/blocks/_preorder-showcase.scss

Block class name .focus-list Edit in wp-admin

Example markup

Class-name normaliser

Plan #322 substrate. class_root + class_aliases feed the S2 audit CLI + S3 normaliser. Kind drives downstream branching.

Class root Kind Composition role

✓ Pick both kind + composition role to validate alignment.

BEM elements (canonical)

Operator-locked. S3 normaliser rewrites drift like __heading → __title.

BEM modifiers (canonical)

Operator-locked.

Class aliases (drift catcher) Edit in wp-admin

Past-drift class roots this entry absorbs. S2 audit populates automatically; use wp-admin to review provenance + tune manually. The wp-admin metabox exposes the full mockup relationship UI + date picker + occurrence count.

No aliases recorded yet.

Prompt

Operator-authored guidance for the camcom-design skill — when to use this block, composition rules, brand-variation notes. Saves on blur.

The focal-plus-list marketing block. One large focal item beside a vertical list of related items. Used for pre-order announcements, product showcases, category spotlights — anywhere one item leads and others support it.

Collapsed from two production classes (`.preorder-showcase` and `.product-showcase`) that had the same structural shape with different content. The canonical name `focus-list` describes the structure — one focal thing plus a supporting list — independent of what kind of content fills it.

The `__drawer` template-area is declared in the grid but unused in production. Brand themes can opt in by emitting markup at the `__drawer` slot for a tertiary content row beneath the list.

## Production example

Focus-list on a homepage as a "new this week" promo (canonical form):

```html
<section class="section section--off-white">
    <div>

<h3 class="focus-list__focus__title title title__secondary">Adventures in the Forgotten Realms</h3>

<p>Pre-order the booster box — releases 23 July. Allocations capped at six per customer.</p>

<a href="/product/aftr-booster-box/" class="button button--primary">Pre-order</a>

</div>

<li class="focus-list__list__item">
                    <a href="/product/aftr-bundle/">
                        <strong>AFTR Bundle</strong><br>
                        <span>Box-topper + 10 packs + spindown</span>
                    </a>
                </li>

<li class="focus-list__list__item">
                    <a href="/product/aftr-collector-booster/">
                        <strong>AFTR Collector Booster Box</strong><br>
                        <span>12 packs of 15 collector cards</span>
                    </a>
                </li>

<li class="focus-list__list__item">
                    <a href="/product/aftr-commander-deck-dungeons/">
                        <strong>AFTR Commander Deck — Dungeons of Death</strong><br>
                        <span>100-card pre-constructed</span>
                    </a>
                </li>

</ul>

</div>

</div>
</section>
```

Legacy fields (tier, composition role, layout pattern, repeaters)

Pre-MC-plan-#64 schema. Data preserved here for reference. Collapsed into example markup + prompt opportunistically as we walk sections.

Composition role Layout pattern

Purpose Composes with

Elements observed

Modifiers observed

States

Non-canonical elements

Notes

**Renamed and collapsed from production classes `.preorder-showcase` (nerdworks) and `.product-showcase` (saberco)** during the Tier E walk. Both have the same structural shape — 5-col grid, 2-col focus + 3-col list, with item separators inside the list. The inventory's Q3 resolution explicitly collapsed them under structural identity, naming the canonical form `focus-list` (which describes the shape — one focal thing plus a supporting list).
The `__drawer` template-area is declared in the grid but never populated in the source SCSS — reserved for a tertiary content slot below the list (e.g. "see all" CTA, related-category callout). Brand themes opt in by emitting markup at the `__drawer` slot.
The `__focus` has a 4px right border separating it from the list (becomes a bottom border below 768px when the layout stacks).
List items have 2px top-border separators (`__item + __item`) — list items read as a sequence rather than a grid.
Promoted to Tier E because the same structural pattern recurs across two brands with different content kinds (pre-order announcement vs product showcase) — that's evidence the structure generalises beyond the specific content type.

Source

Class-name normaliser

Prompt

AI-Assist