SA Element Registry
Catalog
Admin
+ Add
Edit element
sa-snippet-box
Name (slug)
Version
Category
Heroes & Top-of-Page
Social Proof
Differentiators
Content Blocks
Sidebar
CTA / Footer
Office Anchoring
Status
Live
Beta
Deprecated
Description
AI-friendly summary block at the top of content pages. Light gray surface with one Foundry-orange left rail only, plain prose, 80-120 words. Optimized for Google AI Overviews and LLM citations.
When to use
Top of content pages — between the hero/trust-bar and the first body section.
Source skill
Rules (one per line, leading dash optional)
1. AI-friendly summary block at the top of content pages. 2. Plain prose, no marketing language, 80-120 words. 3. Optimized for Google AI Overviews and LLM citations. 4. Always placed between hero/trust-bar and the first body section. 5. Visual rule: only the 4px Foundry-orange left border is allowed. No navy top, right, or bottom borders.
Live reference URL
Deployment notes
Copy verbatim. Replace bracketed placeholders. Run pre-publish-qa, playwright-visual-qa (desktop 1280 / mobile 390), sa-content-rot-detector, and sa-css-leak-guard after deploy. Log via content-publish-logger and notify search engines via batch-indexnow. See the source skill for full rules. 2026-06-15: documented no three-sided navy border rule for snippet boxes.
HTML
<aside class="sa-snippet"> <p>[2-3 sentence front-loaded answer to the page's core question. Entity-based language - name statutes, agencies, places. Example: “Under KRS 304.39-060, Kentucky drivers carry no-fault PIP coverage that pays the first $10,000 of medical bills regardless of who caused the crash. After PIP exhausts, an injured driver may pursue the at-fault driver's liability carrier for remaining damages.”]</p> </aside>
CSS
.sa-snippet{background:#f7f9fa;border-left:4px solid #D97706;border-radius:6px;padding:22px 26px;margin:24px 0 32px;max-width:820px} .sa-snippet p{font-family:Poppins,sans-serif;font-weight:500;font-size:17px;line-height:1.55;color:#0B212D;margin:0}
Save changes
Cancel