Documentation v1.0.0

About Us

---
title: About Us
description: These sections provide an overview of a company, organization, or individual.
toc: false
---

## Overview

"About Us" blocks are sections on websites or applications that provide an overview of a company, organization, or individual. These blocks typically include key information such as the mission, vision, values, history, and team behind the entity, helping users understand the purpose and background of the brand or service.

## Examples

Below are a few examples of “About Us” sections.

### Example 1

<Example
  html={`<section class="bg-body py-5">
    <div class="container">
        <div class="row align-items-center gx-4">
            <div class="col-lg-7">
                <h2 class="mb-2">About Us</h2>
                <p class="lead mb-2">Lorem ipsum dolor sit amet consect adipis elit.</p>
                <p class="mb-4">
                Lorem ipsum dolor sit amet consectetur adipisicing elit. Dolorum quibusdam, libero
                corporis dignissimos provident nulla nemo! Quam impedit dolores vel sit amet consectetur
                adipisicing elit.
                </p>
                <div class="row g-4">
                    <div class="col-sm-6">
                        <i class="ri-shield-check-line text-primary bg-secondary rounded-3 fs-2 p-2"></i>
                        <h5 class="mt-3 mb-2">Top-notch security</h5>
                        <p class="mb-0">Lorem ipsum dolor sit amet.</p>
                    </div>
                    <div class="col-sm-6">
                        <i class="ri-customer-service-line text-primary bg-secondary rounded-3 fs-2 p-2"></i>
                        <h5 class="mt-3 mb-2">24/7 customer support</h5>
                        <p class="mb-0">Lorem ipsum dolor sit amet.</p>
                    </div>
                </div>
            </div>
            <div class="col-lg-5 mt-4 mt-lg-0">
                <img
                src="https://placehold.co/540x540/31343C/EEE?text=Placeholder"
                class="img-fluid rounded"
                alt="About Us"
                />
            </div>
        </div>
    </div>
</section>`}
/>

### Example 2

### Example 3

<Example
  html={`<section class="bg-body py-5">
    <div class="container">
        <div class="row align-items-center gx-4">
            <div class="col-lg-7">
                <h1 class="text-primary text-uppercase fw-semibold fs-6 mb-2">About Us</h1>
                <h2 class="mb-2">Who are we?</h2>
                <p class="mb-4">
                Lorem ipsum dolor sit amet consectetur adipisicing elit. Dolorum quibusdam, libero
                corporis dignissimos provident nulla nemo! Quam impedit dolores vel sit amet consectetur
                adipisicing elit.
                </p>
                <div class="accordion accordion-flush accordion-icon" id="accordionFlushExample" role="tablist" aria-multiselectable="true">
                    <div class="accordion-item border rounded mb-3">
                        <h2 class="accordion-header">
                        <button class="accordion-button collapsed rounded shadow-none" type="button" data-bs-toggle="collapse" data-bs-target="#flush-collapseOne" aria-expanded="false" aria-controls="flush-collapseOne">
                            <i class="ri-shield-check-line me-2"></i>Top-notch security
                        </button>
                        </h2>
                        <div id="flush-collapseOne" class="accordion-collapse collapse" data-bs-parent="#accordionFlushExample">
                        <div class="accordion-body">
                            Lorem ipsum dolor sit amet consectetur adipisicing elit.
                        </div>
                        </div>
                    </div>
                    <div class="accordion-item border rounded mb-3">
                        <h2 class="accordion-header">
                        <button class="accordion-button collapsed rounded shadow-none" type="button" data-bs-toggle="collapse" data-bs-target="#flush-collapseTwo" aria-expanded="false" aria-controls="flush-collapseTwo">
                            <i class="ri-customer-service-line me-2"></i>24/7 customer support
                        </button>
                        </h2>
                        <div id="flush-collapseTwo" class="accordion-collapse collapse" data-bs-parent="#accordionFlushExample">
                        <div class="accordion-body">
                            Lorem ipsum dolor sit amet consectetur adipisicing elit.
                        </div>
                        </div>
                    </div>
                    <div class="accordion-item border rounded mb-3">
                        <h2 class="accordion-header">
                        <button class="accordion-button collapsed rounded shadow-none" type="button" data-bs-toggle="collapse" data-bs-target="#flush-collapseThree" aria-expanded="false" aria-controls="flush-collapseThree">
                            <i class="ri-global-line me-2"></i>Multi-language interface
                        </button>
                        </h2>
                        <div id="flush-collapseThree" class="accordion-collapse collapse" data-bs-parent="#accordionFlushExample">
                        <div class="accordion-body">
                            Lorem ipsum dolor sit amet consectetur adipisicing elit.
                        </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="col-lg-5 mt-4 mt-lg-0">
                <img
                src="https://placehold.co/540x540/31343C/EEE?text=Placeholder"
                class="img-fluid rounded"
                alt="About Us"
                />
            </div>
        </div>
    </div>
</section>`}
/>

### Example 4

<Example
  html={`<section class="bg-body py-5">
    <div class="container">
        <div class="row align-items-center gx-4">
            <div class="col-lg-5">
                <img
                src="https://placehold.co/540x540/31343C/EEE?text=Placeholder"
                class="img-fluid rounded"
                alt="About Us"
                />
            </div>
            <div class="col-lg-6 offset-lg-1 mt-4 mt-lg-0">
                <h1 class="text-primary text-uppercase fw-semibold fs-6 mb-2">About Us</h1>
                <h2 class="mb-2">What we do?</h2>
                <p class="mb-4">
                Lorem ipsum dolor sit amet consectetur adipisicing elit. Dolorum quibusdam, libero
                corporis dignissimos provident nulla nemo! Quam impedit dolores vel sit amet consectetur
                adipisicing elit.
                </p>
                <div>
                    <label for="progressbar-maintenance" class="form-label">Maintenance</label>
                    <div class="progress mb-2" id="progressbar-maintenance" role="progressbar" aria-label="progress bar" aria-valuenow="85" aria-valuemin="0" aria-valuemax="100" style="height: 12px">
                        <div class="progress-bar progress-bar-striped progress-bar-animated" style="width: 85%"></div>
                    </div>
                    <label for="progressbar-security" class="form-label">Security</label>
                    <div class="progress mb-2" id="progressbar-security" role="progressbar" aria-label="progress bar" aria-valuenow="90" aria-valuemin="0" aria-valuemax="100" style="height: 12px">
                        <div class="progress-bar progress-bar-striped progress-bar-animated" style="width: 90%"></div>
                    </div>
                    <label for="progressbar-updates" class="form-label">Updates</label>
                    <div class="progress mb-2" id="progressbar-updates" role="progressbar" aria-label="progress bar" aria-valuenow="85" aria-valuemin="0" aria-valuemax="100" style="height: 12px">
                        <div class="progress-bar progress-bar-striped progress-bar-animated" style="width: 85%"></div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</section>`}
