Sandbox Jekyll documentation
Team
Copy any custom block snippet below and paste it on your page to build your website easily.
Example 1
<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>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."Example 2
<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>team2:
enable: true
title: "Save your time and money by choosing our professional team."
icon: "team.svg"Example 3
<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>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: "#"Sign In
Please enter your credentials to continue.
Password
Sign In
Don’t have an account? Sign up
or
Create Account
Create your account to get started.
Name
Password
Confirm Password
Create Account
Already have an account? Sign in
or