HTML Templates •
Last updated: January 21, 2026

Services Section

Brandflow HTML Site Template

Table of Contents

The Services section showcases what you offer. In Brandflow, this is often a grid of cards or a list with icons.

Structure

Look for <section class="service-area ...">.

Service Items

Each service is typically a <div> with a class like service-item.

   <div class="service-item ...">
      <div class="icon">...</div>
      <h3>Service Title</h3>
      <p>Description...</p>
   </div>

Customizing Icons

Brandflow uses SVG icons directly in the HTML. To change an icon:

  1. Find the <svg> tag inside the service item.
  2. Replace the entire <svg>...</svg> block with a new SVG code (e.g., from Heroicons or Phosphor Icons).
  3. Ensure the new SVG has fill="white" or fill="currentColor" and appropriate width/height classes to match the design.

Adding a Service

  1. Copy an entire service-item div.
  2. Paste it into the grid container (usually grid-cols-1 or grid-cols-3).
  3. Update the content.

Animations

Service items often have staggered animations.

  • Item 1: data-aos-duration="800"
  • Item 2: data-aos-duration="1000"
  • Item 3: data-aos-duration="1200" Increase the duration by 200ms for each subsequent item to create a smooth “waterfall” loading effect.