SA Element Registry
Catalog
Admin
+ Add
Edit element
sa-claim-number-statement-set
Name (slug)
Version
Category
Heroes & Top-of-Page
Social Proof
Differentiators
Content Blocks
Sidebar
CTA / Footer
Office Anchoring
Status
Live
Beta
Deprecated
Description
Claim Number Statement mockup set corrected to use the actual website-library boardroom/silhouette assets from Sam's screenshot, not substitute truck/headshot images. Preserves the visible variants: Corporate Reps - Right-Aligned Dark Panel, Boardroom Symmetry - Cinematic Centered, and Silhouette Standoff - Bottom Band.
When to use
Use as a mid-page adversary/trust statement where the page needs to contrast insurance-company treatment with the firm's client-first position. These are image-background statement cards, not truck heroes, attorney cards, or generic CTA assets.
Source skill
Rules (one per line, leading dash optional)
1. Do not substitute unrelated images. This element uses the website-library boardroom/silhouette assets that match Sam's screenshot. 2. Corporate Reps uses Boardroom.webp. Boardroom Symmetry and Silhouette Standoff use Boardroom-2.webp with different overlay/crop treatments. 3. Copy is locked: "To insurance companies, you're just a claim number. To us, you're a future success story." 4. In these screenshot variants, both "a claim number" and "future success story" are highlighted in Foundry orange #D97706. 5. Keep overlays dark enough for white Poppins text to read clearly. 6. Keep orange as text/accent only. No orange background fill. 7. Keep the variant labels in the registry row so future agents can map screenshots to the exact design option.
Live reference URL
Deployment notes
Corrected 2026-06-15 after Sam flagged the prior row for using agent-selected substitute images. The row now uses only Boardroom.webp and Boardroom-2.webp from the WordPress media library, with local copies saved under Downloads\Website Image Library. Verified through Playwright request API; browser screenshot pass attempted separately because Render detail navigation was slow.
HTML
<section class="sa-cn-mockups" aria-label="Claim number statement mockups"> <article class="sa-cn-option"> <p class="sa-cn-option__kind">Image Background</p> <h3>Corporate Reps - Right-Aligned Dark Panel</h3> <p class="sa-cn-option__note">Silhouetted reps against bright windows; centered statement.</p> <div class="sa-cn-card sa-cn-card--corporate"> <p>To insurance companies, you're<br>just <strong>a claim number</strong>.</p> <p>To us, you're a<br><strong>future success story</strong></p> </div> </article> <article class="sa-cn-option"> <p class="sa-cn-option__kind">Image Background</p> <h3>Boardroom Symmetry - Cinematic Centered</h3> <p class="sa-cn-option__note">Symmetrical silhouettes facing a lone figure; centered statement.</p> <div class="sa-cn-card sa-cn-card--symmetry"> <p>To insurance companies, you're<br>just <strong>a claim number</strong>.</p> <p>To us, you're a<br><strong>future success story</strong></p> </div> </article> <article class="sa-cn-option"> <p class="sa-cn-option__kind">Image Background</p> <h3>Silhouette Standoff - Bottom Band</h3> <p class="sa-cn-option__note">High-contrast B/W standoff; centered statement, uniform overlay.</p> <div class="sa-cn-card sa-cn-card--standoff"> <p>To insurance companies, you're<br>just <strong>a claim number</strong></p> <p>To us, you're a<br><strong>future success story</strong></p> </div> </article> </section>
CSS
.sa-cn-mockups{display:grid;gap:28px;font-family:Poppins,system-ui,sans-serif;color:#0B212D;background:#eef3f6;padding:24px;}.sa-cn-option{margin:0;}.sa-cn-option__kind{margin:0 0 4px;color:#D97706!important;font-size:10px;font-weight:900;text-transform:uppercase;letter-spacing:.14em;}.sa-cn-option h3{margin:0;color:#0B212D!important;font-size:14px;line-height:1.2;font-weight:900;}.sa-cn-option__note{margin:3px 0 10px;color:#344955!important;font-size:11px;font-weight:600;}.sa-cn-card{position:relative;min-height:260px;border-radius:7px;overflow:hidden;display:flex;flex-direction:column;justify-content:center;align-items:center;text-align:center;padding:36px 24px;background-size:cover;background-position:center;box-shadow:0 12px 26px rgba(11,33,45,.22);}.sa-cn-card p{margin:0;color:#fff!important;font-size:clamp(18px,3vw,30px);line-height:1.22;font-weight:900;text-transform:uppercase;letter-spacing:.01em;text-shadow:0 2px 12px rgba(0,0,0,.68);}.sa-cn-card p+p{margin-top:18px;}.sa-cn-card strong{color:#D97706!important;font-weight:900;}.sa-cn-card--corporate{background-image:linear-gradient(rgba(0,0,0,.42),rgba(0,0,0,.64)),url('https://aguiarinjurylawyers.com/wp-content/uploads/2026/02/Boardroom.webp');background-position:center center;}.sa-cn-card--symmetry{background-image:linear-gradient(rgba(0,0,0,.38),rgba(0,0,0,.72)),url('https://aguiarinjurylawyers.com/wp-content/uploads/2026/02/Boardroom-2.webp');background-position:center center;}.sa-cn-card--standoff{background-image:linear-gradient(rgba(0,0,0,.52),rgba(0,0,0,.82)),url('https://aguiarinjurylawyers.com/wp-content/uploads/2026/02/Boardroom-2.webp');background-position:center 54%;filter:grayscale(1);}@media(max-width:640px){.sa-cn-mockups{padding:18px}.sa-cn-card{min-height:210px;padding:28px 18px}.sa-cn-card p{font-size:clamp(16px,5vw,22px)}}
Save changes
Cancel