Blocks - Team

Copy any custom block snippet below and paste it on your page to build your website easily.

Filter Blocks:

Our Team

Think unique and be innovative. Make a difference with Sandbox.

Coriss Ambady

Financial Analyst

Cory Zamora

Marketing Specialist

Nikolas Brooten

Sales Manager

Jackie Sanders

Investment Planner

View HTML code

<section class="wrapper bg-light">
  <div class="container py-14 py-md-16">
    <div class="row mb-3">
      <div class="col-md-10 col-lg-12 col-xl-10 col-xxl-9 mx-auto text-center">
        <h2 class="fs-15 text-uppercase text-muted mb-3">{{ page.team1.title }}</h2>
        <h3 class="display-4 mb-7 px-lg-19 px-xl-18">{{ page.team1.description }}</h3>
      </div>
    </div>
    <div class="row grid-view gx-md-8 gx-xl-10 gy-8 gy-lg-0">
      {% for member in team_data.members | limit:4 %}
      <div class="col-md-6 col-lg-3">
        <div class="position-relative">
          <div class="shape rounded bg-soft-blue rellax d-md-block" data-rellax-speed="0"
            style="bottom: -0.75rem; right: -0.75rem; width: 98%; height: 98%; z-index:0"></div>
          <div class="card">
            <figure class="card-img-top">
              <img class="img-fluid" src="{{ member.avatar_image }}" 
                   srcset="{{ member.avatar_image2x }} 2x" alt="{{ member.name }}" />
            </figure>
            <div class="card-body px-6 py-5">
              <h4 class="mb-1">{{ member.name }}</h4>
              <p class="mb-0">{{ member.role }}</p>
            </div>
          </div>
        </div>
      </div>
      {% endfor %}
    </div>
  </div>
</section>

View Yaml data

team1:
  enable: true
  title: "Our Team"
  subtitle: "Think unique and be innovative. Make a difference with Sandbox."
  description: "Think unique and be innovative. Make a difference with Sandbox."

Save your time and money by choosing our professional team.

Coriss Ambady

Financial Analyst

Fermentum massa justo sit amet risus morbi leo.

Cory Zamora

Marketing Specialist

Fermentum massa justo sit amet risus morbi leo.

Nikolas Brooten

Sales Manager

Fermentum massa justo sit amet risus morbi leo.

Jackie Sanders

Investment Planner

Fermentum massa justo sit amet risus morbi leo.

Laura Widerski

Sales Specialist

Fermentum massa justo sit amet risus morbi leo.

Tina Geller

Financial Analyst

Fermentum massa justo sit amet risus morbi leo.

View HTML code

<section  class="wrapper bg-light wrapper-border">
  <div class="container pt-15 pt-md-17 pb-13 pb-md-15">
    <div class="row mb-3">
      <div class="col-md-10 col-xl-9 col-xxl-7 mx-auto text-center">
        <img src="/assets/img/icons/lineal/{{ page.team2.icon }}" class="svg-inject icon-svg icon-svg-md mb-4" alt="" />
        <h2 class="display-4 mb-3 px-lg-14">{{ page.team2.title }}</h2>
      </div>
      <!--/column -->
    </div>
    <!--/.row -->
    <div class="position-relative">
      <div class="shape rounded-circle bg-soft-yellow rellax w-16 h-16" data-rellax-speed="1"
        style="bottom: 0.5rem; right: -1.7rem;"></div>
      <div class="shape rounded-circle bg-line red rellax w-16 h-16" data-rellax-speed="1"
        style="top: 0.5rem; left: -1.7rem;"></div>
      <div class="swiper-container dots-closer mb-6" data-margin="0" data-dots="true" data-items-xxl="4"
        data-items-lg="3" data-items-md="2" data-items-xs="1">
        <div class="swiper">
          <div class="swiper-wrapper">
            {% for member in team_data.members %}
            <div class="swiper-slide">
              <div class="item-inner">
                <div class="card">
                  <div class="card-body">
                    <img class="rounded-circle w-15 mb-4" src="{{ member.avatar_image }}"
                      srcset="{{ member.avatar_image2x }} 2x" alt="{{ member.name }}" />
                    <h4 class="mb-1">{{ member.name }}</h4>
                    <div class="meta mb-2">{{ member.role }}</div>
                    <p class="mb-2">{{ member.bio }}</p>
                    <nav class="nav social mb-0">
                      {% for social in member.social %}
                      <a href="{{ social.url }}"><i class="{{ social.icon }}"></i></a>
                      {% endfor %}
                    </nav>
                    <!-- /.social -->
                  </div>
                  <!--/.card-body -->
                </div>
                <!-- /.card -->
              </div>
              <!-- /.item-inner -->
            </div>
            <!--/.swiper-slide -->
            {% endfor %}
          </div>
          <!--/.swiper-wrapper -->
        </div>
        <!-- /.swiper -->
      </div>
      <!-- /.swiper-container -->
    </div>
    <!-- /.position-relative -->
  </div>
  </section>

