Edit element

sa-rotating-results-ticker

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-results-ticker" aria-label="Life-Changing Results">
  <div class="sa-results-ticker-inner">
    <span class="sa-results-label">Life-Changing Results:</span>
    <div class="sa-results-stage">
      <div class="sa-result-slide">$14,000,000 <em>Insurance Dispute</em></div>
      <div class="sa-result-slide">$12,000,000 <em>Wrongful Death</em></div>
      <div class="sa-result-slide">$6,800,000 <em>Car Accident</em></div>
      <div class="sa-result-slide">$6,250,000 <em>Commercial Vehicle</em></div>
      <div class="sa-result-slide">$6,100,000 <em>Box Truck Accident</em></div>
      <div class="sa-result-slide">$6,000,000 <em>Semi-Truck Accident</em></div>
      <div class="sa-result-slide">$6,000,000 <em>Wrongful Death</em></div>
      <div class="sa-result-slide">$6,000,000 <em>Premises Liability</em></div>
      <div class="sa-result-slide">$5,600,000 <em>Wrongful Death</em></div>
      <div class="sa-result-slide">$5,200,000 <em>Trucking Accident</em></div>
      <div class="sa-result-slide">$4,100,000 <em>Car Accident</em></div>
      <div class="sa-result-slide">$4,000,000 <em>Trucking, Brain Injury</em></div>
      <div class="sa-result-slide">$3,600,000 <em>Trucking Accident</em></div>
      <div class="sa-result-slide">$3,300,000 <em>Insurance Dispute</em></div>
      <div class="sa-result-slide">$3,000,000 <em>Trucking Accident</em></div>
      <div class="sa-result-slide">$2,500,000 <em>Motor Vehicle Accident</em></div>
    </div>
    <a class="sa-results-link" href="/about-us/our-results/">See More Results →</a>
  </div>
</section>

CSS

.sa-results-ticker{background:linear-gradient(0deg,#000 0%,#0B212D 100%);color:#fff;padding:32px 20px;text-align:center}
.sa-results-ticker-inner{max-width:1200px;margin:0 auto;display:flex;flex-direction:column;align-items:center;gap:14px}
.sa-results-label{font-family:Poppins,sans-serif;font-weight:700;font-size:clamp(26px,4vw,40px);letter-spacing:1px;text-transform:uppercase;color:#D97706;line-height:1.1}
.sa-results-stage{position:relative;height:78px;width:100%;max-width:560px;overflow:hidden}
.sa-result-slide{position:absolute;inset:0;display:flex;flex-direction:column;justify-content:center;align-items:center;gap:4px;text-align:center;font-family:Poppins,sans-serif;font-weight:700;font-size:clamp(22px,3.5vw,32px);color:#fff;opacity:0;animation:sa-result-fade 48s infinite}
.sa-result-slide em{display:block;font-style:normal;font-weight:500;font-size:.6em;color:#D97706;margin-left:0}
.sa-result-slide:nth-child(1){animation-delay:0s}
.sa-result-slide:nth-child(2){animation-delay:3s}
.sa-result-slide:nth-child(3){animation-delay:6s}
.sa-result-slide:nth-child(4){animation-delay:9s}
.sa-result-slide:nth-child(5){animation-delay:12s}
.sa-result-slide:nth-child(6){animation-delay:15s}
.sa-result-slide:nth-child(7){animation-delay:18s}
.sa-result-slide:nth-child(8){animation-delay:21s}
.sa-result-slide:nth-child(9){animation-delay:24s}
.sa-result-slide:nth-child(10){animation-delay:27s}
.sa-result-slide:nth-child(11){animation-delay:30s}
.sa-result-slide:nth-child(12){animation-delay:33s}
.sa-result-slide:nth-child(13){animation-delay:36s}
.sa-result-slide:nth-child(14){animation-delay:39s}
.sa-result-slide:nth-child(15){animation-delay:42s}
.sa-result-slide:nth-child(16){animation-delay:45s}
@keyframes sa-result-fade{0%,5%{opacity:0;transform:translateY(10px)}1%,4%{opacity:1;transform:translateY(0)}6%,100%{opacity:0}}
.sa-results-link{display:inline-block;font-family:Poppins,sans-serif;font-weight:600;font-size:15px;color:#D97706;text-decoration:none;border-bottom:1px solid transparent;transition:border-color .2s}
.sa-results-link:hover{border-bottom-color:#D97706}

/* Results ticker casing and placement standard, 2026-06-15. */
.sa-result-slide em{
  text-transform:uppercase;
  letter-spacing:.04em;
  font-weight:700;
}

Cancel