/>

### Example 5

<Example
  html={`<section class="bg-body py-5">
    <div class="container">
        <div class="row align-items-center gx-4">
            <div class="col-lg-6">
                <img
                src="https://placehold.co/540x540/31343C/EEE?text=Placeholder"
                class="img-fluid rounded"
                alt="About Us"
                />
            </div>
            <div class="col-lg-6 mt-4 mt-lg-0">
                <i class="ri-shield-user-fill text-primary fs-1"></i>
                <h2 class="mb-2">About Us</h2>
                <p class="mb-4">
                Lorem ipsum dolor sit amet consectetur adipisicing elit. Quam impedit dolores vel sit amet consectetur adipisicing elit.
                </p>
                <div class="row g-2 mb-4">
                    <div class="col-md-6 d-flex align-items-center">
                        <i class="ri-shield-check-line text-primary fs-2 mb-0 me-3"></i>
                        <h6 class="mb-2">Top-notch security</h6>
                    </div>
                    <div class="col-md-6 d-flex align-items-center">
                        <i class="ri-loop-left-line text-primary fs-2 mb-0 me-3"></i>
                        <h6 class="mb-2">Regular updates</h6>
                    </div>
                    <div class="col-md-6 d-flex align-items-center">
                        <i class="ri-customer-service-line text-primary fs-2 mb-0 me-3"></i>
                        <h6 class="mb-2">24/7 customer support</h6>
                    </div>
                    <div class="col-md-6 d-flex align-items-center">
                        <i class="ri-global-line text-primary fs-2 mb-0 me-3"></i>
                        <h6 class="mb-2">Multi-language interface</h6>
                    </div>
                </div>
                <button class="btn btn-lg btn-outline-secondary">Learn more<i class="ri-arrow-right-line ms-2"></i></button>
            </div>
        </div>
    </div>
</section>`}
/>

### Example 6

<Example
  html={`<section class="bg-body py-5">
    <div class="container">
        <div class="row align-items-center gx-4 mb-5">
            <div class="col-lg-7">
                <h1 class="text-primary text-uppercase fw-semibold fs-6 mb-2">About Us</h1>
                <h2 class="mb-2">Who are we?</h2>
                <p class="mb-3">
                Lorem ipsum dolor sit amet consectetur adipisicing elit. Dolorum quibusdam, libero
                corporis dignissimos provident nulla nemo!
                </p>
                <button class="btn btn-lg btn-primary">Learn more<i class="ri-arrow-right-line ms-2"></i></button>
            </div>
            <div class="col-lg-5 mt-5 mt-lg-0">
                <img
                src="https://placehold.co/540x540/31343C/EEE?text=Placeholder"
                class="img-fluid rounded"
                alt="About Us"
                />
            </div>
        </div>
        <div class="row g-3">
            <div class="col-lg-4">
                <div class="card card-hover rounded">
                    <div class="card-body d-flex align-items-center gap-3">
                        <i class="ri-shield-check-line text-primary fs-1 mb-0"></i>
                        <h5 class="mb-0">Top-notch security</h5>
                    </div>
                </div>
            </div>
            <div class="col-lg-4">
                <div class="card card-hover rounded">
                    <div class="card-body d-flex align-items-center gap-3">
                        <i class="ri-customer-service-line text-primary fs-1 mb-0"></i>
                        <h5 class="mb-0">24/7 customer support</h5>
                    </div>
                </div>
            </div>
            <div class="col-lg-4">
                <div class="card card-hover rounded">
                    <div class="card-body d-flex align-items-center gap-3">
                        <i class="ri-loop-left-line text-primary fs-1 mb-0"></i>
                        <h5 class="mb-0">Regular updates</h5>
                    </div>
                </div>
            </div>
        </div>
    </div>
</section>`}
/>

### Example 7

<Example
  html={`<section class="bg-body py-5">
    <div class="container">
      <img
        src="https://placehold.co/1200x440/31343C/EEE?text=Placeholder+Image+1200x440"
        class="object-fit-cover rounded w-100 mb-4"
        alt="About Us"
      />
      <h1 class="fw-semibold mb-3">
        Our story, our passion, and <span class="text-primary">our purpose</span>
      </h1>
      <div class="row gx-5">
        <div class="col-lg-6 mb-4 mb-lg-0">
          <p class="mb-4">
            Lorem ipsum dolor sit amet consectetur adipisicing elit. Dolorum quibusdam, libero
            corporis dignissimos provident nulla nemo! Quam impedit dolores vel sit amet consectetur
            adipisicing elit.
          </p>
          <div>
            <button class="btn btn-lg btn-primary me-1">Start now</button>
            <button class="btn btn-lg btn-outline-secondary">Learn more</button>
          </div>
        </div>
        <div class="col-lg-6">
          <div class="row g-3">
            <div class="col-md-6">
              <div class="card rounded p-3">
                <div class="card-body d-flex align-items-center gap-3 p-0">
                  <i
                    class="ri-shield-check-line text-primary bg-secondary rounded fs-2 py-2 px-3"
                  ></i>
                  <h5 class="card-title my-0">Top-notch security</h5>
                </div>
              </div>
            </div>
            <div class="col-md-6">
              <div class="card rounded p-3">
                <div class="card-body d-flex align-items-center gap-3 p-0">
                  <i
                    class="ri-customer-service-line text-primary bg-secondary rounded fs-2 py-2 px-3"
                  ></i>
                  <h5 class="card-title my-0">24/7 support</h5>
                </div>
              </div>
            </div>
            <div class="col-md-6">
              <div class="card rounded p-3">
                <div class="card-body d-flex align-items-center gap-3 p-0">
                  <i
                    class="ri-loop-left-line text-primary bg-secondary rounded fs-2 py-2 px-3"
                  ></i>
                  <h5 class="card-title my-0">Regular updates</h5>
                </div>
              </div>
            </div>
            <div class="col-md-6">
              <div class="card rounded p-3">
                <div class="card-body d-flex align-items-center gap-3 p-0">
                  <i class="ri-global-line text-primary bg-secondary rounded fs-2 py-2 px-3"
                  ></i>
                  <h5 class="card-title my-0">Multi-language</h5>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
</section>`}
/>

