SA Element Registry
Catalog
Admin
+ Add
Edit element
sa-faq-triangle
Name (slug)
Version
Category
Heroes & Top-of-Page
Social Proof
Differentiators
Content Blocks
Sidebar
CTA / Footer
Office Anchoring
Status
Live
Beta
Deprecated
Description
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 to use
Use when you want the clean left-triangle FAQ look instead of the right-side +/- marker of sa-faq-concept-3. Pick one FAQ design per page. Good for practice-area, location, and service pages above the final CTA banner.
Source skill
Rules (one per line, leading dash optional)
1. BANNED question topics on live pages: statute of limitations, comparative fault, generic 'what to do after a crash' checklists. 2. JSON-LD FAQPage schema REQUIRED; mirror every on-page Q/A into the schema (straight quotes in JSON). 3. No banned words (firm-briefing 6) and no AI-fingerprint language (6.1) in answers. 4. Curly quotes in copy; no em dashes (firm-briefing 7). 5. Phone numbers stay in tel: href only, never visible text in an answer. 6. Nav/TOC label reads exactly FAQ's (with apostrophe). 7. No rgba alpha < 1 or opacity < 1 on text (sa-brand-decisions 3). 8. Tokens: section bg #F7F9FB, card #fff with #E6ECF1 border, open border/marker Foundry orange #D97706, navy #0B212D text, answer #2C3E50, Poppins font, 640px mobile breakpoint. Do not modify class names, hex values, breakpoints, or marker geometry. 9. Distinct from sa-faq-concept-3 (right-side +/- marker) - never stack both on one page.
Live reference URL
Deployment notes
Copy HTML + CSS verbatim from the skill's references/snippet.html. Swap the recreation roster for approved firm-specific topics before shipping live. Mirror Q/A into the JSON-LD from references/schema-template.json. Paste above the final CTA banner; paste schema immediately after. Run pre-publish-qa -> playwright-visual-qa (1280px + 390px) -> sa-content-rot-detector -> sa-css-leak-guard, then content-publish-logger and batch-indexnow.
HTML
<section class="sa-faq-tri"> <div class="sa-faq-inner"> <h2>Kentucky Car Accident FAQ</h2> <div class="sa-faq-list"> <details> <summary>Is Kentucky a no-fault state for car accidents?</summary> <p class="faq-body">Yes. Kentucky is a choice no-fault state, so your own Personal Injury Protection coverage pays the first round of medical bills and lost wages regardless of who caused the crash. You can step outside the no-fault system and pursue the at-fault driver once your injuries cross Kentucky’s statutory threshold.</p> </details> <details> <summary>What if the at-fault driver had no insurance?</summary> <p class="faq-body">Your own Uninsured and Underinsured Motorist coverage can step in to pay for your injuries when the other driver carried no policy or not enough. We routinely stack and pursue every available layer of coverage so an uninsured driver does not become your financial problem.</p> </details> <details> <summary>How much does it cost to hire Sam Aguiar Injury Lawyers?</summary> <p class="faq-body">Nothing upfront and $0 out of pocket, ever. We work on a flat contingency fee that never increases, even if your case goes into litigation. The Bigger Share Guarantee® means your walkaway amount is always larger than ours, or we cut our fee.</p> </details> <details> <summary>Can the firm get crash camera footage for my Kentucky car accident?</summary> <p class="faq-body">Yes. We have access to DOT and TriMarc traffic camera systems with roughly six months of statewide real-time footage. Pulling that video early can lock down liability before an at-fault driver or insurer rewrites the story.</p> </details> </div> </div> </section>
CSS
.sa-faq-tri{ padding:56px 24px; background:#F7F9FB; } .sa-faq-tri .sa-faq-inner{ max-width:980px; margin:0 auto; } .sa-faq-tri h2{ font-family:Poppins,sans-serif; font-weight:700; font-size:clamp(28px,3.6vw,36px); color:#0B212D; text-align:center; margin:0 0 30px; letter-spacing:.2px; } .sa-faq-tri .sa-faq-list{ display:flex; flex-direction:column; gap:14px; } .sa-faq-tri details{ background:#fff; border:1px solid #E6ECF1; border-radius:8px; overflow:hidden; box-shadow:0 1px 3px rgba(11,33,45,0.05); transition:border-color .15s ease, box-shadow .15s ease; } .sa-faq-tri details[open]{ border-color:#D97706; box-shadow:0 3px 10px rgba(11,33,45,0.08); } .sa-faq-tri summary{ font-family:Poppins,sans-serif; font-weight:600; font-size:17px; line-height:1.4; color:#0B212D; padding:20px 24px 20px 48px; cursor:pointer; position:relative; list-style:none; user-select:none; } .sa-faq-tri summary::-webkit-details-marker{ display:none; } .sa-faq-tri summary::before{ content:''; position:absolute; left:24px; top:50%; transform:translateY(-50%); width:0; height:0; border-top:6px solid transparent; border-bottom:6px solid transparent; border-left:9px solid #0B212D; transition:transform .2s ease, border-left-color .2s ease; } .sa-faq-tri details[open] summary::before{ transform:translateY(-50%) rotate(90deg); border-left-color:#D97706; } .sa-faq-tri .faq-body{ font-family:Poppins,sans-serif; font-weight:400; font-size:16px; line-height:1.65; color:#2C3E50; padding:0 24px 22px 48px; margin:0; } @media (max-width:640px){ .sa-faq-tri{ padding:40px 16px; } .sa-faq-tri summary{ font-size:16px; padding:16px 18px 16px 42px; } .sa-faq-tri summary::before{ left:18px; } .sa-faq-tri .faq-body{ font-size:15px; padding:0 18px 18px 42px; } }
Save changes
Cancel