service-features-row

Summary

A four-column row directly under the hero that surfaces the storefront's value props — Free Delivery, Money Return, 24/7 Online Support, Reliable. Each item is an inline-SVG icon over a one-line title and a one-line subtitle.

HTML structure (minimal)

<section class="furniture-service pt-100 pb-100">
  <div class="container">
    <div class="row g-4">
      <div class="col-xl-3 col-lg-3 col-md-6 col-sm-6">
        <div class="furniture-service__item">
          <div class="fsr-icon">
            <svg width="80" height="63" viewBox="0 0 80 63"><!-- truck path --></svg>
          </div>
          <div class="frs-content">
            <h6>Free Delivery</h6>
            <p>Free shipping on all order</p>
          </div>
        </div>
      </div>
      <!-- three more identical col-xl-3 cards -->
    </div>
  </div>
</section>

Key SCSS tokens

.furniture-service {
  padding: 100px 0;
  &__item {
    display: flex;
    align-items: center;
    gap: 20px;
  }
  .fsr-icon svg path {
    fill: var(--clr-theme-primary);
  }
  .frs-content {
    h6 { font-weight: 600; margin-bottom: 4px; }
    p { color: var(--clr-text-body); }
  }
}

Notable details

• All four icons are inline SVGs sharing the same #b18b5e fill — one accent colour change rebrands the whole row instantly.
• Bootstrap's col-md-6 col-sm-6 keeps the row two-up on tablets so the content never collapses to a stacked column too early.
• No animation, no JS — this is a pure layout strip you can lift wholesale.

Use when

• E-commerce homes that need a trust strip directly below the hero.
• SaaS or service landing pages that want a quick value-prop row before deeper sections.
• Footer-adjacent benefit summaries on long product pages.

Caveats

• The SVG paths are large inline blobs; consider extracting to <use> references if you reuse the row in many places.