Facts

These sections present important data or statistics in a clear and impactful way.

Overview

"Facts" components present important data or statistics in a clear and impactful way. These sections typically use bold numbers, icons, or visuals to convey key insights, helping users quickly grasp essential information and understand the significance of the data.

Examples

Below are a few examples of “Facts” sections.

Example 1

Facts

Key Highlights

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

1,200

Active Users

150+

Partners

500+

Awards

800+

Deliveries

<section class="bg-body py-5">
  <div class="container">
      <div class="row align-items-center">
          <div class="col-lg-4">
              <h1 class="text-primary text-uppercase fw-semibold fs-5 mb-2">Facts</h1>
              <h2 class="mb-2">Key Highlights</h2>
              <p class="text-muted mb-0">
              Lorem ipsum dolor sit amet, consectetur adipiscing elit.
              </p>
          </div>
          <div class="col-lg-8 mt-5 mt-lg-0">
              <div class="row g-4">
                  <div class="col-6 col-sm-3 text-center">
                      <div class="d-inline-flex text-primary bg-secondary rounded-4 py-2 px-3">
                          <i class="ri-user-fill fs-2"></i>
                      </div>
                      <h5 class="h4 mt-3 mb-2">1,200</h5>
                      <p class="text-muted mb-0">Active Users</p>
                  </div>
                  <div class="col-6 col-sm-3 text-center">
                      <div class="d-inline-flex text-primary bg-secondary rounded-4 py-2 px-3">
                          <i class="ri-shake-hands-fill fs-2"></i>
                      </div>
                      <h5 class="h4 mt-3 mb-2">150+</h5>
                      <p class="text-muted mb-0">Partners</p>
                  </div>
                  <div class="col-6 col-sm-3 text-center">
                      <div class="d-inline-flex text-primary bg-secondary rounded-4 py-2 px-3">
                          <i class="ri-award-fill fs-2"></i>
                      </div>
                      <h5 class="h4 mt-3 mb-2">500+</h5>
                      <p class="text-muted mb-0">Awards</p>
                  </div>
                  <div class="col-6 col-sm-3 text-center">
                      <div class="d-inline-flex text-primary bg-secondary rounded-4 py-2 px-3">
                          <i class="ri-box-3-fill fs-2"></i>
                      </div>
                      <h5 class="h4 mt-3 mb-2">800+</h5>
                      <p class="text-muted mb-0">Deliveries</p>
                  </div>
              </div>
          </div>
      </div>
  </div>
</section>

Example 2

1,200+

Active Users

150+

Partners

500+

Awards

800+

Deliveries

<section class="bg-body py-5">
  <div class="container">
      <div class="text-bg-primary rounded-4 p-4">
          <div class="row g-4">
              <div class="col-6 col-md-3 text-center">
                  <i class="ri-user-fill fs-1"></i>
                  <h5 class="h3 my-2">1,200<span class="text-warning">+</span></h5>
                  <p class="mb-0">Active Users</p>
              </div>
              <div class="col-6 col-md-3 text-center">
                  <i class="ri-shake-hands-fill fs-1"></i>
                  <h5 class="h3 my-2">150<span class="text-warning">+</span></h5>
                  <p class="mb-0">Partners</p>
              </div>
              <div class="col-6 col-md-3 text-center">
                  <i class="ri-award-fill fs-1"></i>
                  <h5 class="h3 my-2">500<span class="text-warning">+</span></h5>
                  <p class="mb-0">Awards</p>
              </div>
              <div class="col-6 col-md-3 text-center">
                  <i class="ri-box-3-fill fs-1"></i>
                  <h5 class="h3 my-2">800<span class="text-warning">+</span></h5>
                  <p class="mb-0">Deliveries</p>
              </div>
          </div>
      </div>
  </div>
</section>

Example 3

Facts

Here are some of the most important and standout highlights that define who we are

1,200+

Active Users

150+

Partners

500+

Awards

800+

Deliveries

<section class="bg-body py-5">
  <div class="container">
      <div class="col-lg-8 offset-lg-2 text-md-center">
          <h1 class="text-primary text-uppercase fw-semibold fs-5">Facts</h1>
          <h2 class="mb-4">Here are some of the most important and standout highlights that define who we are</h2>
      </div>
      <div class="row g-4">
          <div class="col-6 col-md-3 text-center">
              <i class="ri-user-fill text-primary display-5"></i>
              <h5 class="h3 my-2">1,200+</h5>
              <p class="text-muted mb-0">Active Users</p>
          </div>
          <div class="col-6 col-md-3 text-center">
              <i class="ri-shake-hands-fill text-primary display-5"></i>
              <h5 class="h3 my-2">150+</h5>
              <p class="text-muted mb-0">Partners</p>
          </div>
          <div class="col-6 col-md-3 text-center">
              <i class="ri-award-fill text-primary display-5"></i>
              <h5 class="h3 my-2">500+</h5>
              <p class="text-muted mb-0">Awards</p>
          </div>
          <div class="col-6 col-md-3 text-center">
              <i class="ri-box-3-fill text-primary display-5"></i>
              <h5 class="h3 my-2">800+</h5>
              <p class="text-muted mb-0">Deliveries</p>
          </div>
      </div>
  </div>
</section>

Example 4

1,200+

Active Users

150+

Partners

500+

Awards

800+

Deliveries