### Example 8

<Example
  html={`<section class="bg-body py-5">
    <div class="container">
      <div class="row align-items-center">
        <div class="col-xl-6">
          <h1 class="text-primary text-uppercase fw-semibold fs-5 mb-2">About Us</h1>
          <h2 class="mb-2">Driven by passion, built on trust</h2>
          <p class="mb-3">Lorem ipsum dolor sit amet consect adipisi elit. Rem exercit accusan aut nostrum eligen ea odit commod id quae sint magnam velit dolores consect dolorib repellat esse dignissi.</p>
          <button class="btn btn-lg btn-primary">Get started<i class="ri-arrow-right-line ms-2"></i></button>
        </div>
        <div class="col-xl-6 mt-5 mt-xl-0">
          <div class="row g-3">
            <div class="col-sm-6">
              <figure class="img-grayscale h-100">
                <a href="#">
                  <img
                    src="https://placehold.co/540x540/747ED1/FFF?text=Placeholder"
                    class="object-fit-cover rounded w-100 h-100"
                    alt="About Us"
                  />
                </a>
              </figure>
            </div>
            <div class="col-sm-6">
              <div class="card text-center border rounded-3 h-100">
                <div class="card-body d-flex align-items-center">
                  <div>
                    <i class="ri-shield-check-line text-primary bg-secondary rounded bg-secondary fs-1 p-2 "></i>
                    <h5 class="my-2">Top-notch security</h5>
                    <p class="mb-0 text-justify">Lorem ipsum dolor sit amet consectetur adipisicing elit. Exercit accusan aut nostrum eligen ea odit commod id quae sint magnam velit dolores consect.</p>
                  </div>
                </div>
              </div>
            </div>
            <div class="col-sm-6">
              <div class="card text-center border rounded-3 h-100">
                <div class="card-body d-flex align-items-center">
                  <div>
                    <i class="ri-global-line text-primary bg-secondary rounded bg-secondary fs-1 p-2 "></i>
                    <h5 class="my-2">Multi-language interface</h5>
                    <p class="mb-0 text-justify">Lorem ipsum dolor sit amet consectetur adipisicing elit. Exercit accusan aut nostrum eligen ea odit commod id quae sint magnam velit dolores consect.</p>
                  </div>
                </div>
              </div>
            </div>
            <div class="col-sm-6">
              <figure class="img-grayscale h-100">
                <a href="#">
                  <img
                    src="https://placehold.co/540x540/747ED1/FFF?text=Placeholder"
                    class="object-fit-cover rounded w-100 h-100"
                    alt="About Us"
                  />
                </a>
              </figure>
            </div>
          </div>
        </div>
      </div>
    </div>
</section>`}
/>

These sections provide an overview of a company, organization, or individual.

Overview

Examples

Below are a few examples of “About Us” sections.

Example 1

About Us

Lorem ipsum dolor sit amet consect adipis elit.

Lorem ipsum dolor sit amet consectetur adipisicing elit. Dolorum quibusdam, libero corporis dignissimos provident nulla nemo! Quam impedit dolores vel sit amet consectetur adipisicing elit.

Top-notch security

Lorem ipsum dolor sit amet.

24/7 customer support

Lorem ipsum dolor sit amet.

<section class="bg-body py-5">
  <div class="container">
      <div class="row align-items-center gx-4">
          <div class="col-lg-7">
              <h2 class="mb-2">About Us</h2>
              <p class="lead mb-2">Lorem ipsum dolor sit amet consect adipis elit.</p>
              <p class="mb-4">
              Lorem ipsum dolor sit amet consectetur adipisicing elit. Dolorum quibusdam, libero
              corporis dignissimos provident nulla nemo! Quam impedit dolores vel sit amet consectetur
              adipisicing elit.
              </p>
              <div class="row g-4">
                  <div class="col-sm-6">
                      <i class="ri-shield-check-line text-primary bg-secondary rounded-3 fs-2 p-2"></i>
                      <h5 class="mt-3 mb-2">Top-notch security</h5>
                      <p class="mb-0">Lorem ipsum dolor sit amet.</p>
                  </div>
                  <div class="col-sm-6">
                      <i class="ri-customer-service-line text-primary bg-secondary rounded-3 fs-2 p-2"></i>
                      <h5 class="mt-3 mb-2">24/7 customer support</h5>
                      <p class="mb-0">Lorem ipsum dolor sit amet.</p>
                  </div>
              </div>
          </div>
          <div class="col-lg-5 mt-4 mt-lg-0">
              <img
              src="https://placehold.co/540x540/31343C/EEE?text=Placeholder"
              class="img-fluid rounded"
              alt="About Us"
              />
          </div>
      </div>
  </div>
</section>

Example 2

About Us

Learn more about us

Lorem ipsum dolor sit amet consectetur adipisicing elit. Dolorum quibusdam, libero corporis dignissimos provident nulla nemo!

Top-notch security

Lorem ipsum dolor sit amet.

24/7 customer support

Lorem ipsum dolor sit amet.

Regular updates

Lorem ipsum dolor sit amet.

Multi-language interface

Lorem ipsum dolor sit amet.

