← Back to catalog
Content Blocks Live

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.

Source skill: sa-faq-concept-3 · Updated 2026-06-15 16:44:37

Edit

Live preview

Open ↗

When to use

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

Rules & constraints

Live reference

https://aguiarinjurylawyers.com/locations/lexington/

Deployment notes

FAQ concept 3 refreshed after Kentucky page QA to remove stale sample copy and align CSS weights and breakpoint with sa-copywrite-design.

HTML

<section class="sa-section sa-section-light">
  <div class="sa-section-inner">
    <h2>FAQ's</h2>
    <div class="sa-faq-section">
      <details>
        <summary>Does Sam Aguiar Injury Lawyers handle cases across Kentucky?</summary>
        <p class="faq-body">Yes. The firm handles Kentucky motor vehicle injury cases from offices in Louisville and Lexington, with remote sign-ups and document handling when that is easier for the client. Case teams can work with clients in every region of the state.</p>
      </details>
      <details>
        <summary>What types of accident cases does the firm handle?</summary>
        <p class="faq-body">The firm handles motor vehicle injury cases, including car accidents, commercial truck accidents, motorcycle crashes, rideshare collisions, delivery vehicle crashes, pedestrian injuries, bicycle injuries, hit-and-run claims, uninsured motorist disputes, and crash-related wrongful death cases.</p>
      </details>
      <details>
        <summary>How does the Bigger Share Guarantee work?</summary>
        <p class="faq-body">The Bigger Share Guarantee means the client receives more than the attorney after fees, case costs, medical bills, and liens are addressed. If the client would receive less, the firm cuts its fee so the client receives the bigger share.</p>
      </details>
      <details>
        <summary>What does $0 Out-Of-Pocket Forever mean?</summary>
        <p class="faq-body">Clients do not pay anything out of pocket while the case is moving forward. The firm advances case costs and is paid only from a recovery. The fee percentage does not increase because a case has to be filed or litigated.</p>
      </details>
    </div>
  </div>
</section>

<!-- Add FAQPage JSON-LD on each page with page-specific questions and answers. -->

CSS

/* ============== sa-faq-concept-3 - standalone packaged FAQ ============== */
.sa-section.sa-section-light{
  padding:56px 24px;
  background:#F7F9FA;
}
.sa-section.sa-section-light .sa-section-inner{
  max-width:880px;
  margin:0 auto;
}
.sa-section.sa-section-light h2{
  font-family:Poppins,sans-serif;
  font-weight:700;
  font-size:clamp(26px,3.5vw,34px);
  color:#0B212D;
  text-align:center;
  margin:0 0 28px;
  letter-spacing:0;
}
.sa-faq-section{
  display:flex;
  flex-direction:column;
  gap:12px;
}
.sa-faq-section details{
  background:#FFFFFF;
  border:1px solid #E6ECF1;
  border-left:4px solid #D97706;
  border-radius:0 8px 8px 0;
  padding:0;
  overflow:hidden;
  transition:border-color .15s ease, box-shadow .15s ease;
}
.sa-faq-section details[open]{
  border-color:#D97706;
  box-shadow:0 2px 8px rgba(11,33,45,.06);
}
.sa-faq-section summary{
  font-family:Poppins,sans-serif;
  font-weight:600;
  font-size:17px;
  line-height:1.4;
  color:#0B212D;
  padding:18px 50px 18px 22px;
  cursor:pointer;
  position:relative;
  list-style:none;
  user-select:none;
}
.sa-faq-section summary::-webkit-details-marker{display:none;}
.sa-faq-section summary::after{
  content:'+';
  position:absolute;
  right:22px;
  top:50%;
  transform:translateY(-50%);
  font-family:Poppins,sans-serif;
  font-weight:700;
  font-size:24px;
  color:#D97706;
  line-height:1;
}
.sa-faq-section details[open] summary::after{
  content:'\2212';
}
.sa-faq-section .faq-body{
  font-family:Poppins,sans-serif;
  font-weight:500;
  font-size:16px;
  line-height:1.6;
  color:#0B212D;
  padding:0 22px 20px;
  margin:0;
}
.sa-faq-section .faq-body a{
  color:#0B212D;
  border-bottom:1px solid #D97706;
  text-decoration:none;
  font-weight:600;
}

@media (max-width:768px){
  .sa-section.sa-section-light{padding:40px 16px;}
  .sa-section.sa-section-light h2{text-align:center;}
  .sa-faq-section summary{font-size:16px;padding:16px 44px 16px 18px;}
  .sa-faq-section .faq-body{font-size:15px;padding:0 18px 16px;}
}

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