Edit element

sa-faq-accordion

Name (slug) Version

Category Status

Description When to use Source skill Rules (one per line, leading dash optional) Live reference URL Deployment notes 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>

</div>
</section>

<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;}

Cancel