<section class="bg-body py-5">
  <div class="container">
      <div class="row align-items-center gx-4">
          <div class="col-lg-7">
              <h1 class="text-primary text-uppercase fw-semibold fs-6 mb-2">About Us</h1>
              <h2 class="mb-2">Learn more about us</h2>
              <p class="mb-4">
              Lorem ipsum dolor sit amet consectetur adipisicing elit. Dolorum quibusdam, libero
              corporis dignissimos provident nulla nemo!
              </p>
              <div class="row g-4">
                  <div class="col-md-6 d-flex align-items-center">
                      <i class="ri-shield-check-line text-primary fs-2 mb-0 me-3"></i>
                      <div>
                          <h5 class="mb-2">Top-notch security</h5>
                          <p class="mb-0">Lorem ipsum dolor sit amet.</p>
                      </div>
                  </div>
                  <div class="col-md-6 d-flex align-items-center">
                      <i class="ri-customer-service-line text-primary fs-2 mb-0 me-3"></i>
                      <div>
                          <h5 class="mb-2">24/7 customer support</h5>
                          <p class="mb-0">Lorem ipsum dolor sit amet.</p>
                      </div>
                  </div>
                  <div class="col-md-6 d-flex align-items-center">
                      <i class="ri-loop-left-line text-primary fs-2 mb-0 me-3"></i>
                      <div>
                          <h5 class="mb-2">Regular updates</h5>
                          <p class="mb-0">Lorem ipsum dolor sit amet.</p>
                      </div>
                  </div>
                  <div class="col-md-6 d-flex align-items-center">
                      <i class="ri-global-line text-primary fs-2 mb-0 me-3"></i>
                      <div>
                          <h5 class="mb-2">Multi-language interface</h5>
                          <p class="mb-0">Lorem ipsum dolor sit amet.</p>
                      </div>
                  </div>
              </div>
          </div>
          <div class="col-lg-5 mt-4 mt-lg-0">
              <img
              src="https://placehold.co/540x540/31343C/EEE?text=Placeholder"
              class="img-fluid rounded"
              alt="About Us"
              />
          </div>
      </div>
  </div>
</section>


                        <section class="bg-body py-5"> <div class="container"> <div
                        class="row align-items-center gx-4"> <div class="col-lg-7"> <h1
                        class="text-primary text-uppercase fw-semibold fs-6 mb-2">About Us</h1>
                        <h2 class="mb-2">Learn more about us</h2> <p class="mb-4">
                        Lorem ipsum dolor sit amet consectetur adipisicing elit. Dolorum quibusdam, libero corporis
                        dignissimos provident nulla nemo! </p> <div class="row g-4"> <div
                        class="col-md-6 d-flex align-items-center"> <i class="ri-shield-check-line
                        text-primary fs-2 mb-0 me-3"></i> <div> <h5
                        class="mb-2">Top-notch security</h5> <p class="mb-0">Lorem
                        ipsum dolor sit amet.</p> </div> </div> <div class="col-md-6 d-flex
                        align-items-center"> <i class="ri-customer-service-line text-primary fs-2 mb-0
                        me-3"></i> <div> <h5 class="mb-2">24/7 customer
                        support</h5> <p class="mb-0">Lorem ipsum dolor sit amet.</p>
                        </div> </div> <div class="col-md-6 d-flex align-items-center"> <i
                        class="ri-loop-left-line text-primary fs-2 mb-0 me-3"></i> <div> <h5
                        class="mb-2">Regular updates</h5> <p class="mb-0">Lorem ipsum
                        dolor sit amet.</p> </div> </div> <div class="col-md-6 d-flex
                        align-items-center"> <i class="ri-global-line text-primary fs-2 mb-0
                        me-3"></i> <div> <h5 class="mb-2">Multi-language
                        interface</h5> <p class="mb-0">Lorem ipsum dolor sit amet.</p>
                        </div> </div> </div> </div> <div class="col-lg-5 mt-4
                        mt-lg-0"> <img
                        src="https://placehold.co/540x540/31343C/EEE?text=Placeholder" class="img-fluid
                        rounded" alt="About Us" /> </div> </div> </div>
                        </section>

Example 3

About Us

Who are we?

Lorem ipsum dolor sit amet consectetur adipisicing elit. Dolorum quibusdam, libero corporis dignissimos provident nulla nemo! Quam impedit dolores vel sit amet consectetur adipisicing elit.

Lorem ipsum dolor sit amet consectetur adipisicing elit.

<section class="bg-body py-5">
  <div class="container">
      <div class="row align-items-center gx-4">
          <div class="col-lg-7">
              <h1 class="text-primary text-uppercase fw-semibold fs-6 mb-2">About Us</h1>
              <h2 class="mb-2">Who are we?</h2>
              <p class="mb-4">
              Lorem ipsum dolor sit amet consectetur adipisicing elit. Dolorum quibusdam, libero
              corporis dignissimos provident nulla nemo! Quam impedit dolores vel sit amet consectetur
              adipisicing elit.
              </p>
              <div class="accordion accordion-flush accordion-icon" id="accordionFlushExample" role="tablist" aria-multiselectable="true">
                  <div class="accordion-item border rounded mb-3">
                      <h2 class="accordion-header">
                      <button class="accordion-button collapsed rounded shadow-none" type="button" data-bs-toggle="collapse" data-bs-target="#flush-collapseOne" aria-expanded="false" aria-controls="flush-collapseOne">
                          <i class="ri-shield-check-line me-2"></i>Top-notch security
                      </button>
                      </h2>
                      <div id="flush-collapseOne" class="accordion-collapse collapse" data-bs-parent="#accordionFlushExample">
                      <div class="accordion-body">
                          Lorem ipsum dolor sit amet consectetur adipisicing elit.
                      </div>
                      </div>
                  </div>
                  <div class="accordion-item border rounded mb-3">
                      <h2 class="accordion-header">
                      <button class="accordion-button collapsed rounded shadow-none" type="button" data-bs-toggle="collapse" data-bs-target="#flush-collapseTwo" aria-expanded="false" aria-controls="flush-collapseTwo">
                          <i class="ri-customer-service-line me-2"></i>24/7 customer support
                      </button>
                      </h2>
                      <div id="flush-collapseTwo" class="accordion-collapse collapse" data-bs-parent="#accordionFlushExample">
                      <div class="accordion-body">
                          Lorem ipsum dolor sit amet consectetur adipisicing elit.
                      </div>
                      </div>
                  </div>
                  <div class="accordion-item border rounded mb-3">
                      <h2 class="accordion-header">
                      <button class="accordion-button collapsed rounded shadow-none" type="button" data-bs-toggle="collapse" data-bs-target="#flush-collapseThree" aria-expanded="false" aria-controls="flush-collapseThree">
                          <i class="ri-global-line me-2"></i>Multi-language interface
                      </button>
                      </h2>
                      <div id="flush-collapseThree" class="accordion-collapse collapse" data-bs-parent="#accordionFlushExample">
                      <div class="accordion-body">
                          Lorem ipsum dolor sit amet consectetur adipisicing elit.
                      </div>
                      </div>
                  </div>
              </div>
          </div>
          <div class="col-lg-5 mt-4 mt-lg-0">
              <img
              src="https://placehold.co/540x540/31343C/EEE?text=Placeholder"
              class="img-fluid rounded"
              alt="About Us"
              />
          </div>
      </div>
  </div>
