SA Element Registry
← Back to catalog
Content Blocks Live

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.

Source skill: sa-template-reference · Updated 2026-06-10 16:47:51

Edit

Live preview

Open ↗

When to use

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

Rules & constraints

Live reference

https://aguiarinjurylawyers.com/

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.

HTML

<section class="sa-faq">
  <div class="sa-faq-inner">
    <h2 class="sa-faq-h2">Kentucky Personal Injury FAQs</h2>

    <details class="sa-faq-item">
      <summary>[Long-tail Question 1 with city + practice area?]</summary>
      <div class="sa-faq-answer">
        <p>[40-60 word answer with at least one inline authoritative <a href="https://www.example.gov" target="_blank" rel="noopener">citation</a>.]</p>
      </div>
    </details>

    <details class="sa-faq-item">
      <summary>[Long-tail Question 2?]</summary>
      <div class="sa-faq-answer">
        <p>[40-60 word answer with inline citation.]</p>
      </div>
    </details>

    <details class="sa-faq-item">
      <summary>[Long-tail Question 3?]</summary>
      <div class="sa-faq-answer">
        <p>[40-60 word answer with inline citation.]</p>
      </div>
    </details>

    <!-- Add 6-10 questions total -->

  </div>
</section>



<!-- REQUIRED: Matching FAQPage JSON-LD schema. Replace placeholders. -->
<script type="application/ld+json">
{
  "@context": "https://schema.org",
  "@type": "FAQPage",
  "mainEntity": [
    {
      "@type": "Question",
      "name": "[Long-tail Question 1?]",
      "acceptedAnswer": { "@type": "Answer", "text": "[Plain-text answer 1.]" }
    },
    {
      "@type": "Question",
      "name": "[Long-tail Question 2?]",
      "acceptedAnswer": { "@type": "Answer", "text": "[Plain-text answer 2.]" }
    },
    {
      "@type": "Question",
      "name": "[Long-tail Question 3?]",
      "acceptedAnswer": { "@type": "Answer", "text": "[Plain-text answer 3.]" }
    }
  ]
}
</script>

CSS

.sa-faq{background:#fff;padding:64px 20px}
.sa-faq-inner{max-width:900px;margin:0 auto}
.sa-faq-h2{font-family:Poppins,sans-serif;font-weight:700;font-size:clamp(26px,3.5vw,34px);color:#0B212D;text-align:center;margin:0 0 32px}
.sa-faq-item{background:#f7f9fa;border-left:4px solid #D97706;border-radius:6px;margin:0 0 12px;overflow:hidden}
.sa-faq-item summary{font-family:Poppins,sans-serif;font-weight:600;font-size:17px;color:#0B212D;padding:18px 56px 18px 22px;cursor:pointer;list-style:none;position:relative}
.sa-faq-item summary::-webkit-details-marker{display:none}
.sa-faq-item summary::after{content:"+";position:absolute;right:22px;top:50%;transform:translateY(-50%);color:#D97706;font-size:24px;font-weight:700;transition:transform .2s}
.sa-faq-item[open] summary::after{content:"−"}
.sa-faq-answer{padding:0 22px 20px}
.sa-faq-answer p{font-family:Poppins,sans-serif;font-weight:500;font-size:15px;line-height:1.6;color:#0B212D;margin:0}
.sa-faq-answer a{color:#0B212D;border-bottom:1px solid #D97706;text-decoration:none}

/* === ALL-CAPS + CENTERED (sa-copywriting §2, SCOPED 2026-06-10) === */
.sa-faq h1,.sa-faq h2,.sa-faq h3{text-transform:uppercase !important;text-align:center !important;}
.sa-faq .cva-btn,.sa-faq .cva-btn--primary,.sa-faq .cva-btn--ghost,.sa-faq .sa-cta-banner-btn,.sa-faq .sa-sidebar-btn,.sa-faq .sa-side-btn,.sa-faq .sa-submit-btn,.sa-faq .sa-bsg-cta,.sa-faq .sa-hero-cta,.sa-faq .sa-partner-btn,.sa-faq .sa-btn,.sa-faq .sa-cta,.sa-faq .sa-cta-btn,.sa-faq .btn{text-transform:uppercase !important;text-align:center !important;}