Sandbox Jekyll documentation
Process
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 gy-10 gy-sm-13 gx-lg-3 align-items-center">
<div class="col-md-8 col-lg-6 position-relative">
<div class="shape bg-dot primary rellax w-17 h-21" data-rellax-speed="1" style="top: -2rem; left: -1.9rem;"></div>
<div class="shape rounded bg-soft-primary rellax d-md-block" data-rellax-speed="0" style="bottom: -1.8rem; right: -1.5rem; width: 85%; height: 90%; "></div>
<figure class="rounded">
<img src="{{ page.process1.image }}" srcset="{{ page.process1.image2x }} 2x" alt="">
</figure>
</div>
<!--/column -->
<div class="col-lg-5 col-xl-4 offset-lg-1">
<h2 class="h1 mb-3">{{ page.process1.title }}</h2>
<p class="lead fs-lg mb-6">{{ page.process1.lead }}</p>
{% for step in page.process1.steps %}
<div class="d-flex flex-row {% unless forloop.last %}mb-6{% endunless %}">
<div>
<span class="icon btn btn-circle btn-primary pe-none me-5">
<span class="number fs-18">{{ step.number }}</span>
</span>
</div>
<div>
<h4 class="mb-1">{{ step.title }}</h4>
<p class="mb-0">{{ step.text }}</p>
</div>
</div>
{% endfor %}
</div>
<!--/column -->
</div>
<!--/.row -->
</div>
<!-- /.container -->
</section># Process Section 1 - Process with Image and Steps
process1:
enable: true
image: /assets/img/photos/about7.webp
image2x: /assets/img/photos/[email protected]
title: "How It Works?"
lead: "So here are three working steps why our valued customers choose us."
steps:
- number: "1"
title: "Collect Ideas"
text: "Nulla vitae elit libero pharetra augue dapibus. Praesent commodo cursus."
- number: "2"
title: "Data Analysis"
text: "Vivamus sagittis lacus vel augue laoreet. Etiam porta sem malesuada magna."
- number: "3"
title: "Finalize Product"
text: "Cras mattis consectetur purus sit amet. Aenean lacinia bibendum nulla sed."Example 2
<section class="wrapper bg-light">
<div class="container py-14 py-md-16">
<h2 class="display-4 mb-3">{{ page.process2.title }}</h2>
<p class="lead fs-lg mb-8">{{ page.process2.description | markdownify }}</p>
<div class="row gx-lg-8 gx-xl-12 gy-6 process-wrapper line">
{% for step in page.process2.steps %}
<div class="col-md-6 col-lg-3">
<span class="icon btn btn-circle btn-lg {% if forloop.index == 2 %}btn-primary{% else %}btn-soft-primary{% endif %} pe-none mb-4">
<span class="number">{{ step.number }}</span>
</span>
<h4 class="mb-1">{{ step.title }}</h4>
<p class="mb-0">{{ step.text }}</p>
</div>
<!--/column -->
{% endfor %}
</div>
<!--/.row -->
</div>
<!-- /.container -->
</section># Process Section 2 - Process Steps with Line
process2:
enable: true
title: "How We Do It?"
description: "We make your spending **stress-free** for you to have the perfect control."
steps:
- number: "01"
title: "Concept"
text: "Nulla vitae elit libero elit non porta gravida eget metus cras. Aenean eu leo quam. Pellentesque ornare."
- number: "02"
title: "Prepare"
text: "Vestibulum id ligula porta felis euismod semper. Sed posuere consectetur est at lobortis."
- number: "03"
title: "Retouch"
text: "Integer posuere erat a ante venenatis dapibus posuere velit aliquet. Nulla vitae elit libero."
- number: "04"
title: "Finalize"
text: "Integer posuere erat, consectetur adipiscing elit. Fusce dapibus, tellus ac cursus commodo."Example 3
<section class="wrapper bg-light">
<div class="container py-14 py-md-16">
<div class="row gx-lg-8 gx-xl-10 align-items-center">
<div class="col-lg-6">
<figure>
<img src="{{ page.process3.image }}" srcset="{{ page.process3.image2x }} 2x" alt="">
</figure>
</div>
<!-- /column -->
<div class="col-lg-6">
<h2 class="fs-15 text-uppercase text-muted mb-3">{{ page.process3.subtitle }}</h2>
<h3 class="display-4 mb-5">{{ page.process3.title }}</h3>
<p class="mb-8">{{ page.process3.description }}</p>
<div class="row gy-6 gx-xxl-8 process-wrapper">
{% for step in page.process3.steps %}
<div class="col-md-4">
<img src="{{ step.icon }}" class="svg-inject icon-svg icon-svg-sm {{ step.color }} mb-3" alt="">
<h4 class="mb-1">{{ step.title }}</h4>
<p class="mb-0">{{ step.text }}</p>
</div>
<!--/column -->
{% endfor %}
</div>
<!--/.row -->
</div>
<!-- /column -->
</div>
<!-- /.row -->
</div>
<!-- /.container -->
</section># Process Section 3 - Process with Image and Icons
process3:
enable: true
image: /assets/img/photos/device.webp
image2x: /assets/img/photos/[email protected]
subtitle: "How It Works"
title: "Download the app, create your profile and voilà, you're all set!"
description: "Donec ullamcorper nulla non metus auctor fringilla. Cras mattis consectetur purus sit amet fermentum. Integer posuere erat a ante venenatis dapibus posuere velit aliquet. Nulla vitae elit libero. Etiam porta sem malesuada magna mollis euismod. Fusce dapibus, tellus ac cursus commodo."
steps:
- icon: /assets/img/icons/lineal/cloud-computing.svg
color: text-green
title: "1. Download"
text: "Nulla vitae elit libero elit non porta eget."
- icon: /assets/img/icons/lineal/smartphone-2.svg
color: text-red
title: "2. Set Profile"
text: "Nulla vitae elit libero elit non porta eget."
- icon: /assets/img/icons/lineal/rocket.svg
color: text-aqua
title: "3. Start"
text: "Nulla vitae elit libero elit non porta eget."Example 4
<section class="wrapper bg-light">
<div class="container py-14 py-md-16">
<div class="row text-center">
<div class="col-lg-10 mx-auto">
<div class="position-relative">
<div class="shape bg-dot red rellax w-16 h-18" data-rellax-speed="1" style="top: 1rem; left: -3.9rem;"></div>
<div class="shape rounded-circle bg-line primary rellax w-18 h-18" data-rellax-speed="1" style="bottom: 2rem; right: -3rem;"></div>
<video poster="{{ page.process4.video.poster }}" class="player" playsinline controls preload="none">
<source src="{{ page.process4.video.mp4 }}" type="video/mp4">
<source src="{{ page.process4.video.webm }}" type="video/webm">
</video>
</div>
</div>
<!--/column -->
</div>
<!--/.row -->
<div class="row text-center">
<div class="col-lg-9 mx-auto">
<h2 class="fs-15 text-uppercase text-muted mb-3 mt-12">{{ page.process4.subtitle }}</h2>
<h3 class="display-4 mb-0 text-center px-xl-10 px-xxl-15">{{ page.process4.title }}</h3>
<div class="row gx-lg-8 gx-xl-12 process-wrapper text-center mt-10">
{% for step in page.process4.steps %}
<div class="col-md-4">
<img src="{{ step.icon }}" class="svg-inject icon-svg icon-svg-md {{ step.color }} mb-3" alt="">
<h4 class="mb-1">{{ step.title }}</h4>
<p class="mb-0">{{ step.text }}</p>
</div>
<!--/column -->
{% endfor %}
</div>
<!--/.row -->
</div>
<!-- /column -->
</div>
<!-- /.row -->
</div>
<!-- /.container -->
</section># Process Section 4 - Process with Video and Icons
process4:
enable: true
video:
poster: /assets/img/photos/movie.webp
mp4: /assets/media/movie.mp4
webm: /assets/media/movie.webm
subtitle: "Our Process"
title: "Find out everything you need to know about creating a business process model"
steps:
- icon: /assets/img/icons/lineal/light-bulb.svg
color: text-primary
title: "1. Concept"
text: "Nulla vitae elit libero elit non porta gravida eget metus cras."
- icon: /assets/img/icons/lineal/settings-3.svg
color: text-red
title: "2. Prepare"
text: "Nulla vitae elit libero elit non porta gravida eget metus cras."
- icon: /assets/img/icons/lineal/design.svg
color: text-leaf
title: "3. Retouch"
text: "Nulla vitae elit libero elit non porta gravida eget metus cras."Example 5
<!-- Same HTML structure but with variables --># Process Section 5 - Process with Cards and Content
process5:
enable: true
icon: /assets/img/icons/lineal/list.svg
title: "Here are 3 working steps to organize our business projects."
subtitle: "How It Works?"
description: "Find out everything you need to know and more about how we create our business process models."
content1: "Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. Etiam porta sem malesuada magna mollis euismod. Nullam id dolor id nibh ultricies vehicula ut id elit. Nullam quis risus eget urna mollis ornare."
content2: "Nullam id dolor id nibh ultricies vehicula ut id elit. Vestibulum id ligula porta felis euismod semper. Aenean lacinia bibendum nulla sed consectetur. Sed posuere consectetur est at lobortis. Vestibulum id ligula porta felis."
button:
text: "Learn More"
url: "#"
steps:
- number: "01"
title: "Collect Ideas"
text: "Nulla vitae elit libero pharetra augue dapibus."
- number: "02"
title: "Data Analysis"
text: "Vivamus sagittis lacus vel augue laoreet."
- number: "03"
title: "Finalize Product"
text: "Cras mattis consectetur purus sit amet."Example 6
<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-7">
<figure>
<img class="w-auto" src="{{ page.process6.image }}" srcset="{{ page.process6.image2x }} 2x" alt="" />
</figure>
</div>
<!--/column -->
<div class="col-lg-5">
<h2 class="fs-15 text-uppercase text-line text-primary mb-3">{{ page.process6.subtitle }}</h2>
<h3 class="display-5 mb-7 pe-xxl-5">{{ page.process6.title }}</h3>
{% for step in page.process6.steps %}
<div class="d-flex flex-row {% unless forloop.last %}mb-4{% endunless %}">
<div>
<img src="{{ step.icon }}" class="svg-inject icon-svg icon-svg-sm {{ step.color }} me-4" alt="" />
</div>
<div>
<h4 class="mb-1">{{ step.title }}</h4>
<p class="mb-{% if forloop.last %}0{% else %}1{% endif %}">{{ step.text }}</p>
</div>
</div>
{% endfor %}
</div>
<!--/column -->
</div>
<!--/.row -->
</div>
<!-- /.container -->
</section># Process Section 6 - Process with Image and Icons
process6:
enable: true
image: /assets/img/illustrations/i3.webp
image2x: /assets/img/illustrations/[email protected]
subtitle: "How It Works?"
title: "Everything you need on creating a business process."
steps:
- icon: /assets/img/icons/lineal/light-bulb.svg
color: text-primary
title: "Collect Ideas"
text: "Nulla vitae elit libero pharetra augue dapibus."
- icon: /assets/img/icons/lineal/pie-chart-2.svg
color: text-green
title: "Data Analysis"
text: "Vivamus sagittis lacus augue laoreet vel."
- icon: /assets/img/icons/lineal/design.svg
color: text-yellow
title: "Magic Touch"
text: "Cras mattis consectetur purus sit amet."Example 7
<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-7">
<figure>
<img class="w-auto" src="{{ page.process7.image }}" srcset="{{ page.process7.image2x }} 2x" alt="" />
</figure>
</div>
<!--/column -->
<div class="col-lg-5">
<h3 class="fs-16 text-uppercase text-muted mb-3">{{ page.process7.subtitle }}</h3>
<h3 class="display-4 mb-6">{{ page.process7.title }}</h3>
<div class="row gy-4">
{% for step in page.process7.steps %}
<div class="col-md-6">
<h4><span class="text-primary">{{ step.number }}.</span> {{ step.title }}</h4>
<p class="mb-0">{{ step.text }}</p>
</div>
{% endfor %}
<!--/column -->
</div>
<!--/.row -->
</div>
<!--/column -->
</div>
<!--/.row -->
</div>
<!-- /.container -->
</section># Process Section 7 - Process with Image and Steps
process7:
enable: true
image: /assets/img/illustrations/i9.webp
image2x: /assets/img/illustrations/[email protected]
subtitle: "How It Works?"
title: "Find out everything about creating a business model."
steps:
- number: "1"
title: "Creative Ideas"
text: "Nulla vitae elit libero a augue donec id elit non mi porta."
- number: "2"
title: "Magic Touch"
text: "Nulla vitae elit libero a augue donec id elit non mi porta."
- number: "3"
title: "Data Analysis"
text: "Nulla vitae elit libero a augue donec id elit non mi porta."
- number: "4"
title: "Finalize Product"
text: "Nulla vitae elit libero a augue donec id elit non mi porta."Example 8
<section class="wrapper bg-light">
<div class="container py-14 py-md-16">
<div class="row text-center">
<div class="col-md-10 col-lg-7 mx-auto position-relative">
{% for doodle in page.process8.doodles %}
<img src="{{ doodle.image }}" class="{{ doodle.class }}" data-delay="{{ doodle.delay }}" style="{{ doodle.style }}" alt="">
{% endfor %}
<h2 class="fs-16 text-uppercase text-muted mb-3">{{ page.process8.subtitle }}</h2>
<h3 class="display-3 mb-8 px-xl-6">{{ page.process8.title | markdownify }}</h3>
</div>
<!-- /column -->
</div>
<!-- /.row -->
<div class="row">
<div class="col-xxl-11 mx-auto">
<div class="row gy-10 gy-lg-0 text-center d-flex align-items-center">
<div class="col-md-6 col-lg-4 mx-auto mb-n10 mb-lg-0">
<figure class="mx-auto">
<img src="{{ page.process8.image }}" srcset="{{ page.process8.image2x }} 2x" alt="">
</figure>
</div>
<!-- /column -->
<div class="w-100 d-lg-none"></div>
{% for column in page.process8.columns %}
<div class="col-md-6 col-lg-4 {{ column.order }}">
{% for step in column.steps %}
<div class="{{ step.class }}">
<span class="fs-60 lh-1 mb-3 fw-normal text-gradient gradient-7">{{ step.number }}</span>
<h4 class="fs-20">{{ step.title }}</h4>
<p class="mb-0 px-xl-7">{{ step.text }}</p>
</div>
<!-- /div -->
{% endfor %}
</div>
<!-- /column -->
{% endfor %}
</div>
<!-- /.row -->
</div>
<!-- /column -->
</div>
<!-- /.row -->
</div>
<!-- /.container -->
</section># Process Section 8 - Process with Doodles and Steps
process8:
enable: true
subtitle: "How It Works"
title: "Download the app, create your profile and *voilà*, you're all set!"
image: /assets/img/photos/devices4.webp
image2x: /assets/img/photos/[email protected]
doodles:
- image: /assets/img/svg/doodle5.svg
class: w-15 position-absolute d-none d-lg-block
delay: 1800
style: "bottom: -60%; right: 10%"
- image: /assets/img/svg/doodle6.svg
class: h-15 position-absolute d-none d-lg-block
delay: 1800
style: "top: -40%; left: -5%"
columns:
- order: order-lg-first
steps:
- number: "01"
title: "Download Application"
text: "Nulla vitae elit libero, a pharetra augue. Donec id elit non mi porta gravida at eget metus."
class: mb-8
- number: "02"
title: "Quick Registration"
text: "Nulla vitae elit libero, a pharetra augue. Donec id elit non mi porta gravida at eget metus."
- steps:
- number: "03"
title: "Track Your Spending"
text: "Nulla vitae elit libero, a pharetra augue. Donec id elit non mi porta gravida at eget metus."
class: mb-8
- number: "04"
title: "Have Total Control"
text: "Nulla vitae elit libero, a pharetra augue. Donec id elit non mi porta gravida at eget metus."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