Skip to main content

Features: stats

Simple 3-cols with brand primary colour

Open this 3 cols features stats example in new window
Copy 3 cols features stats code 
<!-- Features -->
<div class="max-w-[85rem] px-4 py-10 sm:px-6 lg:px-8 lg:py-14 mx-auto">
  <!-- Grid -->
  <div class="mt-20 grid gap-6 grid-cols-2 sm:gap-12 lg:grid-cols-3 lg:gap-8">
    <!-- Stats -->
    <div>
      <h4 class="text-lg sm:text-xl font-semibold text-hs2-text ">Lorem ipsum dolor sit amet</h4>
      <p class="mt-2 sm:mt-3 text-4xl sm:text-6xl font-bold text-hs2-primary">99.95%</p>
      <p class="mt-1 text-hs2-text-light">consectetur adipiscing elit</p>
    </div>
    <!-- End Stats -->

    <!-- Stats -->
    <div>
      <h4 class="text-lg sm:text-xl font-semibold text-hs2-text ">Lorem ipsum dolor sit amet</h4>
      <p class="mt-2 sm:mt-3 text-4xl sm:text-6xl font-bold text-hs2-primary">2,000+</p>
      <p class="mt-1 text-hs2-text-light">consectetur adipiscing elit</p>
    </div>
    <!-- End Stats -->

    <!-- Stats -->
    <div>
      <h4 class="text-lg sm:text-xl font-semibold text-hs2-text ">Lorem ipsum dolor sit amet</h4>
      <p class="mt-2 sm:mt-3 text-4xl sm:text-6xl font-bold text-hs2-primary">85%</p>
      <p class="mt-1 text-hs2-text-light">consectetur adipiscing elit</p>
    </div>
    <!-- End Stats -->
  </div>
  <!-- End Grid -->
</div>
<!-- End Features -->
Close 3 cols features stats code

One main with three follow ups

Open this one main three follow ups features stats example in new window
Copy one main three follow ups features stats code 
<!-- Features -->
<div class="max-w-[85rem] px-4 py-10 sm:px-6 lg:px-8 lg:py-14 mx-auto">
  <!-- Grid -->
  <div class="grid items-center lg:grid-cols-12 gap-6 lg:gap-12">
    <div class="lg:col-span-4">
      <!-- Stats -->
      <div class="lg:pr-6 xl:pr-12">
        <p class="text-6xl font-bold leading-10 text-hs2-primary">
          92%
          <span class="ml-1 inline-flex items-center gap-x-1 bg-gray-200 font-medium text-hs2-text text-xs leading-4 rounded-full py-0.5 px-2 ">
            <svg class="w-3 h-3" xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" viewBox="0 0 16 16">
              <path d="M10.067.87a2.89 2.89 0 0 0-4.134 0l-.622.638-.89-.011a2.89 2.89 0 0 0-2.924 2.924l.01.89-.636.622a2.89 2.89 0 0 0 0 4.134l.637.622-.011.89a2.89 2.89 0 0 0 2.924 2.924l.89-.01.622.636a2.89 2.89 0 0 0 4.134 0l.622-.637.89.011a2.89 2.89 0 0 0 2.924-2.924l-.01-.89.636-.622a2.89 2.89 0 0 0 0-4.134l-.637-.622.011-.89a2.89 2.89 0 0 0-2.924-2.924l-.89.01-.622-.636zm.287 5.984-3 3a.5.5 0 0 1-.708 0l-1.5-1.5a.5.5 0 1 1 .708-.708L7 8.793l2.646-2.647a.5.5 0 0 1 .708.708z" />
            </svg>
            +7% this month
          </span>
        </p>
        <p class="mt-2 sm:mt-3 text-hs2-text-light">lorem ipsum dolor sit amet, consectetur adipiscing elit</p>
      </div>
      <!-- End Stats -->
    </div>
    <!-- End Col -->

    <div class="lg:col-span-8 relative lg:before:absolute lg:before:top-0 lg:before:-left-12 lg:before:w-px lg:before:h-full lg:before:bg-gray-200 lg:before:">
      <div class="grid gap-6 grid-cols-2 md:grid-cols-4 lg:grid-cols-3 sm:gap-8">
        <!-- Stats -->
        <div>
          <p class="text-3xl font-semibold text-hs2-primary">99.95%</p>
          <p class="mt-1 text-hs2-text-light">sed do eiusmod tempor incididunt</p>
        </div>
        <!-- End Stats -->

        <!-- Stats -->
        <div>
          <p class="text-3xl font-semibold text-hs2-primary">2,000+</p>
          <p class="mt-1 text-hs2-text-light">sed do eiusmod tempor incididunt</p>
        </div>
        <!-- End Stats -->

        <!-- Stats -->
        <div>
          <p class="text-3xl font-semibold text-hs2-primary">85%</p>
          <p class="mt-1 text-hs2-text-light">sed do eiusmod tempor incididunt</p>
        </div>
        <!-- End Stats -->
      </div>
    </div>
    <!-- End Col -->
  </div>
  <!-- End Grid -->
</div>
<!-- End Features -->
Close one main three follow ups features stats code