</section>


                        <section class="bg-body py-5"> <div class="container"> <div
                        class="row align-items-center gx-4"> <div class="col-lg-7"> <h1
                        class="text-primary text-uppercase fw-semibold fs-6 mb-2">About Us</h1>
                        <h2 class="mb-2">Who are we?</h2> <p class="mb-4"> Lorem
                        ipsum dolor sit amet consectetur adipisicing elit. Dolorum quibusdam, libero corporis
                        dignissimos provident nulla nemo! Quam impedit dolores vel sit amet consectetur adipisicing
                        elit. </p> <div class="accordion accordion-flush accordion-icon"
                        id="accordionFlushExample" role="tablist"
                        aria-multiselectable="true"> <div class="accordion-item border rounded
                        mb-3"> <h2 class="accordion-header"> <button
                        class="accordion-button collapsed rounded shadow-none" type="button"
                        data-bs-toggle="collapse" data-bs-target="#flush-collapseOne"
                        aria-expanded="false" aria-controls="flush-collapseOne"> <i
                        class="ri-shield-check-line me-2"></i>Top-notch security </button>
                        </h2> <div id="flush-collapseOne" class="accordion-collapse
                        collapse" data-bs-parent="#accordionFlushExample"> <div
                        class="accordion-body"> Lorem ipsum dolor sit amet consectetur adipisicing elit.
                        </div> </div> </div> <div class="accordion-item border rounded
                        mb-3"> <h2 class="accordion-header"> <button
                        class="accordion-button collapsed rounded shadow-none" type="button"
                        data-bs-toggle="collapse" data-bs-target="#flush-collapseTwo"
                        aria-expanded="false" aria-controls="flush-collapseTwo"> <i
                        class="ri-customer-service-line me-2"></i>24/7 customer support
                        </button> </h2> <div id="flush-collapseTwo"
                        class="accordion-collapse collapse"
                        data-bs-parent="#accordionFlushExample"> <div
                        class="accordion-body"> Lorem ipsum dolor sit amet consectetur adipisicing elit.
                        </div> </div> </div> <div class="accordion-item border rounded
                        mb-3"> <h2 class="accordion-header"> <button
                        class="accordion-button collapsed rounded shadow-none" type="button"
                        data-bs-toggle="collapse" data-bs-target="#flush-collapseThree"
                        aria-expanded="false" aria-controls="flush-collapseThree"> <i
                        class="ri-global-line me-2"></i>Multi-language interface </button>
                        </h2> <div id="flush-collapseThree" class="accordion-collapse
                        collapse" data-bs-parent="#accordionFlushExample"> <div
                        class="accordion-body"> Lorem ipsum dolor sit amet consectetur adipisicing elit.
                        </div> </div> </div> </div> </div> <div class="col-lg-5
                        mt-4 mt-lg-0"> <img
                        src="https://placehold.co/540x540/31343C/EEE?text=Placeholder" class="img-fluid
                        rounded" alt="About Us" /> </div> </div> </div>
                        </section>

Example 4

About Us

What we do?

Lorem ipsum dolor sit amet consectetur adipisicing elit. Dolorum quibusdam, libero corporis dignissimos provident nulla nemo! Quam impedit dolores vel sit amet consectetur adipisicing elit.

Maintenance

Security

Updates

<section class="bg-body py-5">
  <div class="container">
      <div class="row align-items-center gx-4">
          <div class="col-lg-5">
              <img
              src="https://placehold.co/540x540/31343C/EEE?text=Placeholder"
              class="img-fluid rounded"
              alt="About Us"
              />
          </div>
          <div class="col-lg-6 offset-lg-1 mt-4 mt-lg-0">
              <h1 class="text-primary text-uppercase fw-semibold fs-6 mb-2">About Us</h1>
              <h2 class="mb-2">What we do?</h2>
              <p class="mb-4">
              Lorem ipsum dolor sit amet consectetur adipisicing elit. Dolorum quibusdam, libero
              corporis dignissimos provident nulla nemo! Quam impedit dolores vel sit amet consectetur
              adipisicing elit.
              </p>
              <div>
                  <label for="progressbar-maintenance" class="form-label">Maintenance</label>
                  <div class="progress mb-2" id="progressbar-maintenance" role="progressbar" aria-label="progress bar" aria-valuenow="85" aria-valuemin="0" aria-valuemax="100" style="height: 12px">
                      <div class="progress-bar progress-bar-striped progress-bar-animated" style="width: 85%"></div>
                  </div>
                  <label for="progressbar-security" class="form-label">Security</label>
                  <div class="progress mb-2" id="progressbar-security" role="progressbar" aria-label="progress bar" aria-valuenow="90" aria-valuemin="0" aria-valuemax="100" style="height: 12px">
                      <div class="progress-bar progress-bar-striped progress-bar-animated" style="width: 90%"></div>
                  </div>
                  <label for="progressbar-updates" class="form-label">Updates</label>
                  <div class="progress mb-2" id="progressbar-updates" role="progressbar" aria-label="progress bar" aria-valuenow="85" aria-valuemin="0" aria-valuemax="100" style="height: 12px">
                      <div class="progress-bar progress-bar-striped progress-bar-animated" style="width: 85%"></div>
                  </div>
              </div>
          </div>
      </div>
  </div>