View Yaml data

team2:
  enable: true
  title: "Save your time and money by choosing our professional team."
  icon: "team.svg"

Meet the Team

Save your time and money by choosing our professional team.

Donec id elit non mi porta gravida at eget metus. Morbi leo risus, porta ac consectetur ac, vestibulum at eros tempus porttitor.

See All Members

Coriss Ambady

Financial Analyst

Fermentum massa justo sit amet risus morbi leo.

Cory Zamora

Marketing Specialist

Fermentum massa justo sit amet risus morbi leo.

Nikolas Brooten

Sales Manager

Fermentum massa justo sit amet risus morbi leo.

Jackie Sanders

Investment Planner

Fermentum massa justo sit amet risus morbi leo.

Laura Widerski

Sales Specialist

Fermentum massa justo sit amet risus morbi leo.

Tina Geller

Financial Analyst

Fermentum massa justo sit amet risus morbi leo.

View HTML code

<section class="wrapper bg-light">
  <div class="container py-14 py-md-16">
    <div class="row gx-lg-8 gx-xl-12 gy-10 align-items-center">
      <div class="col-lg-4">
        <h2 class="fs-15 text-uppercase text-line text-primary text-center mb-3">Meet the Team</h2>
        <h3 class="display-5 mb-5">Save your time and money by choosing our professional team.</h3>
        <p>Donec id elit non mi porta gravida at eget metus. Morbi leo risus, porta ac consectetur ac, vestibulum at eros tempus porttitor.</p>
        <a href="#" class="btn btn-primary rounded-pill mt-3">See All Members</a>
      </div>
      <div class="col-lg-8">
        <div class="swiper-container text-center mb-6" data-margin="30" data-dots="true" data-items-xl="3" data-items-md="2" data-items-xs="1">
          <div class="swiper">
            <div class="swiper-wrapper">
              
              <div class="swiper-slide">
                <img class="rounded-circle w-20 mx-auto mb-4" src="/assets/img/avatars/t1.webp" srcset="/assets/img/avatars/[email protected] 2x" alt="Coriss Ambady" />
                <h4 class="mb-1">Coriss Ambady</h4>
                <div class="meta mb-2">Financial Analyst</div>
                <p class="mb-2">Fermentum massa justo sit amet risus morbi leo.</p>
                <nav class="nav social justify-content-center text-center mb-0">
                  
                  <a href="#"><i class="uil uil-twitter"></i></a>
                  
                  <a href="#"><i class="uil uil-facebook-f"></i></a>
                  
                  <a href="#"><i class="uil uil-dribbble"></i></a>
                  
                </nav>
              </div>
              
              <div class="swiper-slide">
                <img class="rounded-circle w-20 mx-auto mb-4" src="/assets/img/avatars/t2.webp" srcset="/assets/img/avatars/[email protected] 2x" alt="Cory Zamora" />
                <h4 class="mb-1">Cory Zamora</h4>
                <div class="meta mb-2">Marketing Specialist</div>
                <p class="mb-2">Fermentum massa justo sit amet risus morbi leo.</p>
                <nav class="nav social justify-content-center text-center mb-0">
                  
                  <a href="#"><i class="uil uil-twitter"></i></a>
                  
                  <a href="#"><i class="uil uil-facebook-f"></i></a>
                  
                  <a href="#"><i class="uil uil-dribbble"></i></a>
                  
                </nav>
              </div>
              
              <div class="swiper-slide">
                <img class="rounded-circle w-20 mx-auto mb-4" src="/assets/img/avatars/t3.webp" srcset="/assets/img/avatars/[email protected] 2x" alt="Nikolas Brooten" />
                <h4 class="mb-1">Nikolas Brooten</h4>
                <div class="meta mb-2">Sales Manager</div>
                <p class="mb-2">Fermentum massa justo sit amet risus morbi leo.</p>
                <nav class="nav social justify-content-center text-center mb-0">
                  
                  <a href="#"><i class="uil uil-twitter"></i></a>
                  
                  <a href="#"><i class="uil uil-facebook-f"></i></a>
                  
                  <a href="#"><i class="uil uil-dribbble"></i></a>
                  
                </nav>
              </div>
              
              <div class="swiper-slide">
                <img class="rounded-circle w-20 mx-auto mb-4" src="/assets/img/avatars/t4.webp" srcset="/assets/img/avatars/[email protected] 2x" alt="Jackie Sanders" />
                <h4 class="mb-1">Jackie Sanders</h4>
                <div class="meta mb-2">Investment Planner</div>
                <p class="mb-2">Fermentum massa justo sit amet risus morbi leo.</p>
                <nav class="nav social justify-content-center text-center mb-0">
                  
                  <a href="#"><i class="uil uil-twitter"></i></a>
                  
                  <a href="#"><i class="uil uil-facebook-f"></i></a>
                  
                  <a href="#"><i class="uil uil-dribbble"></i></a>
                  
                </nav>
              </div>
              
              <div class="swiper-slide">
                <img class="rounded-circle w-20 mx-auto mb-4" src="/assets/img/avatars/t5.webp" srcset="/assets/img/avatars/[email protected] 2x" alt="Laura Widerski" />
                <h4 class="mb-1">Laura Widerski</h4>
                <div class="meta mb-2">Sales Specialist</div>
                <p class="mb-2">Fermentum massa justo sit amet risus morbi leo.</p>
                <nav class="nav social justify-content-center text-center mb-0">
                  
                  <a href="#"><i class="uil uil-twitter"></i></a>
                  
                  <a href="#"><i class="uil uil-facebook-f"></i></a>
                  
                  <a href="#"><i class="uil uil-dribbble"></i></a>
                  
                </nav>
              </div>
              
              <div class="swiper-slide">
                <img class="rounded-circle w-20 mx-auto mb-4" src="/assets/img/avatars/t6.webp" srcset="/assets/img/avatars/[email protected] 2x" alt="Tina Geller" />
                <h4 class="mb-1">Tina Geller</h4>
                <div class="meta mb-2">Financial Analyst</div>
                <p class="mb-2">Fermentum massa justo sit amet risus morbi leo.</p>
                <nav class="nav social justify-content-center text-center mb-0">
                  
                  <a href="#"><i class="uil uil-twitter"></i></a>
                  
                  <a href="#"><i class="uil uil-facebook-f"></i></a>
                  
                  <a href="#"><i class="uil uil-dribbble"></i></a>
                  
                </nav>
              </div>
              
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</section>

View Yaml data

team3:
  enable: true
  title: "Meet the Team"
  subtitle: "Save your time and money by choosing our professional team."
  description: "Donec id elit non mi porta gravida at eget metus. Morbi leo risus, porta ac consectetur ac, vestibulum at eros tempus porttitor."
  button_text: "See All Members"
  button_url: "#"

Project Pages

Single Projects

Usage

Styleguide

Elements

Blocks - Team

Filter Blocks:

Our Team

Think unique and be innovative. Make a difference with Sandbox.

Coriss Ambady

Cory Zamora

Nikolas Brooten

Jackie Sanders

Save your time and money by choosing our professional team.

Coriss Ambady

Cory Zamora

Nikolas Brooten

Jackie Sanders

Laura Widerski

Tina Geller

Meet the Team

Save your time and money by choosing our professional team.

Coriss Ambady

Cory Zamora

Nikolas Brooten

Jackie Sanders

Laura Widerski

Tina Geller