Element Catalog

sa-cva-blog-hero v2026-06-13

Split-card blog hero for aguiarinjurylawyers.com. Image-left / centered navy copy-right layout for blog posts and editorial pages. Full-bleed dark navy (#0B212D) section, left column is a cover-image cell with a subtle navy gradient overlay, right column is a centered copy column: large Poppins-700 H1 with one Foundry-orange (#D97706) accent span, a 500-weight subline span, and a single orange CALL NOW pill button. NO eyebrow, NO trust strip, NO form, NO results ticker in the hero. Forms live in the sidebar (Option B), not the hero.

When: Top-of-page hero on blog posts and editorial/news pages that need a clean, focused, single-action header with a strong c…

Source: sa-cva-split-hero (closest packaged sibling); blog-hero variant first shipped on the UPS Flight 2976 NTSB post 2026-06-06

sa-cva-split-hero v2026-06-13

Split-card hero: image left / navy copy CENTERED right. H1 = Poppins 700 with one orange accent word, plus a UVP or educational subline. Single CALL NOW button. No eyebrow, no trust strip.

When: DEFAULT hero for practice-area pages (Sam directive 2026-06-11). Top of a practice-area, location, or landing page when …

Source: sa-cva-split-hero

sa-hero-form v2026-06-06

Generic, fully-templated form-rail hero. Companion to sa-split-results-hero with the rotating-results panel swapped for the SAIL standard dark translucent intake-form card. All copy, image, and form endpoint are placeholders for reuse on any page.

When: Any page that needs a reusable form-capture hero. This is the base template for the city-specific form-rail variants.

Source:

sa-hero-form-crash v2026-06-09

Crash-scene background variant of sa-hero-form. Same form-rail hero layout and scoped CSS, but the hero background is the shattered-glass car-accident photo instead of the family-at-park image. Use when a page wants the form-capture hero with a crash-scene visual rather than a recovery/lifestyle image.

When: Form-capture hero on car-accident pages that want a crash-scene background. Pairs with the standard intake form. Pick th…

Source:

sa-hero-lexair v2026-06-06

Lexington Aerial Skyline hero, rotating-results variant. Full-bleed split hero with copy + GET STARTED CTA left and a Life-Changing Results rotating card right, over the aerial Lexington skyline image. Alternate hero for the Lexington location page.

When: Alternate top-of-page hero for /locations/lexington/ when you want social-proof results instead of an in-hero form.

Source:

sa-hero-lexdt v2026-06-08

Lexington Downtown (Main Street) hero, form-rail variant. Full-bleed split hero with copy left and a translucent dark intake form card on the right, over the downtown Lexington street-scene image.

When: Top of /locations/lexington/ or /car-accident-attorneys-in-lexington/ when you want lead capture in the hero itself.

Source:

sa-hero-loc-corbin v2026-06-06

Corbin location hero, form-rail variant with the city image pre-wired to the live Media Library URL. Optional upgrade hero (not a replacement) for the standard location-page template hero.

When: Top of /locations/corbin/ as an optional upgrade over the standard location hero.

Source:

sa-hero-loc-pikeville v2026-06-06

Pikeville location hero, form-rail variant with the city image pre-wired to the live Media Library URL. Optional upgrade hero (not a replacement) for the standard location-page template hero.

When: Top of /locations/pikeville/ as an optional upgrade over the standard location hero.

Source:

sa-hero-trucksun v2026-06-06

Truck Accident Sunset Highway hero, rotating-results variant. Full-bleed split hero with copy + GET STARTED CTA left and a Life-Changing Results rotating card right, over a semi-truck-at-sunset image. H1 leads with the Bigger Share Guarantee.

When: Top of /practice-areas/truck-accidents/ when you want a results-forward hero tied to trucking cases.

Source:

sa-location-form-hero v2026-06-06

Landscape form-rail hero for /locations/* pages: full-bleed photo-backed hero with a left-to-right navy gradient, a centered H1 (uppercase orange question line plus a smaller white UVP subline) in the wide left copy column, and a compact intake form built into a narrow right rail. As of June 2026 forms are allowed and expected on location pages.

When: Top-of-page hero on any /locations/* page that needs the intake form built directly into the hero.

Source: sa-location-form-hero

sa-mobile-truck-page-composition-notes v2026-06-15

Mobile truck-page composition reference from Sam screenshot. Documents the exact mobile stack: navy mobile header with logo, centered phone number and hamburger; full-width truck crash image; dark navy centered H1 panel; white body copy; compliant Call Now pill; closed On This Page dropdown; then a white body/snippet block with orange left rail.

When: Use as implementation notes when rebuilding or QAing mobile practice-area pages, especially truck accident pages. This i…

Source: mobile-page-composition; source screenshot from current Codex thread; added via registry screenshot intake 2026-06-15

sa-nursing-home-hybrid-intake v2026-06-15

Rendered live nursing-home hybrid hero intake form contract. Added because it uses both homepage and custom intake classes and passed live QA.

When: Hero or specialty landing-page form placements that intentionally combine homepage-style and custom-intake behavior.

Source: wp-form-deploy-qa

sa-results-hero v2026-06-04

Centered H1-only hero for aguiarinjurylawyers.com. Full-bleed Visible Depth navy-to-black gradient, a single centered Georgia/Times New Roman H1 with an italic-orange emphasis line, and a soft orange radial glow. NO eyebrow, NO subheadline, NO stat row, NO CTA button inside the hero. Use as the top-of-page hero on the Case Results page and any page that wants a clean, statement-style headline moment instead of the standard split-card hero. Triggers on 'results hero,' 'centered hero,' 'H1-only hero,' 'sa-results-hero,' 'statement hero,' 'Real Clients Real Results hero,' or any request for a minimal centered headline hero. Distinct from sa-cva-split-hero (image-left/copy-right) and the standard interior hero (eyebrow + subhead + trust strip) — pick one per page.

When: Top-of-page hero when a page wants a clean, statement-style centered headline moment instead of the standard split-card …

Source: sa-results-hero

sa-snippet-box v2026-06-15

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: Top of content pages — between the hero/trust-bar and the first body section.

Source: sa-template-reference

sa-split-results-hero v2026-06-04

Louisville split-results hero — the base parent pattern for the split hero family. Full-bleed split hero: copy + Call Now CTA left, rotating Life-Changing Results card right, over the Louisville skyline. Includes prefers-reduced-motion support and a mobile rollout rule that hides the legacy mobile card hero.

When: Top of the Louisville homepage / main Louisville pages. Parent pattern that the form-rail and results-rail city variants…

Source:

sa-toc v2026-06-05

Dropdown 'On This Page' table-of-contents using the live .sa-toc-wrap design. ALWAYS starts closed on every viewport (desktop and mobile) — the <details> element must never carry the open attribute. Never use the deprecated static .sa-toc-wrapper variant.

When: Long content pages (1500+ words) with five or more h2 sections.

Source: toc-design

sa6-hero-bicycle-accident v2026-06-09

Split-card v7 form hero for the Bicycle page. Uses a dark navy hero shell, centered H1/image column, and white right-side intake card with no email field and one GET STARTED action.

When: Use on /practice-areas/bicycle-accident/ when that page needs the v7 split-card hero with the intake form visible above …

Source: hero-mockups-v7

sa6-hero-delivery-vehicle v2026-06-09

Split-card v7 form hero for the Delivery Vehicle page. Uses a dark navy hero shell, centered H1/image column, and white right-side intake card with no email field and one GET STARTED action.

When: Use on /delivery-vehicle-network-driving-accidents/ when that page needs the v7 split-card hero with the intake form vis…

Source: hero-mockups-v7

sa6-hero-pedestrian-accident v2026-06-09

Split-card v7 form hero for the Pedestrian page. Uses a dark navy hero shell, centered H1/image column, and white right-side intake card with no email field and one GET STARTED action.

When: Use on /practice-areas/pedestrian-accident/ when that page needs the v7 split-card hero with the intake form visible abo…

Source: hero-mockups-v7

sa6-hero-truck-accident v2026-06-09

Split-card v7 form hero for the Truck Accident page. Uses a dark navy hero shell, centered H1/image column, and white right-side intake card with no email field and one GET STARTED action.

When: Use on /practice-areas/truck-accident/ when that page needs the v7 split-card hero with the intake form visible above th…

Source: hero-mockups-v7

sa6-hero-wrongful-death v2026-06-09

Split-card v7 form hero for the Wrongful Death page. Uses a dark navy hero shell, centered H1/image column, and white right-side intake card with no email field and one GET STARTED action.

When: Use on /practice-areas/wrongful-death/ when that page needs the v7 split-card hero with the intake form visible above th…

Source: hero-mockups-v7

sa-as-featured-in v2026-05-25

Horizontal strip of full-color press logos (NYT, CNN, Time, Rolling Stone, Washington Post, NPR, Hulu, etc.). Header "As Featured In."

When: Once per page, LOW on the page, before the final CTA banner.

Source: sa-as-featured-in

sa-client-culture-video-band v2026-06-16

Client Culture / Community two-column video band. Dark Visible Depth left-copy band, smaller all-caps "Clients. Culture. Community." headline with Community in Foundry orange, concise supporting copy, and a right-side 16:9 video thumbnail with a YouTube-red play button.

When: Use as a trust-building firm-culture video band on homepage, about, attorney, or high-intent practice pages where visito…

Source: sa-design-elements; source screenshot from current Codex thread; added via registry screenshot intake 2026-06-15

sa-clients-family-marquee-v1 v2026-06-15

Clients All Across Kentucky Become Part of the Family photo-social-proof section. Version 1 is a single-row scrolling marquee with portrait client cards on a white band, normalized from the v7 local mockup into production-safe sa-* classes.

When: Selective sitewide use for blog posts and long-form resource posts where a lighter mid-page or lower-page social-proof b…

Source: Local mockup source: C:\Users\SAguiar\Documents\Web Elements\collected-local-html-2026-05-27_134940\Downloads\Clients Family Section — 5 Variants (v7) (1).html

sa-clients-family-marquee-v2 v2026-06-15

Clients All Across Kentucky Become Part of the Family photo-social-proof section. Version 2 is a staggered two-row counter-scrolling marquee with square client cards on a soft gray band, normalized from the v7 local mockup into production-safe sa-* classes.

When: Selective sitewide use for pages, especially practice-area, location, homepage-adjacent, and conversion pages where a st…

Source: Local mockup source: C:\Users\SAguiar\Documents\Web Elements\collected-local-html-2026-05-27_134940\Downloads\Clients Family Section — 5 Variants (v7) (1).html

sa-cva-media-band v2026-06-16

'In The Media' dark band header plus a 3-up video card grid with placeholder play buttons and a More Videos link.

When: Showcase press/media coverage as a dark band with a 3-up video grid.

Source: sa-cva-media-band

sa-cva-results-ticker v2026-06-15

Photo-backed rotating results ticker cycling 18 settlement amounts on a 72-second CSS loop.

When: Add animated settlement proof on a page that already has a strong hero image. Use near the top of the content flow on pa…

Source: sa-cva-results-ticker

sa-cva-reviews-slider-google v2026-06-10

Google-branded variant of sa-cva-reviews-slider: same auto-scroll marquee, but the four-color Google G appears on every review card (and beside the header rating) so each testimonial reads as a verified Google review. Pick this OR sa-cva-reviews-slider, not both.

When: Continuous-scroll Google reviews strip instead of a static testimonial block.

Source: sa-cva-reviews-slider

sa-life-changing-results v2026-06-16

Bokeh-backed variant of the rotating case results ticker. Firm-owned blurred highway bokeh background with a dark overlay, 16 amounts on a 48-second loop, anchored by "More Results ->" link.

When: Once per page on pages with strong hero images (location pages, practice areas). Pick this OR the flat-dark rotating tic…

Source: sa-life-changing-results

sa-life-changing-results-bokeh v2026-06-15

Bokeh-background variant of sa-life-changing-results: the rotating Life-Changing Results ticker over a CSS-generated bokeh light field beneath a very dark overlay block (no external image dependency, so it always renders). 16 amounts on a 48-second loop, anchored by a More Results link. Pick this OR sa-life-changing-results, not both.

When: Once per page on pages with strong hero images (location pages, practice areas). Pick this OR the flat-dark rotating tic…

Source: sa-life-changing-results

sa-results-explorer v2026-06-04

Filterable case-results explorer for aguiarinjurylawyers.com. A sticky chip-filter bar (by case category) plus a live result count, feeding a responsive 3-up card grid where each card shows a large Georgia/Times New Roman orange settlement amount, a short orange divider, and an uppercase case-type label, all centered. JS-driven from a single RESULTS array (42 verified amounts). Use on the Case Results page (/about-us/our-results/) or any page needing an interactive, browsable list of firm settlements and verdicts. Triggers on results explorer, filterable results, case results grid, sa-results-explorer, results filter chips, browse case results, or any request for an interactive case-results browser. Distinct from the rotating ticker (sa-case-results-ticker / sa-cva-results-ticker), an auto-fading marquee; this one is a static, filterable grid the visitor controls. NEVER add case summaries to cards (amount + type only). Amounts are verified: do not edit, invent, or embellish.

When: On the Case Results page or any page needing an interactive, browsable list of firm settlements and verdicts that the vi…

Source: sa-results-explorer

sa-results-ticker v2026-06-16

Full-width navy 'stock ticker' that scrolls verdicts and settlements (largest first) with the case type centered under each amount. Slow continuous loop, pauses on hover. Approved by Sam 2026-06-15.

When: Bottom of a hero block on pages/posts to add social proof. Pull amounts live from results data in production; the embedd…

Source: sa-copywrite-design; built via sa-element-registry 2026-06-15

sa-review-break v2026-06-09

Reusable Google review page-break component - Google G logo, five gold stars, italic quote, reviewer attribution. Reviewer name renders in ALL CAPS. All text at 16px for consistent typography.

When: Between content sections on team pages, practice-area pages, location pages, and landing pages.

Source: sa-review-break

sa-review-slider v2026-06-12

Pure-CSS infinite marquee Google-review slider. 3-up desktop / 2-up tablet / 1-up mobile. Uses real approved reviews verbatim, centered Google icon, stars, quote, and ALL CAPS attribution. Pauses on hover/focus and respects prefers-reduced-motion.

When: When the page needs continuous-scroll review proof instead of a static testimonial block.

Source: sa-review-slider

sa-rotating-results-ticker v2026-06-15

Flat-dark (navy background) rotating case-results ticker. Fades through 16 amounts $14M→$2.5M on a 48-second loop with a More Results link to /about-us/our-results/. Distinct from sa-life-changing-results (the photo-backed variant).

When: Practice-area pages and homepage. Once per page. Never paired with sa-life-changing-results. Use near the top of the con…

Source: sa-case-results-ticker

sa-signature-quote-georgia v2026-06-11

Signature brand-quote element set for Sam Aguiar Injury Lawyers, rendered entirely in Georgia / Times New Roman serif (no Fraunces). One packaged set of on-brand treatments of the firm's signature line spanning web section formats and ready-to-post social sizes. This revision reworks the V5 light social square and adds an M5 hairline variant. Includes V1 editorial pull-quote, V2 dark full-width band, V3 1:1 social card, V4 9:16 story, V5 light social square (reworked), V6 minimal hairline plus the M1-M5 hairline family, and V7/V8 trust-strip page-break bands.

When: When a page or social post needs a signature Sam Aguiar quote moment in the classic Georgia/Times serif treatment. Pick …

Source: sa-signature-quote (Georgia/Times variant)

sa-signature-quote-poppins v2026-06-11

Signature brand-quote element set for Sam Aguiar Injury Lawyers, rendered entirely in Poppins (no Fraunces). One packaged set of on-brand treatments of the firm's signature line ('Our job isn't done until clients leave saying, Wow, that was an amazing experience.') spanning web section formats and ready-to-post social sizes. Includes V1 editorial pull-quote, V2 dark full-width band, V3 1:1 social card, V4 9:16 story, V5 light social square, V6 minimal hairline plus the M1-M4 hairline family, and V7/V8 trust-strip page-break bands.

When: When a page or social post needs a signature Sam Aguiar quote moment in the Poppins (sans-serif) treatment. Pick the var…

Source: sa-signature-quote (Poppins variant)

sa-trust-badges-grid v2026-06-10

3×2 grid of firm-credential badges (Forbes, Super Lawyers, ABOTA, NTL Top 100, Multi-Million, MVTLA). Header "Recognized Amongst Kentucky's Best Injury Lawyers."

When: Mid-page on location pages and homepage. Coexists with horizontal trust bar (3.2).

Source: sa-trust-badges-grid

bsg-v4-editorial v2026-06-11

Bigger Share Guarantee v4 — full editorial full-bleed page layout. Multi-section long-form page (Georgia/Times New Roman display + Poppins UI) with full-bleed on-white / on-dark alternating sections, italic-orange accents, navy primary CTA. No cream, no partial whites, no gray, no eyebrows.

When: The dedicated /about-us/bigger-share-guarantee/ page or any full editorial BSG explainer page. This is a whole-page comp…

Source:

sa-bsg-banner v2026-06-10

Full-bleed Visible Depth section emphasizing Bigger Share Guarantee(R) as standalone payoff moment. Foundry-orange BSG(R) heading and phone icon, white payoff line, single Call Now CTA with a 2px Foundry-orange border and regional tel: href.

When: Once per page, between social-proof and next section.

Source: sa-bsg-banner

sa-commitments-grid v2026-06-15

Six dark-navy commitment cards in 3×2 grid. Visible Depth gradient backgrounds. Each card is one short sentence. No icons.

When: Location pages, homepage, any page needing high-trust differentiator block. Acts as the UVP moment.

Source: sa-commitments-grid

sa-cva-camera-evidence v2026-06-15

Single-column editorial evidence block: orange rule, eyebrow, large Georgia/Times New Roman headline in one consistent navy treatment, body, divider, muted closer.

When: Editorial single-column differentiator block (e.g. traffic-camera evidence narrative).

Source: sa-cva-camera-evidence

sa-cva-get-more-proof v2026-06-15

Bottom full-bleed dark proof block with a framed attorney headshot left and Poppins Title Case headline + orange accent + checked UVP list right.

When: Close a page with a dark proof block tying the attorney face to key differentiators.

Source: sa-cva-get-more-proof

sa-fee-calc-interactive v2026-06-15

Interactive THEM vs. US fee calculator. Side-by-side card layout with Litigation and Pre-Litigation toggle, $10,000 to $1,000,000 settlement slider, $10,000 steps, and a $250,000 default settlement value.

When: Use inside a Bigger Share Guarantee or fee-comparison section when the reader needs to see how a flat fee changes the cl…

Source: sa-design-elements and sa-copywrite-design references/interactive.md; dedicated sa-fee-calc-interactive skill should be packaged from this registry row if reused broadly.

sa-quick-easy v2026-06-10

Full-bleed 'Quick & Easy to Get Started' stat block. Two-up dark cards on the Visible Depth gradient showing how few rings and minutes it takes to engage the firm. No icons, no animation, no counter script. Numbers are orange, all text is full-opacity white.

When: Homepage and high-traffic landing pages where a fast, low-friction proof point belongs above the BSG/UVP block. One per …

Source: sa-template-reference

sa-sigquote-band v2026-06-10

Signature founder-quote band. Full-width Visible Depth navy gradient with a centered Foundry-orange glow, a small top-left quotation mark, the first clause held on one line, the payoff broken beneath it, a short centered orange rule, and a lowercase '- sam aguiar' signature sized to match the quote. Ships with a white modifier (.sq-white) and a Poppins modifier (.sq-poppins).

When: A premium brand 'moment' band between content sections or above the footer. Dark by default; add class sq-white for a li…

Source: sa-signature-quote (refined 2026-06-09; lowercase founder signature, payoff on own line)

sa-us-vs-them-bokeh-comparison v2026-06-15

Approved Us vs. Them Concept 2B bokeh variant from the local mockup board, corrected per Sam so Sam Aguiar appears on the left and Other PI Firms appears on the right. Dark bokeh comparison table with gradient-style check and X marks.

When: Use as a stronger dark mid-page break or hero-secondary differentiation block where the page needs a more dramatic Us vs…

Source: registry-screenshot-intake; source mockup: C:\Users\SAguiar\Documents\Web Elements\collected-local-html-2026-05-27_134940\Downloads\Us vs Them Mockups.html; approved by Sam 2026-06-15

sa-us-vs-them-side-by-side-cards v2026-06-15

Approved Us vs. Them Concept 1 from the local mockup board. White-section two-card comparison with Sam Aguiar Injury Lawyers on the left in dark Visible Depth styling and Other PI Firms on the right in red-tinted competition styling.

When: Use as a mid-page differentiation anchor on practice-area, location, and landing pages that have room for a clear two-co…

Source: registry-screenshot-intake; source mockup: C:\Users\SAguiar\Documents\Web Elements\collected-local-html-2026-05-27_134940\Downloads\Us vs Them Mockups.html; approved by Sam 2026-06-15

sa-uvp-block v2026-06-15

Numbered four-point UVP block on a Visible Depth gradient background. Every card title is split onto two lines for uniform card height. Use as a page's UVP moment when the page does NOT use sa-commitments-grid. Pick one per page.

When: Practice-area pages and the homepage when the page does NOT use sa-commitments-grid. Pick one per page.

Source: sa-template-reference

sa-byline v2026-06-09

Minimal author byline for blog and practice-area pages: an orange-ringed circular headshot (verified live Media Library URL), a bold navy 'By Sam Aguiar' name that links to the bio, and a last-updated date underneath. Surfaces the author + date E-E-A-T signal that previously lived only in JSON-LD schema.

When: On blog posts and practice-area pages, placed directly above the On This Page TOC (under the breadcrumb). Not for locati…

Source:

sa-claim-number-statement-set v2026-06-15-image-corrected

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: Use as a mid-page adversary/trust statement where the page needs to contrast insurance-company treatment with the firm's…

Source: registry-screenshot-intake; corrected from session 019eccb8-f1a6-7c73-ba9f-5a6ff337bf32. Website media library URLs: Boardroom.webp and Boardroom-2.webp. Local copies: C:\Users\SAguiar\Downloads\Website Image Library\Boardroom.webp and C:\Users\SAguiar\Downloads\Website Image Library\Boardroom-2.webp.

sa-cva-body-sidebar v2026-06-10

Two-column body + sidebar layout grid wrapper with main content column, sticky 336px aside, and related-links card. CTA button uses border-box sizing so it never overflows the sidebar card; body paragraphs are a consistent 17px with a 19px lede.

When: Wrap the main body of any practice-area/location page that needs a sticky sidebar layout.

Source: sa-cva-body-sidebar

sa-cva-evidence-checklist v2026-06-10

2-up evidence checklist cards with circular check badges, orange left border, and a centered, larger, Title-Cased orange meta subheader per card.

When: Show a checklist of evidence types or features in a 2-column card grid.

Source: sa-cva-evidence-checklist

sa-cva-faq-accordion v2026-06-10

Native details/summary FAQ accordion with plus/minus markers, Georgia/Times New Roman H2, and optional FAQPage JSON-LD.

When: Add a frequently-asked-questions accordion with structured-data support.

Source: sa-cva-faq-accordion

sa-cva-how-it-works v2026-06-10

Numbered How-It-Works steps in a 2-column layout with center divider and large Georgia/Times New Roman display numerals in orange.

When: Explain a process or onboarding steps with big numbered display numerals.

Source: sa-cva-how-it-works

sa-cva-liability-split v2026-06-10

Editorial 2-column 'who pays' split with Georgia/Times New Roman H2 (italic-orange em), body copy, and a checkmark list.

When: Explain liability/fault after a crash in an editorial two-column layout.

Source: sa-cva-liability-split

sa-cva-types-grid v2026-06-10

3-up linked card grid with arrow markers on titles, for listing vehicle types or practice sub-types.

When: List vehicle types or practice-area sub-types as linked cards in a 3-column grid.

Source: sa-cva-types-grid

sa-faq-accordion v2026-06-10

Legacy FAQ accordion. Use sa-faq-concept-3 going forward for new and refreshed pages. Native HTML <details> with JSON-LD FAQPage schema.

When: Legacy pages only. New and refreshed pages should use sa-faq-concept-3.

Source: sa-template-reference

sa-faq-concept-3 v2026-06-15-faq-cleanup

May 2026 standalone packaged FAQ design with stricter content rules than the legacy accordion. Native HTML <details> accordion with JSON-LD FAQPage schema.

When: Default going forward for new and refreshed FAQ blocks on practice-area and location pages.

Source: sa-faq-concept-3

sa-faq-triangle v2026-06-02

Standalone packaged FAQ design with a LEFT triangle disclosure marker. Native HTML <details> accordion: white question cards on a light-gray section, navy question text, centered section title, and a small triangle on the left of each question that rotates 90 degrees and turns orange when the item opens. Pairs with FAQPage JSON-LD schema. Recreated from a rendered mockup (Kentucky Car Accident FAQ).

When: Use when you want the clean left-triangle FAQ look instead of the right-side +/- marker of sa-faq-concept-3. Pick one FA…

Source: sa-faq-triangle

sa-homepage-custom-form v2026-06-15

Rendered live homepage-style intake form contract. Added from live-site QA after the form family was verified passing but not separately represented in the registry.

When: Homepage-style, landing-page, or top-of-page intake placements that should use the same Litify/email/tracking contract a…

Source: wp-form-deploy-qa

sa-inline-form v2026-06-15

Rendered live inline Lexington intake form contract. Added because the live form passed QA but the reusable inline family was not separately represented in the registry.

When: Inline body placements where a compact custom intake form is embedded in page content.

Source: wp-form-deploy-qa

sa-lp-form v2026-06-15

Rendered live Spanish landing-page intake form contract. Added because the live Spanish LP form passed QA but was not separately represented in the registry.

When: Spanish-language landing-page form placements that should preserve Litify, email, and tracking routing.

Source: wp-form-deploy-qa

sa-pagebreak-bsg v2026-06-16b

Full-bleed Bigger Share Guarantee page-break banner. Dark Visible Depth gradient strip, Poppins, white centered ALL-CAPS headline with BSG registered mark, $0 Out-Of-Pocket Forever subline, approved on-dark depth CALL NOW pill with left phone icon. Sibling of you-focus-pagebreak (36). Scoped CSS.

When: Mid-page break on practice-area, location, and post pages where the BSG UVP has not already been used. One UVP per page:…

Source: you-focus-pagebreak

sa-pagebreak-playbook v2026-06-16b

Full-bleed insurance-adversary page-break banner. Dark Visible Depth gradient strip, Poppins, white centered ALL-CAPS headline, claim-number subline, approved on-dark depth CALL NOW pill with left phone icon. Sibling of you-focus-pagebreak (36). Scoped CSS.

When: Mid-page break on pages discussing insurance company tactics, lowball offers, or claim handling. Good after a body secti…

Source: you-focus-pagebreak

sa-pagebreak-results v2026-06-16b

Full-bleed results-authority page-break banner. Dark Visible Depth gradient strip, Poppins, white centered ALL-CAPS headline, Google-rating subline, approved on-dark depth CALL NOW pill with left phone icon. Sibling of you-focus-pagebreak (36). Scoped CSS.

When: Mid-page break near results or review content. Rotate authority signals: do not stack with a reviews slider or results t…

Source: you-focus-pagebreak

sa-process-steps v2026-06-10

Four-step numbered process block. Each step has a large numeral, short title, one-sentence description. Light background, navy text. Replaces stock 'Our Process' blocks.

When: How-it-works sections on practice-area and location pages.

Source: sa-template-reference

sa-pull-quote v2026-06-09

Inline pull-quote with large italic text and orange left-border accent. Reviewer attribution carries the four-color Google G, is ALL CAPS, and matches the 20px size of the quote text. Use for client storytelling or attorney-voice emphasis.

When: Client storytelling, attorney-voice moments — max one per content section.

Source: sa-page-architect

sa-registry-screenshot-intake-workflow v2026-06-15

Registry workflow entry for turning attached screenshots/mockups into draft or live registry rows. Captures source image path, exact-match versus near-match status, component scope, reusable HTML/CSS requirements, QA evidence, and pending approvals so visual ideas do not remain only in chat attachments.

When: Use whenever Sam attaches screenshots, mockup sheets, design comps, page captures, or asks whether visuals are built and…

Source: registry-screenshot-intake; requested by Sam 2026-06-15

sa-related-resources-card v2026-06-15d

Approved Related Resources card for interior pages and posts. Light gray surface, 4px Foundry orange left rail, navy Title Case link list, and orange hover state. Replaces legacy related-resources boxes with three-sided navy borders, orange default links, white card backgrounds, lowercase labels, or generic unstyled bullet lists.

When: Use as a bottom sidebar element when the page has a sidebar. Place it after the sidebar CTA/form/trust/video/founder sta…

Source: sa-copywrite-design / sa-design-elements; new packaged skill recommended if reused broadly after sweep

sa-sigquote-centered v2026-06-10

Centered signature quote between two full-width hairlines, with a short centered Foundry-orange rule and a lowercase '- sam aguiar' sized to the quote. Default Georgia/Times; add .sq-poppins for the sans version.

When: A centered, quiet brand beat mid-article or between sections where a full dark band would be too loud.

Source: sa-signature-quote (refined 2026-06-09; lowercase founder signature, payoff on own line)

sa-sigquote-hairline v2026-06-10

Minimal signature-quote hairline. Foundry-orange left rule, no background, payoff on its own line, lowercase '- sam aguiar' sized to the quote. Default Poppins; add .sq-georgia for the serif version.

When: Low-footprint inline use: a sidebar, an email-signature block, or just above the footer on a page that already has a hea…

Source: sa-signature-quote (refined 2026-06-09; lowercase founder signature, payoff on own line)

sa-sigquote-pagebreak v2026-06-10

Slim full-width signature-quote divider band. Thin lines run out to both edges so the quote reads as a page break. Foundry-orange lines by default; add .sq-blue for navy lines. Light surface, payoff on its own line, lowercase '- sam aguiar' sized to the quote. Add .sq-poppins for the sans version.

When: A divider between two content sections that doubles as a brand beat. Use on top trafficked pages, one per page.

Source: sa-signature-quote (refined 2026-06-09; lowercase founder signature, payoff on own line)

sa-sigquote-rule-glyph v2026-06-10

Signature-quote hairline with a small top-left quotation mark above an orange left rule, payoff on its own line, lowercase '- sam aguiar' sized to the quote. Default Georgia/Times; add .sq-poppins for the sans version.

When: Inline brand beat where a touch more presence than the plain hairline is wanted, without a full band.

Source: sa-signature-quote (refined 2026-06-09; lowercase founder signature, payoff on own line)

sa-video-block v2026-06-09

16:9 lazy-loaded YouTube embed using the nocookie domain with custom poster image. Centered within its column (margin auto). Used for attorney intros, client testimonials, and case-result walkthroughs.

When: Attorney intros, client testimonials, case-result walkthroughs.

Source: sa-template-reference

you-focus-pagebreak v2026-06-10

Full-bleed You-Focus page-break banner. Dark Visible Depth gradient strip, Poppins throughout, full-white centered ALL-CAPS headline and fee-never-increases subline, and the approved sa-depth-button .on-dark CALL NOW pill (white fill, navy text, phone icon left; hover flips to navy depth gradient with Foundry-orange text and border). NO eyebrow/kicker. Self-contained scoped CSS; leaky global ALL-CAPS/button rules removed 2026-06-10.

Source: you-focus-pagebreak

Sidebar Option A — Default (CTA → Trust) v2026-06-15c

White-card default sidebar: CTA card followed by the trust card. No form. Replaces the old dark-gradient + modular-add-on model.

When: Sitewide default sidebar on any page or post that doesn't need a lead-capture form. Use when a clean two-card column (Ca…

Source: sa-sidebar-option-a

Sidebar Option B — Long (CTA → Form → Trust) v2026-06-15c

White-card sidebar with the approved intake form between the CTA and trust cards. The old 'BSG accent card' model is retired — BSG now lives only in the standalone sa-bsg-banner.

When: Higher-intent practice-area and landing pages where an in-column intake form beyond Call Now is worth it. CTA → Form (ac…

Source: sa-sidebar-option-b

Sidebar Option C — Long + Video (CTA → Form → Trust → Video) v2026-06-15c

White-card sidebar adding a white video card (no 'Related Video' eyebrow, YouTube-red play button) below the trust card. CTA → Form → Trust → Video.

When: Pages that want social proof via a short brand video plus an intake form. Video card title 'What Makes Us Different', me…

Source: sa-sidebar-option-c

Sidebar Option D — Founder (Founder → Form → Trust → CTA) v2026-06-15c

White-card sidebar led by the Founder intro card (Sam Aguiar headshot, FOUNDER role, Serving line, no street address), then Form -> Trust -> CTA. Exactly one GET STARTED (form submit) and one CALL NOW (bottom CTA card). Founder not Partner (Jon Hollan is Managing Partner).

When: Statewide/Louisville pages where putting Sam's face at the top builds trust. Founder card → Form → Trust → CTA. Headshot…

Source: sa-sidebar-option-d

Sidebar Partner / Founder Card v2026-06-04

White attorney card: 3px Foundry #D97706 headshot ring, 4px orange top border, name 18px → role 15px → service area 14px → CALL NOW. Sam = 'FOUNDER' (Jon Hollan = Managing Partner). No street address. Two-line 'Serving Louisville, Lexington, and throughout Kentucky.' line. Legacy #F89C22 replaced with Foundry #D97706 throughout.

When: First block at the top of a sidebar when a regional attorney's face should lead (Sam as FOUNDER for Louisville/statewide…

Source: sa-sidebar-partner-card

Sidebar Related Video Card v2026-06-16

Standalone white video card for the sidebar - NO 'Related Video' eyebrow, YouTube-red rounded-rectangle play button, centered title and meta. The thumbnail degrades to a clean navy gradient if the image is missing (no broken-image icon in preview). Matches the other white sidebar cards.

When: Secondary after-trust block on any page that has a relevant brand/YouTube video. Drop in the video URL, thumbnail, title…

Source: sa-sidebar-related-video

sa-cva-sidebar-stack v2026-06-15c

Modular sidebar stack: navy CTA card, partner attorney headshot card with orange top border, and a checkmark trust list.

When: Sidebar content for practice-area/location pages needing CTA + partner + trust list.

Source: sa-cva-sidebar-stack

sa-sidebar-guidepost-card v2026-06-15

Exact 336px Sidebar Guidepost Card from Sam screenshot: compact related-pages utility card with Foundry-orange top border, centered "Related Pages" heading, divider rows, orange chevrons, and navy Title Case link labels. Designed for sticky right rails on practice-area and location pages.

When: Use in a 336px sticky sidebar when the page needs a short, high-relevance guidepost list to adjacent practice-area, truc…

Source: sa-design-elements; source screenshot from current Codex thread; added via registry screenshot intake 2026-06-15

sa-sidebar-quick-easy v2026-05-29

Sidebar-scoped Mini 2-up variant of the homepage Quick & Easy block. Lives as the after-trust closer in sa-sidebar-option-a optional block #7. Same shape and tokens as the homepage element, scaled down for the 340px sidebar column.

When: Practice-area and location-page sidebars where 'how easy this is' reinforces the CTA. Goes in the after-trust slot. Mutu…

Source: sa-sidebar-option-a

sa-bsg-cta-hero v2026-06-10

Reusable bottom-of-page CTA hero originally built for /about-us/bigger-share-guarantee/. Two-column layout: attorney headshot left (clean image, no caption overlay, no button), headline + tagline + bullets right. 2026-06-10: removed image caption overlay and Get Started button per Sam. BEM-scoped class namespace .sa-bsg-cta, no builder/theme dependency.

When: Pages where you want a stronger conversion close than the standard sa-cta-image-banner. Best on pages where the firm's B…

Source: sa-bsg-banner (closest packaged sibling); component files on Sam's Mac at ~/Documents/Projects/components/bigger-share-cta-hero/

sa-bsg-strip v2026-06-07

Quiet full-bleed Bigger Share Guarantee® strip. Dark Visible Depth gradient band with an orange uppercase BIGGER SHARE GUARANTEE® strip-line above a two-line Georgia serif headline 'You focus on getting better. / We'll handle everything else.' No button, no subline. The calm payoff strip from the contact page that sits just above the footer.

When: When a page needs a calm, buttonless BSG payoff strip above the footer (e.g. /contact-us/).

Source: sa-bsg-strip

sa-cta-banner v2026-06-10

Bottom-of-page CTA banner. Default variant is sa-cta-image-banner (split image-left/copy-right). Single CTA button, regional tel: href.

When: Last main-column block before the footer on every content page.

Source: sa-template-reference

sa-cta-banner-split-form v2026-06-07

Full-bleed split CTA banner with a built-in intake form: shared image-left / form-panel-right shell (.sa-cta-banner-split) with three approved right-panel variants — A 'You Focus on Getting Better' (white + orange accent, navy submit), B 'Get Back to Living Your Best Life' (navy Visible Depth, white button), and C Bigger Share Guarantee (white + navy accent, BSG eyebrow). Drops the email field; Name + Phone + Case Type + Were You Injured only.

When: Conversion pages that need a CTA banner that captures a lead inline (homepage, contact, results, landing pages). Pick on…

Source: sa-cta-image-banner (sibling); component lives in sa-design-elements catalog. Mockup: CTA-Banner-UVP-Variants-Mockup.html

sa-cta-get-more-get-it-faster v2026-06-14

White bottom-of-page CTA block from Sam's attached screenshot. Centered Poppins layout with a slim Foundry-orange top rule, orange all-caps GET STARTED TODAY line, navy headline 'Get More. Get It Faster. Get It With Sam Aguiar.', short no-cost review copy, Louisville and Lexington phone lines, and a Spanish phone line.

When: Bottom block above the footer or after final body content when a page needs a quiet, no-form phone CTA. Use once per pag…

Source: sa-element-registry

sa-cta-image-banner v2026-06-10

Full-bleed bottom-of-page CTA banner. Two approved variants: split image-left/copy-right (preferred default on desktop and mobile) and image-background with dark overlay (alternate).

When: Bottom of every content page as the final CTA moment.

Source: sa-cta-image-banner

sa-cva-final-cta v2026-06-10

Final centered white CTA with a Georgia/Times New Roman headline (italic-orange em) and a single Call Now pill button (tel: href, text label).

When: The very last content section of a page; clean white centered call-to-action.

Source: sa-cva-final-cta

sa-cva-split-form v2026-06-16

Split image-left / navy form-right conversion block (Variant E) with full inline-styled contact form and server-injection placeholders.

When: Lead-capture conversion block with a contact form; placeholders {{FORM_ENDPOINT}}/{{NONCE_VALUE}} injected server-side.

Source: sa-cva-split-form

sa-depth-button v2026-06-10

Primary call-to-action button. Visible Depth navy gradient fill with white text (never an orange fill). On light sections it renders navy with white text; on dark/navy sections add .on-dark for the inverted white-background / navy-text version so the button is never navy-on-navy. Hover turns the text Foundry orange.

When: Any primary CTA button. Use the default on light/white sections. Add the .on-dark class when the button sits on a navy o…

Source: sa-design-elements

sa-depth-ring-button v2026-06-03

Optional CTA button variant. Visible Depth navy gradient fill with Foundry orange text and a 1.5px orange ring. Keeps the orange visible while staying rule-compliant (orange is text and border, never a fill). Hover flips the text to white. For light sections.

When: When you want the orange to read on a CTA button but cannot use an orange fill. Light sections only (the dark gradient n…

Source: sa-design-elements

sa-get-started-pagebreak v2026-06-15

Full-bleed centered Get Started page-break banner for aguiarinjurylawyers.com. Visible Depth navy-to-black gradient background, centered ALL-CAPS white headline, larger full-white body copy, and a single centered orange-outline GET STARTED button linking to /contact/.

When: Centered trust/CTA page-break between content sections or before the final CTA banner, when a non-call Get Started butto…

Source: sa-get-started-pagebreak

sa-photowall-form v2026-06-04

Photo-wall split intake form for aguiarinjurylawyers.com. A two-column conversion block: left is a tilted 3-up photo collage of real happy clients on a warm cream wall; right is a white intake panel with an orange left border, a centered You Focus on Getting Better headline, and the approved contact form wired to sal/v1/contact-intake (name, phone, case type, injured status, message, hidden tracking fields). Submit is the Visible Depth gradient GET STARTED button. Use on the Case Results page, homepage, or any conversion page where a warm client-photo lead-capture moment fits. Triggers on photo wall form, photowall form, sa-photowall-form, client collage form, split intake form with photos, happy clients form, or any photo-collage-plus-form conversion block. Distinct from sa-cva-split-form (single image-left, navy-form-right); this variant uses a tilted multi-photo collage wall. Forms are deprecated on practice-area/location/blog pages; use on homepage, contact, results, and landing pages only.

When: Late-page conversion block on the Case Results page, homepage, contact page, or landing pages — a warm tilted client-pho…

Source: sa-photowall-form

sa-results-final-cta v2026-06-04

Centered final CTA section for aguiarinjurylawyers.com, in two approved background variants. Variant A: Visible Depth navy-to-black gradient with orange glow, white Georgia/Times New Roman headline (Get More. Get It Faster.) with an italic-orange emphasis line, a Bigger Share Guarantee subline, a Call Now Depth Button, and a prior-results disclaimer. Variant B: the same layout on a white full-width section. Both use the compliant Depth Button (no orange fill). Use as the bottom-of-page CTA on the Case Results page or any page wanting a centered statement CTA rather than the image-background split banner. Triggers on results final CTA, centered final CTA, sa-results-final-cta, Get More Get It Faster CTA, navy final CTA, white final CTA, or any centered two-variant closing CTA. Distinct from sa-cta-image-banner and sa-cva-final-cta; pick one closing CTA per page. Carries the prior-results disclaimer the Case Results page requires.

When: Bottom-of-page centered closing CTA (above footer) when a page wants a centered statement CTA rather than an image-backg…

Source: sa-results-final-cta

sa-results-final-cta-navy (CALL NOW) v2026-06-04

Navy Visible Depth gradient final CTA. White Georgia/Times New Roman headline with italic-orange 'Get It With Sam Aguiar.' line, $0-out-of-pocket / Bigger Share Guarantee subline, all-caps CALL NOW pill button, and a prior-results disclaimer.

When: Bottom-of-page closing CTA when a dark, statement-style finish fits the page rhythm.

Source: sa-results-final-cta

sa-results-final-cta-white (CALL NOW) v2026-06-04

White full-width final CTA. Navy Georgia/Times New Roman headline with italic-orange 'Get It With Sam Aguiar.' line, $0-out-of-pocket / Bigger Share Guarantee subline, and an all-caps CALL NOW pill button.

When: Bottom-of-page closing CTA when a clean white finish fits better than the dark variant.

Source: sa-results-final-cta

sa-rural-cta-form-banner v2026-06-10

Repeatable split-image intake form CTA for rural and secondary location pages. Ships in three variants, submits to the custom sal/v1/contact-intake endpoint, and uses viewport breakout sizing so it renders cleanly on legacy location templates.

When: Use on rural or secondary location pages where Sam has approved a form-backed bottom CTA instead of the standard call-on…

Source: sa-rural-cta-form-banner

sa-approved-sam-portrait-assets v2026-06-14

Approved Sam Aguiar portrait asset registry entry. Includes the transparent WebP portrait uploaded 2026-06-14 and the current homepage portrait Sam-Website-Home-1.webp for reusable site components.

When: Use when a page element needs an approved image of Sam Aguiar, including CTA blocks, bylines, founder cards, office anch…

Source: sa-element-registry; WordPress Media Library

sa-managing-partner-block v2026-05-29

Main-column office-anchoring block with a large circular orange-bordered headshot, name, role kicker, 1-2 sentence regional bio, and 'Meet [Name] →' link. Use directly under the hero on location pages.

When: Location pages directly under the hero to anchor the regional attorney.

Source: sa-managing-partner-block