</section>


                        <section class="bg-body py-5"> <div class="container"> <div
                        class="row align-items-center gx-4"> <div class="col-lg-5"> <img
                        src="https://placehold.co/540x540/31343C/EEE?text=Placeholder" class="img-fluid
                        rounded" alt="About Us" /> </div> <div class="col-lg-6
                        offset-lg-1 mt-4 mt-lg-0"> <h1 class="text-primary text-uppercase fw-semibold
                        fs-6 mb-2">About Us</h1> <h2 class="mb-2">What we do?</h2>
                        <p class="mb-4"> Lorem ipsum dolor sit amet consectetur adipisicing elit.
                        Dolorum quibusdam, libero corporis dignissimos provident nulla nemo! Quam impedit dolores vel
                        sit amet consectetur adipisicing elit. </p> <div> <label
                        for="progressbar-maintenance"
                        class="form-label">Maintenance</label> <div class="progress
                        mb-2" id="progressbar-maintenance" role="progressbar"
                        aria-label="progress bar" aria-valuenow="85" aria-valuemin="0"
                        aria-valuemax="100" style="height: 12px"> <div
                        class="progress-bar progress-bar-striped progress-bar-animated" style="width:
                        85%"></div> </div> <label for="progressbar-security"
                        class="form-label">Security</label> <div class="progress mb-2"
                        id="progressbar-security" role="progressbar" aria-label="progress
                        bar" aria-valuenow="90" aria-valuemin="0" aria-valuemax="100"
                        style="height: 12px"> <div class="progress-bar progress-bar-striped
                        progress-bar-animated" style="width: 90%"></div> </div> <label
                        for="progressbar-updates" class="form-label">Updates</label>
                        <div class="progress mb-2" id="progressbar-updates"
                        role="progressbar" aria-label="progress bar" aria-valuenow="85"
                        aria-valuemin="0" aria-valuemax="100" style="height: 12px">
                        <div class="progress-bar progress-bar-striped progress-bar-animated"
                        style="width: 85%"></div> </div> </div> </div> </div>
                        </div> </section>

Example 5

About Us

Lorem ipsum dolor sit amet consectetur adipisicing elit. Quam impedit dolores vel sit amet consectetur adipisicing elit.

Top-notch security

Regular updates

24/7 customer support

Multi-language interface

<section class="bg-body py-5">
  <div class="container">
      <div class="row align-items-center gx-4">
          <div class="col-lg-6">
              <img
              src="https://placehold.co/540x540/31343C/EEE?text=Placeholder"
              class="img-fluid rounded"
              alt="About Us"
              />
          </div>
          <div class="col-lg-6 mt-4 mt-lg-0">
              <i class="ri-shield-user-fill text-primary fs-1"></i>
              <h2 class="mb-2">About Us</h2>
              <p class="mb-4">
              Lorem ipsum dolor sit amet consectetur adipisicing elit. Quam impedit dolores vel sit amet consectetur adipisicing elit.
              </p>
              <div class="row g-2 mb-4">
                  <div class="col-md-6 d-flex align-items-center">
                      <i class="ri-shield-check-line text-primary fs-2 mb-0 me-3"></i>
                      <h6 class="mb-2">Top-notch security</h6>
                  </div>
                  <div class="col-md-6 d-flex align-items-center">
                      <i class="ri-loop-left-line text-primary fs-2 mb-0 me-3"></i>
                      <h6 class="mb-2">Regular updates</h6>
                  </div>
                  <div class="col-md-6 d-flex align-items-center">
                      <i class="ri-customer-service-line text-primary fs-2 mb-0 me-3"></i>
                      <h6 class="mb-2">24/7 customer support</h6>
                  </div>
                  <div class="col-md-6 d-flex align-items-center">
                      <i class="ri-global-line text-primary fs-2 mb-0 me-3"></i>
                      <h6 class="mb-2">Multi-language interface</h6>
                  </div>
              </div>
              <button class="btn btn-lg btn-outline-secondary">Learn more<i class="ri-arrow-right-line ms-2"></i></button>
          </div>
      </div>
  </div>
</section>

Example 6

About Us

Who are we?

Lorem ipsum dolor sit amet consectetur adipisicing elit. Dolorum quibusdam, libero corporis dignissimos provident nulla nemo!

Top-notch security

24/7 customer support

Regular updates

<section class="bg-body py-5">
  <div class="container">
      <div class="row align-items-center gx-4 mb-5">
          <div class="col-lg-7">
              <h1 class="text-primary text-uppercase fw-semibold fs-6 mb-2">About Us</h1>
              <h2 class="mb-2">Who are we?</h2>
              <p class="mb-3">
              Lorem ipsum dolor sit amet consectetur adipisicing elit. Dolorum quibusdam, libero
              corporis dignissimos provident nulla nemo!
              </p>
              <button class="btn btn-lg btn-primary">Learn more<i class="ri-arrow-right-line ms-2"></i></button>
          </div>
          <div class="col-lg-5 mt-5 mt-lg-0">
              <img
              src="https://placehold.co/540x540/31343C/EEE?text=Placeholder"
              class="img-fluid rounded"
              alt="About Us"
              />
          </div>
      </div>
      <div class="row g-3">
          <div class="col-lg-4">
              <div class="card card-hover rounded">
                  <div class="card-body d-flex align-items-center gap-3">
                      <i class="ri-shield-check-line text-primary fs-1 mb-0"></i>
                      <h5 class="mb-0">Top-notch security</h5>
                  </div>
              </div>
          </div>
          <div class="col-lg-4">
              <div class="card card-hover rounded">
                  <div class="card-body d-flex align-items-center gap-3">
                      <i class="ri-customer-service-line text-primary fs-1 mb-0"></i>
                      <h5 class="mb-0">24/7 customer support</h5>
                  </div>
              </div>
          </div>
          <div class="col-lg-4">
              <div class="card card-hover rounded">
                  <div class="card-body d-flex align-items-center gap-3">
                      <i class="ri-loop-left-line text-primary fs-1 mb-0"></i>
                      <h5 class="mb-0">Regular updates</h5>
                  </div>
              </div>
          </div>
      </div>
  </div>
