{ "code": "S106", "name": "Expandable gallery", "shape": "expandable-gallery", "family": "Evidence and pictures", "fits": "Three overlapping square images above a centred collection headline and one action; expanding reveals a three-column image grid.", "use_when": "A compact teaser needs an explicit route to its complete photo collection, with a reversible return to the teaser.", "slots": [ { "name": "pictures", "holds": "cleared images with meaningful alt text and verified captions", "budget": "6 sample items; supply an actual collection count" }, { "name": "headline", "holds": "one verified collection description", "budget": "under 14 words" } ], "columns": 3, "density": "standard", "surface": "paper", "works_on": [ "page", "deck" ], "library": "useLayouts", "dir": "S106-expandable-gallery", "semantic": { "audience_question": "What collection is previewed here, and what else can I inspect?", "intent": "Connect a small overlapping preview to the complete finite gallery.", "reasoning_relation": "collection preview and disclosure", "message_pattern": "[Collection] includes [items]; open it to inspect [remaining content].", "required_content": [ "Six cleared sample members of one coherent collection, with meaningful alternative text and needed identification.", "Explains what the collection shows and why it belongs here." ], "narrative_positions": [ "evidence", "reference" ], "requires_before": [ "Establish why the audience may want to explore these views." ], "enables_after": [ "Develop one image’s implication or return to the main argument." ], "slot_roles": { "pictures": "Six cleared sample members of one coherent collection, with meaningful alternative text and needed identification.", "headline": "Explains what the collection shows and why it belongs here." }, "avoid_when": [ "Essential comparative evidence hidden until expansion.", "A dynamic collection with an incorrect hard-coded count." ], "layout_specific_contract": "Three overlapping square images above a centred collection headline and one action; expanding reveals a three-column image grid.", "provenance": { "basis": "interpretation of the existing layout and slot contracts", "review": "Tessel model-authored guidance; implementation approved by Nic, 2026-10-10", "corpus_evidence_status": "not yet established", "guide": "../SEMANTICS.md" }, "reader_outcome": "Connect a small overlapping preview to the complete finite gallery.", "matching": { "audience_question": "What collection is previewed here, and what else can I inspect?", "reader_outcome": "Connect a small overlapping preview to the complete finite gallery.", "reasoning_relation": "collection preview and disclosure", "content_shape": { "composition": "Three overlapping square images above a centred collection headline and one action; expanding reveals a three-column image grid.", "selected_state": "Three overlapping square images above a centred collection headline and one action; expanding reveals a three-column image grid.", "density": "standard", "columns": 3, "column_note": "Base metadata only; selected option can replace the base geometry." }, "required_slots": [ { "name": "pictures", "reader_question": "What subject, example or view must I inspect, and is it evidence or illustration?", "semantic_role": "Six cleared sample members of one coherent collection, with meaningful alternative text and needed identification.", "content_unit_count": { "min": 6, "max": 6, "basis": "authored composition members where a repeated group is specified; otherwise one named slot; not a required amount of evidence" }, "placeholder": "[CLEARED IMAGE OR LABELLED ILLUSTRATION · pictures · cleared images with meaningful alt text and verified captions]", "layout_budget": { "authored": "6 sample items; supply an actual collection count", "policy": "Working composition guidance: preserve scope and qualification; change layout rather than truncate the argument." }, "markup": { "slot": "pictures", "occurrences": 6, "annotation_status": "present", "visibility_status": "not asserted from static parsing", "sample_word_counts": [ 0, 0, 0, 0, 0, 0 ] }, "integrity": "Clear rights and provenance, retain meaningful alt text; generated scenes illustrate and cannot prove a historical event." }, { "name": "headline", "reader_question": "What collection is previewed here, and what else can I inspect?", "semantic_role": "Explains what the collection shows and why it belongs here.", "content_unit_count": { "min": 1, "max": 1, "basis": "authored composition members where a repeated group is specified; otherwise one named slot; not a required amount of evidence" }, "placeholder": "[REAL CONTENT · headline · one verified collection description]", "layout_budget": { "authored": "under 14 words", "policy": "Working composition guidance: preserve scope and qualification; change layout rather than truncate the argument." }, "markup": { "slot": "headline", "occurrences": 1, "annotation_status": "present", "visibility_status": "not asserted from static parsing", "sample_word_counts": [ 3 ] } } ], "rejection_constraints": [ "A count that differs from the supplied collection or expansion that conceals captions from static readers.", "A reveal that hides essential meaning or a preview that misrepresents the collection." ], "option_guidance": { "option": "default", "composition_delta": "Three overlapping square images above a centred collection headline and one action; expanding reveals a three-column image grid.", "semantic_change": "retains base content relationship; changes presentation or disclosure", "matching_instruction": "Select S106 default when the supplied material answers “What collection is previewed here, and what else can I inspect?” through collection preview and disclosure. Respect this state: Three overlapping square images above a centred collection headline and one action; expanding reveals a three-column image grid." }, "provenance": { "status": "inferred composition evidence", "author_intent": "not independently confirmed", "basis": [ "retained source composition where available", "authored layout and slot contracts", "static implementation inspection" ], "source_visual_count": 1, "source_visual_sha256": [ "4234fa08e4a4d4d7d9c1410e28cad2e4325007c1f9c25dfdf55f55a07aafec31" ], "source_export": "private source images remain outside this draft site", "markup_sha256": "526a5d36fcf1c969e35607136c5f328cd4c038569b4523e2928e5f5d4d05c71e", "limits": [ "Static parsing inventories authored nodes; it does not certify rendered visibility, responsive fit or interactive state.", "Budgets are authored layout guidance, not a content-writing limit or proof of fit.", "Matching guidance is a draft inference; it does not establish facts, endorsement, causation or source author intent." ] }, "adaptation_rules": [ "Choose by audience question, reasoning relation and required content before aesthetic preference.", "Supply every required semantic role; retain visible unknowns as labelled real-content placeholders.", "A number needs source, scope and units; a quotation needs faithful wording and attribution.", "Do not infer importance from area, colour, depth or movement unless the content explicitly defines that encoding.", "Keep colour token roles, structural objects, licences and source records; changing content does not authorize changing them." ] }, "rejection_constraints": [ "A count that differs from the supplied collection or expansion that conceals captions from static readers.", "A reveal that hides essential meaning or a preview that misrepresents the collection." ], "markup_inventory": { "file": "spread.html", "sha256": "526a5d36fcf1c969e35607136c5f328cd4c038569b4523e2928e5f5d4d05c71e", "method": "static lxml markup plus authored option description; no rendered-visibility claim", "all_markup_slot_counts": { "pictures": 6, "headline": 1 }, "slot_evidence": { "pictures": [ { "tag": "figure", "classes": "cat-photo", "sample_word_count": 0, "repeated_children": 1 }, { "tag": "figure", "classes": "cat-photo", "sample_word_count": 0, "repeated_children": 1 }, { "tag": "figure", "classes": "cat-photo", "sample_word_count": 0, "repeated_children": 1 }, { "tag": "figure", "classes": "cat-photo", "sample_word_count": 0, "repeated_children": 1 }, { "tag": "figure", "classes": "cat-photo", "sample_word_count": 0, "repeated_children": 1 }, { "tag": "figure", "classes": "cat-photo", "sample_word_count": 0, "repeated_children": 1 } ], "headline": [ { "tag": "h2", "classes": "cat-head", "sample_word_count": 3, "repeated_children": 0 } ] }, "option_selectors": [], "linked_implementation": [ { "file": "../spreads.css", "sha256": "32da94472b0c9131e4d5dae7d5bf0498b09202a9e66294b4e4f23e6ddfbf37ba" }, { "file": "../catalogue-options.css", "sha256": "d4ac2c72a1ba61f50fc52dbacff24130de014f42f1dc2df5fd841bea7a34e2db" }, { "file": "../spread.js", "sha256": "3d99948b83f750bd4ae95dac08e3e50a395de7c149c90a6f1a1c0ea36a2634a4" }, { "file": "../catalogue-options.js", "sha256": "ca693515383ba7cdf6d9937beada03614150786a4ca850ca800282ed4732d991" } ] }, "variations": {}, "narrative_profile": { "central_point": "A compact image preview promises a defined collection that the reader can expand and inspect.", "communication_job": "Introduce a coherent collection without showing all its members at full size immediately.", "audience_value": "Offers orientation and optional exploration. It answers “What collection is this, and what else is inside?”; the preview must not hide the qualification needed for the main argument.", "reading_path": [ "Inspect the overlapping image preview.", "Read the headline for the collection’s unifying theme.", "Expand to see all six supplied images; the action count must match the real collection." ], "adaptation": { "required_inputs": [ "Six cleared sample members of one coherent collection, with meaningful alternative text and needed identification.", "Explains what the collection shows and why it belongs here." ], "slot_guidance": { "pictures": "Six cleared sample members of one coherent collection, with meaningful alternative text and needed identification.", "headline": "Explains what the collection shows and why it belongs here." }, "can_change": [ "Replace the fictional subject and its supported content while retaining the roles and relationship described here." ], "must_survive": [ "The action count must match the actual images.", "Make complete content available without motion or script.", "Use captions or surrounding text when image identity cannot be carried by alt text alone." ] }, "worked_example": { "fictional": true, "scenario": "Fictional Cedar presents a six-image collection about workshop preparation and delivery.", "slot_fills": { "pictures": [ "Fictional image: intake desk and sign.", "Fictional image: labelled tools.", "Fictional image: volunteer safety briefing.", "Fictional image: supervised practice.", "Fictional image: referral sheet.", "Fictional image: end-of-session review." ], "headline": "Six views of the preparation behind Cedar’s workshop" }, "reasoning": "The stack previews breadth, while expansion reveals the full set. The headline supplies the shared subject that six arbitrary pictures would lack.", "qualification": "Fictional teaching example. Replace invented details with authorised content and keep any source, scope, status or uncertainty that affects interpretation." }, "narrative_fit": { "before": "Establish why the audience may want to explore these views.", "after": "Develop one image’s implication or return to the main argument.", "good_uses": [ "A finite visual collection in an article.", "A portfolio preview." ], "poor_fits": [ "Essential comparative evidence hidden until expansion.", "A dynamic collection with an incorrect hard-coded count." ] }, "evidence": { "observations": [ "Viewed source: three overlapping image previews sit above a headline and a See all action.", "Current HTML contains six images and a See all 6 button; it exposes the collection locally." ], "interpretations": [ "A compact image preview promises a defined collection that the reader can expand and inspect. This is an interpretation of the inspected composition, not a verified claim of author intent." ], "not_verified": [ "Original author intent, historical claims, persuasion and archive-wide frequency have not been independently verified." ], "references": [ "02_product/spreads/S106-expandable-gallery/source.webp", "02_product/spreads-semantics-2026-10-13/dist/S106-expandable-gallery/spread.html", "02_product/spreads-semantics-2026-10-13/dist/S106-expandable-gallery/spread.json", "https://uselayouts.com/docs/components/expandable-gallery" ] }, "review": { "status": "reviewed", "basis": "Viewed the retained base source capture and inspected current HTML and matching slots; reviewed the fictional adaptation at layout-contract level." }, "variation_relationship": "base" } }, "behaviour": { "script": "../catalogue-options.js", "record": "../catalogue-review.json", "reduced_motion": "Complete static collection", "no_script": "Complete static collection" }, "options": [], "also_seen_in": [], "source": { "ref": "useLayouts Expandable Gallery", "url": "https://uselayouts.com/docs/components/expandable-gallery" } }