<section class="bg-body py-5">
  <div class="container">
      <div class="row text-center g-3">
          <div class="col-sm-6 col-lg-3">
              <div class="card bg-secondary shadow border-0 h-100">
                  <div class="card-body">
                      <i class="ri-user-fill text-primary display-5"></i>
                      <h5 class="h3 my-2">1,200+</h5>
                      <p class="mb-0">Active Users</p>
                  </div>
              </div>
          </div>
          <div class="col-sm-6 col-lg-3">
              <div class="card bg-secondary shadow border-0 h-100">
                  <div class="card-body">
                      <i class="ri-shake-hands-fill text-primary display-5"></i>
                      <h5 class="h3 my-2">150+</h5>
                      <p class="mb-0">Partners</p>
                  </div>
              </div>
          </div>
          <div class="col-sm-6 col-lg-3">
              <div class="card bg-secondary shadow border-0 h-100">
                  <div class="card-body">
                      <i class="ri-award-fill text-primary display-5"></i>
                      <h5 class="h3 my-2">500+</h5>
                      <p class="mb-0">Awards</p>
                  </div>
              </div>
          </div>
          <div class="col-sm-6 col-lg-3">
              <div class="card bg-secondary shadow border-0 h-100">
                  <div class="card-body">
                      <i class="ri-box-3-fill text-primary display-5"></i>
                      <h5 class="h3 my-2">800+</h5>
                      <p class="mb-0">Deliveries</p>
                  </div>
              </div>
          </div>
      </div>
  </div>
</section>

Example 5

Facts

These are some of the key highlights about us

Lorem ipsum dolor sit amet, consectetur adipiscing elit libero corpori digniss.

1,200+

Active Users

150+

Partners

500+

Awards

800+

Deliveries

<section class="bg-body py-5">
  <div class="container">
      <div class="row align-items-center">
          <div class="col-lg-6">
              <h1 class="text-primary text-uppercase fw-semibold fs-5 mb-2">Facts</h1>
              <h2 class="mb-2">These are some of the key highlights about us</h2>
              <p class="text-muted mb-3">
              Lorem ipsum dolor sit amet, consectetur adipiscing elit libero corpori digniss.
              </p>
              <button class="btn btn-lg btn-outline-secondary">Explore more<i class="ri-arrow-right-line ms-2"></i></button>
          </div>
          <div class="col-lg-6 mt-4 mt-lg-0">
              <div class="row text-center g-3">
                  <div class="col-sm-6">
                      <div class="card bg-secondary shadow border-0 h-100">
                          <div class="card-body">
                              <i class="ri-user-fill text-primary display-5"></i>
                              <h5 class="h3 my-2">1,200+</h5>
                              <p class="mb-0">Active Users</p>
                          </div>
                      </div>
                  </div>
                  <div class="col-sm-6">
                      <div class="card bg-secondary shadow border-0 h-100">
                          <div class="card-body">
                              <i class="ri-shake-hands-fill text-primary display-5"></i>
                              <h5 class="h3 my-2">150+</h5>
                              <p class="mb-0">Partners</p>
                          </div>
                      </div>
                  </div>
                  <div class="col-sm-6">
                      <div class="card bg-secondary shadow border-0 h-100">
                          <div class="card-body">
                              <i class="ri-award-fill text-primary display-5"></i>
                              <h5 class="h3 my-2">500+</h5>
                              <p class="mb-0">Awards</p>
                          </div>
                      </div>
                  </div>
                  <div class="col-sm-6">
                      <div class="card bg-secondary shadow border-0 h-100">
                          <div class="card-body">
                              <i class="ri-box-3-fill text-primary display-5"></i>
                              <h5 class="h3 my-2">800+</h5>
                              <p class="mb-0">Deliveries</p>
                          </div>
                      </div>
                  </div>
              </div>
          </div>
      </div>
  </div>
</section>

Example 6

Facts

Some facts about us

Lorem ipsum dolor sit amet, consectetur adipiscing elit libero corpori digniss.

1,200+

Active Users

150+

Partners

Facts Image 
<section class="bg-body py-5">
  <div class="container">
      <div class="row align-items-center">
          <div class="col-lg-6">
              <h1 class="text-primary text-uppercase fw-semibold fs-5 mb-2">Facts</h1>
              <h2 class="mb-2">Some facts about us</h2>
              <p class="text-muted mb-4">
              Lorem ipsum dolor sit amet, consectetur adipiscing elit libero corpori digniss.
              </p>
              <div class="row">
                  <div class="col-6">
                      <h5 class="h3">1,200+</h5>
                      <p class="text-muted mb-0">Active Users</p>
                  </div>
                  <div class="col-6">
                      <h5 class="h3">150+</h5>
                      <p class="text-muted mb-0">Partners</p>
                  </div>
              </div>
          </div>
          <div class="col-lg-5 offset-lg-1 mt-4 mt-lg-0">
              <img src="https://placehold.co/540x540/31343C/EEE?text=Placeholder+Image" class="img-fluid rounded-4" alt="Facts Image">
          </div>
      </div>
  </div>
</section>
Quick Links
Home Docs
Admin
Admin Dashboard Example
Themes
Website Example (Classic)
Website Example (Modern)
Dog Breeder 1 (Beagle)
Dog Breeder 2 (Golden Retriever)
Dog Breeder 3 (French Bulldog)
Dog Breeder 4 (Poodle)
Dog Breeder 5 (German Shepherd)
Dog Breeder 6 (Yorkshire Terrier)
Cat Breeder 1 (Persian)
Cat Breeder 2 (Siamese)
Cat Breeder 3 (Bengal)
Cat Breeder 4 (Abyssinian)
Cat Breeder 5 (Himalayan)
HOA 1
HOA 2
HOA 3
Real Estate 1
Real Estate 2
Other
AsteroBuilder
AsteroDigital
Paanstation