</section>


                        <section class="bg-body py-5"> <div class="container"> <div
                        class="row align-items-center gx-4 mb-5"> <div class="col-lg-7">
                        <h1 class="text-primary text-uppercase fw-semibold fs-6 mb-2">About
                        Us</h1> <h2 class="mb-2">Who are we?</h2> <p
                        class="mb-3"> Lorem ipsum dolor sit amet consectetur adipisicing elit. Dolorum
                        quibusdam, libero corporis dignissimos provident nulla nemo! </p> <button
                        class="btn btn-lg btn-primary">Learn more<i class="ri-arrow-right-line
                        ms-2"></i></button> </div> <div class="col-lg-5 mt-5
                        mt-lg-0"> <img
                        src="https://placehold.co/540x540/31343C/EEE?text=Placeholder" class="img-fluid
                        rounded" alt="About Us" /> </div> </div> <div class="row
                        g-3"> <div class="col-lg-4"> <div class="card card-hover
                        rounded"> <div class="card-body d-flex align-items-center gap-3"> <i
                        class="ri-shield-check-line text-primary fs-1 mb-0"></i> <h5
                        class="mb-0">Top-notch security</h5> </div> </div> </div>
                        <div class="col-lg-4"> <div class="card card-hover rounded">
                        <div class="card-body d-flex align-items-center gap-3"> <i
                        class="ri-customer-service-line text-primary fs-1 mb-0"></i> <h5
                        class="mb-0">24/7 customer support</h5> </div> </div>
                        </div> <div class="col-lg-4"> <div class="card card-hover
                        rounded"> <div class="card-body d-flex align-items-center gap-3"> <i
                        class="ri-loop-left-line text-primary fs-1 mb-0"></i> <h5
                        class="mb-0">Regular updates</h5> </div> </div> </div>
                        </div> </div> </section>

Example 7

Our story, our passion, and our purpose

Lorem ipsum dolor sit amet consectetur adipisicing elit. Dolorum quibusdam, libero corporis dignissimos provident nulla nemo! Quam impedit dolores vel sit amet consectetur adipisicing elit.

Top-notch security

24/7 support

Regular updates

Multi-language

<section class="bg-body py-5">
  <div class="container">
    <img
      src="https://placehold.co/1200x440/31343C/EEE?text=Placeholder+Image+1200x440"
      class="object-fit-cover rounded w-100 mb-4"
      alt="About Us"
    />
    <h1 class="fw-semibold mb-3">
      Our story, our passion, and <span class="text-primary">our purpose</span>
    </h1>
    <div class="row gx-5">
      <div class="col-lg-6 mb-4 mb-lg-0">
        <p class="mb-4">
          Lorem ipsum dolor sit amet consectetur adipisicing elit. Dolorum quibusdam, libero
          corporis dignissimos provident nulla nemo! Quam impedit dolores vel sit amet consectetur
          adipisicing elit.
        </p>
        <div>
          <button class="btn btn-lg btn-primary me-1">Start now</button>
          <button class="btn btn-lg btn-outline-secondary">Learn more</button>
        </div>
      </div>
      <div class="col-lg-6">
        <div class="row g-3">
          <div class="col-md-6">
            <div class="card rounded p-3">
              <div class="card-body d-flex align-items-center gap-3 p-0">
                <i
                  class="ri-shield-check-line text-primary bg-secondary rounded fs-2 py-2 px-3"
                ></i>
                <h5 class="card-title my-0">Top-notch security</h5>
              </div>
            </div>
          </div>
          <div class="col-md-6">
            <div class="card rounded p-3">
              <div class="card-body d-flex align-items-center gap-3 p-0">
                <i
                  class="ri-customer-service-line text-primary bg-secondary rounded fs-2 py-2 px-3"
                ></i>
                <h5 class="card-title my-0">24/7 support</h5>
              </div>
            </div>
          </div>
          <div class="col-md-6">
            <div class="card rounded p-3">
              <div class="card-body d-flex align-items-center gap-3 p-0">
                <i
                  class="ri-loop-left-line text-primary bg-secondary rounded fs-2 py-2 px-3"
                ></i>
                <h5 class="card-title my-0">Regular updates</h5>
              </div>
            </div>
          </div>
          <div class="col-md-6">
            <div class="card rounded p-3">
              <div class="card-body d-flex align-items-center gap-3 p-0">
                <i class="ri-global-line text-primary bg-secondary rounded fs-2 py-2 px-3"
                ></i>
                <h5 class="card-title my-0">Multi-language</h5>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</section>


                        <section class="bg-body py-5"> <div class="container"> <img
                        src="https://placehold.co/1200x440/31343C/EEE?text=Placeholder+Image+1200x440"
                        class="object-fit-cover rounded w-100 mb-4" alt="About Us" /> <h1
                        class="fw-semibold mb-3"> Our story, our passion, and <span
                        class="text-primary">our purpose</span> </h1> <div class="row
                        gx-5"> <div class="col-lg-6 mb-4 mb-lg-0"> <p
                        class="mb-4"> Lorem ipsum dolor sit amet consectetur adipisicing elit. Dolorum
                        quibusdam, libero corporis dignissimos provident nulla nemo! Quam impedit dolores vel sit amet
                        consectetur adipisicing elit. </p> <div> <button class="btn btn-lg
                        btn-primary me-1">Start now</button> <button class="btn btn-lg
                        btn-outline-secondary">Learn more</button> </div> </div> <div
                        class="col-lg-6"> <div class="row g-3"> <div
                        class="col-md-6"> <div class="card rounded p-3"> <div
                        class="card-body d-flex align-items-center gap-3 p-0"> <i
                        class="ri-shield-check-line text-primary bg-secondary rounded fs-2 py-2 px-3"
                        ></i> <h5 class="card-title my-0">Top-notch security</h5>
                        </div> </div> </div> <div class="col-md-6"> <div
                        class="card rounded p-3"> <div class="card-body d-flex align-items-center
                        gap-3 p-0"> <i class="ri-customer-service-line text-primary bg-secondary rounded
                        fs-2 py-2 px-3" ></i> <h5 class="card-title my-0">24/7
                        support</h5> </div> </div> </div> <div class="col-md-6">
                        <div class="card rounded p-3"> <div class="card-body d-flex
                        align-items-center gap-3 p-0"> <i class="ri-loop-left-line text-primary
                        bg-secondary rounded fs-2 py-2 px-3" ></i> <h5 class="card-title
                        my-0">Regular updates</h5> </div> </div> </div> <div
                        class="col-md-6"> <div class="card rounded p-3"> <div
                        class="card-body d-flex align-items-center gap-3 p-0"> <i
                        class="ri-global-line text-primary bg-secondary rounded fs-2 py-2 px-3" ></i>
                        <h5 class="card-title my-0">Multi-language</h5> </div> </div>
                        </div> </div> </div> </div> </div> </section>

Example 8

About Us

Driven by passion, built on trust

Lorem ipsum dolor sit amet consect adipisi elit. Rem exercit accusan aut nostrum eligen ea odit commod id quae sint magnam velit dolores consect dolorib repellat esse dignissi.

Top-notch security

Lorem ipsum dolor sit amet consectetur adipisicing elit. Exercit accusan aut nostrum eligen ea odit commod id quae sint magnam velit dolores consect.

Multi-language interface

Lorem ipsum dolor sit amet consectetur adipisicing elit. Exercit accusan aut nostrum eligen ea odit commod id quae sint magnam velit dolores consect.

<section class="bg-body py-5">
  <div class="container">
    <div class="row align-items-center">
      <div class="col-xl-6">
        <h1 class="text-primary text-uppercase fw-semibold fs-5 mb-2">About Us</h1>
        <h2 class="mb-2">Driven by passion, built on trust</h2>
        <p class="mb-3">Lorem ipsum dolor sit amet consect adipisi elit. Rem exercit accusan aut nostrum eligen ea odit commod id quae sint magnam velit dolores consect dolorib repellat esse dignissi.</p>
        <button class="btn btn-lg btn-primary">Get started<i class="ri-arrow-right-line ms-2"></i></button>
      </div>
      <div class="col-xl-6 mt-5 mt-xl-0">
        <div class="row g-3">
          <div class="col-sm-6">
            <figure class="img-grayscale h-100">
              <a href="#">
                <img
                  src="https://placehold.co/540x540/747ED1/FFF?text=Placeholder"
                  class="object-fit-cover rounded w-100 h-100"
                  alt="About Us"
                />
              </a>
            </figure>
          </div>
          <div class="col-sm-6">
            <div class="card text-center border rounded-3 h-100">
              <div class="card-body d-flex align-items-center">
                <div>
                  <i class="ri-shield-check-line text-primary bg-secondary rounded bg-secondary fs-1 p-2 "></i>
                  <h5 class="my-2">Top-notch security</h5>
                  <p class="mb-0 text-justify">Lorem ipsum dolor sit amet consectetur adipisicing elit. Exercit accusan aut nostrum eligen ea odit commod id quae sint magnam velit dolores consect.</p>
                </div>
              </div>
            </div>
          </div>
          <div class="col-sm-6">
            <div class="card text-center border rounded-3 h-100">
              <div class="card-body d-flex align-items-center">
                <div>
                  <i class="ri-global-line text-primary bg-secondary rounded bg-secondary fs-1 p-2 "></i>
                  <h5 class="my-2">Multi-language interface</h5>
                  <p class="mb-0 text-justify">Lorem ipsum dolor sit amet consectetur adipisicing elit. Exercit accusan aut nostrum eligen ea odit commod id quae sint magnam velit dolores consect.</p>
                </div>
              </div>
            </div>
          </div>
          <div class="col-sm-6">
            <figure class="img-grayscale h-100">
              <a href="#">
                <img
                  src="https://placehold.co/540x540/747ED1/FFF?text=Placeholder"
                  class="object-fit-cover rounded w-100 h-100"
                  alt="About Us"
                />
              </a>
            </figure>
          </div>
        </div>
      </div>
    </div>
  </div>
</section>


                        <section class="bg-body py-5"> <div class="container"> <div
                        class="row align-items-center"> <div class="col-xl-6"> <h1
                        class="text-primary text-uppercase fw-semibold fs-5 mb-2">About Us</h1>
                        <h2 class="mb-2">Driven by passion, built on trust</h2> <p
                        class="mb-3">Lorem ipsum dolor sit amet consect adipisi elit. Rem exercit accusan
                        aut nostrum eligen ea odit commod id quae sint magnam velit dolores consect dolorib repellat
                        esse dignissi.</p> <button class="btn btn-lg btn-primary">Get started<i
                        class="ri-arrow-right-line ms-2"></i></button> </div> <div
                        class="col-xl-6 mt-5 mt-xl-0"> <div class="row g-3"> <div
                        class="col-sm-6"> <figure class="img-grayscale h-100"> <a
                        href="#"> <img
                        src="https://placehold.co/540x540/747ED1/FFF?text=Placeholder"
                        class="object-fit-cover rounded w-100 h-100" alt="About Us" /> </a>
                        </figure> </div> <div class="col-sm-6"> <div class="card
                        text-center border rounded-3 h-100"> <div class="card-body d-flex
                        align-items-center"> <div> <i class="ri-shield-check-line text-primary
                        bg-secondary rounded bg-secondary fs-1 p-2 "></i> <h5
                        class="my-2">Top-notch security</h5> <p class="mb-0
                        text-justify">Lorem ipsum dolor sit amet consectetur adipisicing elit. Exercit accusan
                        aut nostrum eligen ea odit commod id quae sint magnam velit dolores consect.</p>
                        </div> </div> </div> </div> <div class="col-sm-6">
                        <div class="card text-center border rounded-3 h-100"> <div
                        class="card-body d-flex align-items-center"> <div> <i
                        class="ri-global-line text-primary bg-secondary rounded bg-secondary fs-1 p-2
                        "></i> <h5 class="my-2">Multi-language interface</h5> <p
                        class="mb-0 text-justify">Lorem ipsum dolor sit amet consectetur adipisicing elit.
                        Exercit accusan aut nostrum eligen ea odit commod id quae sint magnam velit dolores
                        consect.</p> </div> </div> </div> </div> <div
                        class="col-sm-6"> <figure class="img-grayscale h-100"> <a
                        href="#"> <img
                        src="https://placehold.co/540x540/747ED1/FFF?text=Placeholder"
                        class="object-fit-cover rounded w-100 h-100" alt="About Us" /> </a>
                        </figure> </div> </div> </div> </div> </div>
                        </section>

Overview

Examples

Example 1

About Us

Top-notch security

24/7 customer support

Example 2

About Us

Learn more about us

Top-notch security

24/7 customer support

Regular updates

Multi-language interface

Example 3

About Us

Who are we?

Top-notch security

24/7 customer support

Multi-language interface

Example 4

About Us

What we do?

Example 5

About Us

Top-notch security

Regular updates

24/7 customer support

Multi-language interface

Example 6

About Us

Who are we?

Top-notch security

24/7 customer support

Regular updates

Example 7

Our story, our passion, and our purpose

Top-notch security

24/7 support

Regular updates

Multi-language

Example 8

About Us

Driven by passion, built on trust

Top-notch security

Multi-language interface

Admin

Themes

Other