We have an infinite amount to learn both from nature and from each other

Reusable Elements

The Earth was small, light blue, and so touchingly alone.

Category 1, Category 2

Author: Josiah Humphrey

Posted: 01/12/2017

Free Google Fonts

The Earth was small, light blue, and so touchingly alone.

Category 1, Category 2

Author: Josiah Humphrey

Posted: 01/12/2017

Responsive Symbols

The Earth was small, light blue, and so touchingly alone.

Category 1, Category 2

Author: Josiah Humphrey

Posted: 01/12/2017

<section class="blog blog-02">
  <div class="container">
    <div class="row">
      <div class="col-12">
        <h2 class="text-center">We have an infinite amount to learn both from nature and from each other</h2>
        <div class="card-deck">
          {%- include 'modules/siteglide_system/get/get_items', item_layout: 'item' -%}
        </div>
      </div>
    </div>
  </div>
</section>

<div class="card">
    <div class="card-img background-image" style="background-image: url('{{ 'images/content/design-system-placeholder.svg' | asset_url }}')"></div>
    <div class="card-body">
        <h3 class="card-title">Reusable Elements</h3>
        <p class="card-text">The Earth was small, light blue, and so touchingly alone.</p>
    </div>
    <div class="card-footer">
        <p class="card-text tag"><i class="fas fa-tag"></i><a href="#" title="">Category 1</a>, <a href="#" title="">Category 2</a></p>
        <p class="card-text">Author: Josiah Humphrey</p>
        <p class="card-text">Posted: 01/12/2017</p>
    </div>
</div>

01 Jan 2020

Jusendisse accumsan turpis

Ea accusamus sint. Blanditiis assumenda ab quia et quis. Tempore inventore placeat reprehenderit provident soluta eligendi esse. Aut earum magnam sunt...

Josiah Humphrey

Industry

01 Jan 2020

Jusendisse accumsan turpis

Ea accusamus sint. Blanditiis assumenda ab quia et quis. Tempore inventore placeat reprehenderit provident soluta eligendi esse. Aut earum magnam sunt...

Josiah Humphrey

Industry

01 Jan 2020

Jusendisse accumsan turpis

Ea accusamus sint. Blanditiis assumenda ab quia et quis. Tempore inventore placeat reprehenderit provident soluta eligendi esse. Aut earum magnam sunt...

Josiah Humphrey

Industry

1
2
3
4

<section class="blog blog-10">
	<div class="container">
		<div class="row">
			<div class="col-12 col-md-9">
        <div class="card">
          <div class="row no-gutters">
            <div class="col-12 col-md-6 col-lg-4 background-image" style="background-image: url('{{ 'images/content/design-system-placeholder.svg' | asset_url }}');"></div>
            <div class="col-12 col-md-6 col-lg-8">
              <div class="card-body">
                <p class="tag"><i class="fal fa-calendar"></i><a href="#" title="">01 Jan 2020</a></p>
                <h2><a href="#" title="">Jusendisse accumsan turpis</a></h2>
                <p>Ea accusamus sint. Blanditiis assumenda ab quia et quis. Tempore inventore placeat reprehenderit provident soluta eligendi esse. Aut earum magnam sunt...</p>
                <p>Josiah Humphrey</p>
                <p class="tag"><i class="fal fa-tag"></i><a href="#" title="">Industry</a></p>
              </div>
            </div>
          </div>
        </div>
        <div class="card">
          <div class="row no-gutters">
            <div class="col-12 col-md-6 col-lg-4 background-image" style="background-image: url('{{ 'images/content/design-system-placeholder.svg' | asset_url }}');"></div>
            <div class="col-12 col-md-6 col-lg-8">
              <div class="card-body">
                <p class="tag"><i class="fal fa-calendar"></i><a href="#" title="">01 Jan 2020</a></p>
                <h2><a href="#" title="">Jusendisse accumsan turpis</a></h2>
                <p>Ea accusamus sint. Blanditiis assumenda ab quia et quis. Tempore inventore placeat reprehenderit provident soluta eligendi esse. Aut earum magnam sunt...</p>
                <p>Josiah Humphrey</p>
                <p class="tag"><i class="fal fa-tag"></i><a href="#" title="">Industry</a></p>
              </div>
            </div>
          </div>
        </div>
        <div class="card">
          <div class="row no-gutters">
            <div class="col-12 col-md-6 col-lg-4 background-image" style="background-image: url('{{ 'images/content/design-system-placeholder.svg' | asset_url }}');"></div>
            <div class="col-12 col-md-6 col-lg-8">
              <div class="card-body">
                <p class="tag"><i class="fal fa-calendar"></i><a href="#" title="">1 Jan 2020</a></p>
                <h2><a href="#" title="">Jusendisse accumsan turpis</a></h2>
                <p>Ea accusamus sint. Blanditiis assumenda ab quia et quis. Tempore inventore placeat reprehenderit provident soluta eligendi esse. Aut earum magnam sunt...</p>
                <p>Josiah Humphrey</p>
                <p class="tag"><i class="fal fa-tag"></i><a href="#" title="">Industry</a></p>
              </div>
            </div>
          </div>
        </div>
	      <div class="model_pagination">
          <ul>
            <li><a class="inactive" href="/blog?page=1">1</a>	</li>
            <li><a href="/blog?page=2">2</a></li>
            <li><a href="/blog?page=3">3</a></li>
            <li><a href="/blog?page=4">4</a></li>
          </ul>
        </div>
    </div>
		<div class="col-12 col-md-3 d-none d-md-block sidebar">
      <div class="row no-gutters">
        <div class="col-12">
          <h2>Categories</h2>
          <ul>
            <li><a href="#" title="">Content Marketing</a></li>
            <li><a href="#" title="">Web Design</a></li>
            <li><a href="#" title="">SEO</a></li>
            <li><a href="#" title="">Social Marketing</a></li>
            <li><a href="#" title="">Marketing</a></li>
          </ul>
        </div>
      </div>
      <div class="row no-gutters">
        <div class="col-12">
          <h2>Archives</h2>
          <ul>
            <li><a href="#" title="">January 2020</a></li>
            <li><a href="#" title="">February 2020</a></li>
            <li><a href="#" title="">March 2020</a></li>
          </ul>
        </div>
      </div>
      <div class="row no-gutters tags">
        <div class="col-12">
          <h2>Tags</h2>
          <ul>
            <li><a href="#" class="btn btn-primary" title="">Marketing</a></li>
            <li><a href="#" class="btn btn-primary" title="">SEO</a></li>
            <li><a href="#" class="btn btn-primary" title="">Design</a></li>
            <li><a href="#" class="btn btn-primary" title="">Social Marketing</a></li>
            <li><a href="#" class="btn btn-primary" title="">Development</a></li>
          </ul>
        </div>
      </div>
    </div>
  </div>
</section>

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/fullcalendar/4.2.0/core/main.min.css" integrity="sha256-Lfe6+s5LEek8iiZ31nXhcSez0nmOxP+3ssquHMR3Alo=" crossorigin="anonymous" />
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/fullcalendar/4.2.0/daygrid/main.min.css" integrity="sha256-AVsv7CEpB2Y1F7ZjQf0WI8SaEDCycSk4vnDRt0L2MNQ=" crossorigin="anonymous" />

<script src="https://cdnjs.cloudflare.com/ajax/libs/fullcalendar/4.2.0/core/main.min.js" integrity="sha256-GBryZPfVv8G3K1Lu2QwcqQXAO4Szv4xlY4B/ftvyoMI=" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/fullcalendar/4.2.0/daygrid/main.min.js" integrity="sha256-FT1eN+60LmWX0J8P25UuTjEEE0ZYvpC07nnU6oFKFuI=" crossorigin="anonymous"></script>

<script>
	document.addEventListener('DOMContentLoaded', function() {
		//Select calendar settings below. See the full docs here: https://fullcalendar.io/docs
		var calendarEl = document.getElementById('calendar');
		var calendar = new FullCalendar.Calendar(calendarEl, {
			plugins: [ 'dayGrid' ],
			events: [
                {% comment %} Include the following code in to the item.liquid for calendar {%- include 'modules/siteglide_system/get/get_items', item_layout: 'item' -%}{% endcomment %}
				{
                    "title": {{this.name | json }},
                    "start": "{{this.properties.module_field_12_2 | date: "%Y-%m-%dT%H:%M:%SZ"}}",
                    "end": "{{this.properties.module_field_12_3 | date: "%Y-%m-%dT%H:%M:%SZ"}}",
                    "url": "{{this.full_slug}}",
                    "classNames": [
                        {%- for category in this.category_array -%}
                            "events-category-{{category}}"{%- unless forloop.last -%},{%- endunless -%}
                        {%- endfor -%}
                    ]
                }{%- unless forloop.last -%},{%- endunless -%}
                {% comment %} End of include for the item.liquid for calendar {% endcomment %}
			],
			eventTimeFormat: {
				hour: 'numeric',
				minute: '2-digit',
				meridiem: 'short'
			},
			displayEventEnd: true,
		});
		calendar.render();
	});
</script>

<section class="calendar calendar-01">
	<div class="container">
		<div class="row">
			<div class="col-12">
				<div id='calendar'></div>
			</div>
		</div>
	</div>
</section>

Siteglide Design System is built on the Bootstrap 4 Framework

Far far away, behind the word mountains, far from the countries Vokalia and Consonantia, there.

Button Label Button Label

<section class="call-to-action call-to-action-16 bg-dark background-image" style="background-image: url('{{ 'images/content/design-system-placeholder.svg' | asset_url }}')">
  <div class="container">
    <div class="row align-items-center text-center text-md-left">
      <div class="col-12 col-md-6">
        <h2>Siteglide Design System is built on the Bootstrap 4 Framework</h2>
        <p>Far far away, behind the word mountains, far from the countries Vokalia and Consonantia, there.</p>
        <div class="d-flex justify-content-center justify-content-md-start">
          <a class="btn btn-primary" href="#" title="">Button Label</a>
          <a class="btn btn-secondary" href="#" title="">Button Label</a>
        </div>
      </div>
    </div>
  </div>
</section>

Contact Us

Far far away, behind the word mountains, far from the countries Vokalia and Consonantia, there live the blind texts. Separated they live in Bookmarksgrove. It is a paradisematic country, in which roasted parts of sentences fly into your mouth.

Email:hello@website.com

Phone:+44 123 123 1232

<section class="contact contact-01">
  <div class="responsive-map-container">
    <iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d2491.2734232460607!2d-1.166107048287033!3d51.36126997951131!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x4876a6c6cf3cee6f%3A0xfa5ccfb53ce09608!2sSiteglide!5e0!3m2!1sen!2suk!4v1569839056137!5m2!1sen!2suk" width="800" height="600" frameborder="0" allowfullscreen=""></iframe>
  </div>
  <div class="container">
    <div class="row">
      <div class="col-12 col-md-5">
        <h2>Contact Us</h2>
        <p>Far far away, behind the word mountains, far from the countries Vokalia and Consonantia, there live the blind texts. Separated they live in Bookmarksgrove. It is a paradisematic country, in which roasted parts of sentences fly into your mouth.</p>
        <p><strong>Email:</strong><a href="mailto:hello@website.com" title="">hello@website.com</a></p>
        <p><strong>Phone:</strong><a href="tel:+441231231232" title="">+44 123 123 1232</a></p>
      </div>
      <div class="col-12 col-md-6 offset-md-1">
        <form>
          <div class="row">
            <div class="col-12 col-md-6">
              <div class="form-group"> 
                <label for="form-first-name">First Name</label>
                <input type="text" id="form-first-name" placeholder="First Name">
              </div>
            </div>
            <div class="col-12 col-md-6">
              <div class="form-group"> 
                <label for="form-last-name">Last Name</label>
                <input type="text" id="form-last-name" placeholder="Last Name">
              </div>
            </div>
          </div>
          <div class="row">
            <div class="col-12">
              <div class="form-group"> 
                <label for="form-email-address">Email Address</label>
                <input type="email" id="form-email-address" placeholder="Email Address">
              </div>
            </div>
          </div>
          <div class="row">
            <div class="col-12">
              <div class="form-group"> 
                <label for="form-subject-line">Subject Line</label>
                <input type="text" id="form-subject-line" placeholder="Subject Line">
              </div>
            </div>
          </div>
          <div class="row">
            <div class="col-12">
              <div class="form-group"> 
                <label for="form-your-message">Your Message</label>
                <textarea id="form-your-message" placeholder="Your Message" rows="5"></textarea>
              </div>
            </div>
          </div>
          <button type="submit" role="button" class="btn btn-primary">Submit</button>
        </form>
      </div>
    </div>
  </div>
</section>

Contact Us

Far far away, behind the word mountains, far from the countries Vokalia and Consonantia, there live the blind texts.

Call or email

Support, Sales, and Account Management services are currently available in English

Support

+800 3005 4300

Contact Support

Our technical support is available by phone or email from 11am to 11pm BST, Monday through Friday.

Sales

+800 3005 4300

Contact Sales

Our technical support is available by phone or email from 11am to 11pm BST, Monday through Friday.

General Inquiries

hello@website.com

Drop us a line

<section class="contact contact-08">
    <div class="contact-08-header">
        <div class="container">
            <div class="row">
                <div class="col-12 col-md-6">
                    <h2>Contact Us</h2>
                    <p>Far far away, behind the word mountains, far from the countries Vokalia and Consonantia, there live the blind texts.</p>
                </div>
            </div>
        </div>
    </div>
    <div class="container">
        <div class="row">
            <div class="col-12 col-md-4">
                <h3>Call or email</h3>
                <p>Support, Sales, and Account Management services are currently available in English</p>
                <h4>Support</h4>
                <p>+800 3005 4300</p>
                <a href="#" title="">Contact Support</a>
                <p>Our technical support is available by phone or email from 11am to 11pm BST, Monday through Friday.</p>
                <h4>Sales</h4>
                <p>+800 3005 4300</p>
                <a href="#" title="">Contact Sales</a>
                <p>Our technical support is available by phone or email from 11am to 11pm BST, Monday through Friday.</p>
                <h4>General Inquiries</h4>
                <a href="mailto:#" title="">hello@website.com</a>
            </div>
            <div class="col-12 col-md-7 offset-md-1">
                <h3>Drop us a line</h3> 
                <form>
                    <div class="row">
                        <div class="col-12 col-md-6">
                            <div class="form-group"> 
                                <label class="sr-only" for="form-first-name">First Name</label>
                                <input type="text" id="form-first-name" placeholder="First Name">
                            </div>
                        </div>
                        <div class="col-12 col-md-6">
                            <div class="form-group"> 
                                <label class="sr-only" for="form-last-name">Last Name</label>
                                <input type="text" id="form-last-name" placeholder="Last Name">
                            </div>
                        </div>
                    </div>
                    <div class="row">
                        <div class="col-12">
                            <div class="form-group"> 
                                <label class="sr-only" for="form-company-name">Company Name</label>
                                <input type="text" id="form-company-name" placeholder="Company Name">
                            </div>
                        </div>
                    </div>
                    <div class="row">
                        <div class="col-12">
                            <div class="form-group"> 
                                <label class="sr-only" for="form-email">Email</label>
                                <input type="email" id="form-email" placeholder="Email">
                            </div>
                        </div>
                    </div>
                    <div class="row">
                        <div class="col-12 col-md-6">
                            <div class="form-group"> 
                                <label class="sr-only" for="form-phone">Phone</label>
                                <input type="tel" id="form-phone" placeholder="Phone">
                            </div>
                        </div>
                        <div class="col-12 col-md-6">
                            <div class="form-group"> 
                                <label class="sr-only" for="form-website">Last Name</label>
                                <input type="url" id="form-website" placeholder="Website">
                            </div>
                        </div>
                    </div>
                    <div class="row">
                        <div class="col-12">
                            <div class="form-group">
                                <label class="sr-only" for="select-1">Select your service</label>
                                <div class="form-select">
                                    <select class="form-control" id="select-1">
                                        <option>1</option>
                                        <option>2</option>
                                        <option>3</option>
                                        <option>4</option>
                                        <option>5</option>
                                    </select>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="row">
                        <div class="col-12">
                            <div class="form-group"> 
                                <label class="sr-only" for="form-your-message">Your Message</label>
                                <textarea id="form-your-message" placeholder="Your Message" rows="5"></textarea>
                            </div>
                        </div>
                    </div>
                    <button type="submit" role="button" class="btn btn-primary">Submit</button>
                </form>
            </div>
        </div>
    </div>
</section>

support@website.com

Far far away, behind the word mountains, far from the countries Vokalia and Consonantia, there live the blind texts.

<section class="contact contact-09">
    <div class="container">
        <div class="row">
            <div class="col-12 text-center">
                <h2>support@website.com</h2>
                <p>Far far away, behind the word mountains, far from the countries Vokalia and Consonantia, there live the blind texts.</p>
                <ul class="list-inline">
                     <li class="list-inline-item"><a href="https://www.facebook.com/"  target="_blank" title="" class="mr-3"><i class="fab fa-facebook-f fa-lg"></i></a></li>
                     <li class="list-inline-item"><a href="https://twitter.com/"  target="_blank" title="" class="mr-3"><i class="fab fa-twitter fa-lg"></i></a></li>
                     <li class="list-inline-item"><a href="https://www.instagrams.com/"  target="_blank" title="" class="mr-3"><i class="fab fa-instagram fa-lg"></i></a></li>
                     <li class="list-inline-item"><a href="https://www.pinterest.com/"  target="_blank" title="" class="mr-3"><i class="fab fa-pinterest fa-lg"></i></a></li>
                     <li class="list-inline-item"><a href="mailto:you@example.com"  target="_blank" title=""><i class="fas fa-envelope fa-lg"></i></a></li>
                </ul>
            </div>
        </div>
    </div>
</section>

Flying High

Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.

Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus leo ante, consectetur sit amet vulputate vel, dapibus sit amet lectus.

Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. Lorem ipsum dolor sit amet, consectetur adipiscing elit.

Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus leo ante, consectetur sit amet vulputate vel, dapibus sit amet lectus.

Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s.

Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus leo ante, consectetur sit amet vulputate vel, dapibus sit amet lectus.

<section class="content content-01">
    <div class="container">
         <div class="row">
            <div class="col-12 text-center">
                 <span class="fa-stack fa-2x mb-3">
                     <i class="far fa-square fa-stack-2x"></i>
                     <i class="fas fa-flag fa-stack-1x"></i>
                </span>
                <h2>Flying High</h2>
            </div>
        </div>
        <div class="row">
            <div class="col-12 col-md-6">
                <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the
                    industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and
                    scrambled it to make a type specimen book.</p>
                <p>Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a
                    galley of type and scrambled it to make a type specimen book. Lorem ipsum dolor sit amet, consectetur
                    adipiscing elit. Vivamus leo ante, consectetur sit amet vulputate vel, dapibus sit amet lectus.</p>
                <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the
                    industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and
                    scrambled it to make a type specimen book. Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
            </div>
            <div class="col-12 col-md-6">
                <p>Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a
                    galley of type and scrambled it to make a type specimen book. Lorem ipsum dolor sit amet, consectetur
                    adipiscing elit. Vivamus leo ante, consectetur sit amet vulputate vel, dapibus sit amet lectus.</p>
                <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the
                    industry's standard dummy text ever since the 1500s.</p>
                <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the
                    industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and
                    scrambled it to make a type specimen book. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus
                    leo ante, consectetur sit amet vulputate vel, dapibus sit amet lectus.</p>
            </div>
        </div>
    </div>
</section>

Siteglide Design System

Subtitle comes here

ButtonLabel Buy

<section class="content content-02">
  <div class="container">
    <div class="row">
      <div class="col-12 text-center">
        <h2>Siteglide Design System</h2>
        <p class="subtitle">Subtitle comes here</p>
        <a class="btn btn-primary" href="#">ButtonLabel</a>
        <a class="btn btn-secondary" href="#">Buy</a>
        <img src="{{ 'images/content/design-system-placeholder.svg' | asset_url }}">
      </div>
    </div>
  </div>
</section>

Siteglide Design System

<section class="content content-03">
    <div class="container">
        <div class="row">
            <div class="col-12">
                <h2 class="text-center">Siteglide Design System</h2>
            </div>
        </div>
        <div class="row">
            <div class="col-12 col-md-6">
                <img src="{{ 'images/content/design-system-placeholder.svg' | asset_url }}">
            </div>
            <div class="col-12 col-md-6">
                <img src="{{ 'images/content/design-system-placeholder.svg' | asset_url }}">
            </div>
        </div>
        <div class="row">
            <div class="col-12">
                <img class="mt-4" src="{{ 'images/content/design-system-placeholder.svg' | asset_url }}">
            </div>
        </div>
    </div>
</section>

Siteglide Design System

<section class="content content-04">
    <div class="container">
        <h2 class="text-center">Siteglide Design System</h2 >
        <div class="row">
            <div class="col-12 col-md-4">
                <img src="{{ 'images/content/design-system-placeholder.svg' | asset_url }}">
            </div>
            <div class="col-12 col-md-4">
                <img src="{{ 'images/content/design-system-placeholder.svg' | asset_url }}">
            </div>
            <div class="col-12 col-md-4">
                <img src="{{ 'images/content/design-system-placeholder.svg' | asset_url }}">
            </div>
        </div>
    </div>
</section>

Design System

Far far away, behind the word mountains, far from the countries Vokalia and Consonantia, there live the blind texts

<section class="content content-05">
  <div class="container">
    <div class="row align-items-center">
      <div class="col-12 col-md-4 offset-md-1">
        <h2>Design System</h2>
        <p>Far far away, behind the word mountains, far from the countries Vokalia and Consonantia, there live the blind texts</p>
      </div>
      <div class="col-12 col-md-6 offset-md-1">
          <img src="{{ 'images/content/design-system-placeholder.svg' | asset_url }}" alt="">
      </div>
    </div>
  </div>
</section>

Design System

Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.

Button Label

<section class="content content-06">
  <div class="container">
    <div class="row align-items-center">
      <div class="col-12 col-md-6">
        <img src="{{ 'images/content/design-system-placeholder.svg' | asset_url }}">
      </div>
      <div class="col-12 col-md-5 offset-md-1">
        <h2>Design System</h2>
        <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the
            industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and
            scrambled it to make a type specimen book.</p>
        <a class="btn btn-primary" href="#" title="">Button Label</a>
      </div>
    </div>
  </div>
</section>

Siteglide Design System is Open Source and free to use

Far, far away, behind the word mountains, far from the countries Vokalia and Consonantia, there live the blind texts.

<section class="content content-07">
    <div class="container-fluid">
        <div class="row align-items-center">
            <div class="col-12 col-md-4 offset-md-1 text-center text-md-left">
                <span class="fa-stack fa-2x">
                    <i class="far fa-square fa-stack-2x"></i>
                    <i class="fas fa-flag fa-stack-1x"></i>
                </span>
                <h2>Siteglide Design System is Open Source and free to use</h2>
                <p>Far, far away, behind the word mountains, far from the countries Vokalia and Consonantia, there live the blind texts.</p>
            </div>
            <div class="col-12 col-md-6 offset-md-1">
                <img src="{{ 'images/content/design-system-placeholder.svg' | asset_url }}" alt="">
            </div>
        </div>
    </div>
</section>

Far far away, behind the word mountains, far from the countries Vokalia and Consonantia, there live the blind texts. Separated they live in Bookmarksgrove right at the coast of the Semantics, a large language ocean.

<section class="content content-08">
    <div class="container">
        <div class="row justify-content-center">
            <span class="fa-stack fa-2x">
                <i class="far fa-square fa-stack-2x"></i>
                <i class="fas fa-flag fa-stack-1x"></i>
            </span>
            <span class="fa-stack fa-2x">
                <i class="far fa-square fa-stack-2x"></i>
                <i class="fas fa-flag fa-stack-1x"></i>
            </span>
            <span class="fa-stack fa-2x">
                <i class="far fa-square fa-stack-2x"></i>
                <i class="fas fa-flag fa-stack-1x"></i>
            </span>
        </div>
        <div class="row">
            <div class="col-md-8 offset-md-2 text-center">
                <p>Far far away, behind the word mountains, far from the countries Vokalia and Consonantia, there live the blind texts. Separated they live in Bookmarksgrove right at the coast of the Semantics, a large language ocean.</p>
            </div>
        </div>
    </div>
</section>

Siteglide Design System is Open Source and free to use

Far, far away, behind the word mountains, far from the countries Vokalia and Consonantia, there live the blind texts.

Button Label

<section class="content content-09">
    <div class="container-fluid">
        <div class="row align-items-center">
            <div class="col-12 col-md-6">
                <img src="{{ 'images/content/design-system-placeholder.svg' | asset_url }}" alt="">
            </div>
            <div class="col-12 col-md-4 offset-md-1">
                <h2>Siteglide Design System is Open Source and free to use</h2>
                <p>Far, far away, behind the word mountains, far from the countries Vokalia and Consonantia, there live the blind texts.</p>
                <a class="btn btn-primary" href="#" title="">Button Label</a>
            </div>
        </div>
    </div>
</section>

Awesome Things

Far far away, behind the word mountains, far from the countries Vokalia and Consonantia, there live the blind texts. Far from the countries Vokalia and Consonantia.

More Awesomeness

Separated they live in Bookmarksgrove right at the coast of the Semantics, far far away, behind the word mountains, far from the countries Vokalia and Consonantia, there live the blind texts.

<section class="content content-10">
    <div class="container">
        <div class="row">
            <div class="col-12 col-md-5 offset-md-1">
                <span class="fa-stack fa-2x">
                    <i class="far fa-square fa-stack-2x"></i>
                    <i class="fas fa-flag fa-stack-1x"></i>
                </span>
                <h2>Awesome Things</h2>
                <p>Far far away, behind the word mountains, far from the countries Vokalia and Consonantia, there live the blind texts. Far from the countries Vokalia and Consonantia.</p>
            </div>
            <div class="col-12 col-md-5">
                <span class="fa-stack fa-2x">
                    <i class="far fa-square fa-stack-2x"></i>
                    <i class="fas fa-flag fa-stack-1x"></i>
                </span>
                <h2>More Awesomeness</h2>
                <p>Separated they live in Bookmarksgrove right at the coast of the Semantics, far far away, behind the word mountains, far from the countries Vokalia and Consonantia, there live the blind texts.</p>
            </div>
        </div>
    </div>
</section>

Siteglide Design System

When she reached the first hills of the Italic Mountains, she had a last view back on the skyline of her hometown Bookmarksgrove

Learn More

<section class="content content-11 background-image" style="background-image: url('{{ 'images/content/design-system-placeholder.svg' | asset_url }}')">
    <div class="container">
        <div class="row">
            <div class="col-12 col-lg-6 offset-lg-1">
                <div class="card">
                    <div class="card-body text-center">
                        <h2>Siteglide Design System</h2>
                        <p>When she reached the first hills of the Italic Mountains, she had a last view back on the skyline of her hometown Bookmarksgrove</p>
                        <a href="#" title="">Learn More</a>
                    </div>
                </div>
            </div>
        </div>
    </div>
</section>

Siteglide Design System

When she reached the first hills of the Italic Mountains, she had a last view back on the skyline of her hometown Bookmarksgrove

Button Label

<section class="content content-12 background-image" style="background-image: url('{{ 'images/content/design-system-placeholder.svg' | asset_url }}')">
    <div class="container">
        <div class="row">
            <div class="col-12 col-lg-5 offset-lg-7">
                <div class="card">
                    <div class="card-body text-center">
                        <h2>Siteglide Design System</h2>
                        <p>When she reached the first hills of the Italic Mountains, she had a last view back on the skyline of her hometown Bookmarksgrove</p>
                        <a class="btn btn-primary" href="#" title="">Button Label</a>
                    </div>
                </div>
            </div>
        </div>
    </div>
</section>

Siteglide Design Systems

Separated they live in Bookmarksgrove right at the coast of the Semantics, a large language ocean. A small river named Duden flows by their place and supplies

Button Label

Latest Version: 2.3.5

<section class="content content-13">
  <div class="container">
    <div class="row justify-content-center">
      <div class="col-12 col-md-6 text-center">
        <h2>Siteglide Design Systems</h2>
        <p>Separated they live in Bookmarksgrove right at the coast of the Semantics, a large language ocean. A small river named Duden flows by their place and supplies</p>
        <div>
          <a class="btn btn-primary" href="#" title="">Button Label</a>
        </div>
        <p>Latest Version: 2.3.5</p>
      </div>
    </div>
  </div>
</section>

Siteglide Design System is Open Source and free to use

Far, far away, behind the word mountains, far from the countries Vokalia and Consonantia, there live the blind texts.

Button Label Button Label

<section class="content content-14">
    <div class="container-fluid">
        <div class="row align-items-center">
            <div class="col-12 col-md-6">
                <img src="{{ 'images/content/design-system-placeholder.svg' | asset_url }}" alt="">
            </div>
            <div class="col-12 col-md-5 offset-md-1 text-center text-md-left">
                <span class="fa-stack fa-2x">
                    <i class="far fa-square fa-stack-2x"></i>
                    <i class="fas fa-flag fa-stack-1x"></i>
                </span>
                <h2>Siteglide Design System is Open Source and free to use</h2>
                <p>Far, far away, behind the word mountains, far from the countries Vokalia and Consonantia, there live the blind texts.</p>
                <a class="btn btn-primary" href="#" title="">Button Label</a>
                <a class="btn btn-primary" href="#" title="">Button Label</a>
            </div>
        </div>
    </div>
</section>

Design System

Far, far away, behind the word mountains, far from the countries Vokalia and Consonantia, there live the blind texts.

<section class="content content-15">
    <div class="container-fluid">
        <div class="row align-items-center">
            <div class="col-12 col-md-5 offset-md-1 text-center text-md-left">
                <h2>Design System</h2>
                <p>Far, far away, behind the word mountains, far from the countries Vokalia and Consonantia, there live the blind texts.</p>
                <div class="d-flex flex-column flex-md-row flex-wrap align-items-center">
                    <svg width="112" height="32" viewBox="0 0 112 32" fill="none" xmlns="http://www.w3.org/2000/svg">
                        <path fill-rule="evenodd" clip-rule="evenodd" d="M4.95423 23.548C6.17107 23.548 7.17603 23.3491 7.96915 22.9512C8.76227 22.5533 9.15883 21.8814 9.15883 20.9351C9.15883 20.4835 9.08817 20.0964 8.94693 19.7739C8.80568 19.4513 8.57213 19.161 8.24617 18.9029C7.92026 18.6448 7.49111 18.3976 6.95871 18.161C6.42638 17.9245 5.76907 17.6449 4.98682 17.3223C4.35668 17.0643 3.75913 16.8008 3.19418 16.532C2.62922 16.2632 2.12945 15.9514 1.69487 15.5966C1.26029 15.2417 0.912624 14.817 0.651874 14.3224C0.391124 13.8277 0.26075 13.2256 0.26075 12.516C0.26075 11.1611 0.776813 10.0644 1.80895 9.2257C2.84108 8.38702 4.2589 7.96765 6.06241 7.96765C7.21403 7.96765 8.16469 8.06441 8.91434 8.258C9.66398 8.45153 10.1909 8.62357 10.4952 8.77407L10.0062 10.645C9.74546 10.516 9.30549 10.344 8.6862 10.1289C8.06692 9.91387 7.15973 9.80634 5.96463 9.80634C5.48659 9.80634 5.03571 9.85472 4.612 9.95148C4.18828 10.0482 3.81345 10.1988 3.48752 10.4031C3.16158 10.6074 2.90083 10.8654 2.70527 11.1773C2.50971 11.4891 2.41193 11.8708 2.41193 12.3224C2.41193 12.774 2.49885 13.1611 2.67268 13.4837C2.84651 13.8063 3.10182 14.0912 3.43863 14.3385C3.77543 14.5858 4.18828 14.817 4.67719 15.032C5.16609 15.2471 5.72561 15.4837 6.35573 15.7417C7.0076 15.9997 7.63236 16.2632 8.22987 16.532C8.82745 16.8008 9.35437 17.1234 9.8107 17.4997C10.267 17.876 10.6364 18.3277 10.9188 18.8546C11.2013 19.3814 11.3426 20.0427 11.3426 20.8384C11.3426 22.3437 10.7722 23.4835 9.63139 24.2577C8.49066 25.0318 6.9316 25.4189 4.95423 25.4189C3.47665 25.4189 2.34674 25.2953 1.56449 25.048C0.782249 24.8006 0.26075 24.6125 0 24.4834L0.55409 22.5802C0.619277 22.6233 0.760518 22.6931 0.977811 22.79C1.1951 22.8867 1.48844 22.9942 1.85784 23.1125C2.22723 23.2308 2.66724 23.3329 3.17788 23.4189C3.68851 23.505 4.28063 23.548 4.95423 23.548Z" fill="#7E7E7E"/>
                        <path fill-rule="evenodd" clip-rule="evenodd" d="M15.6122 25.0317H13.4937V8.35464H15.6122V25.0317ZM16.1012 3.32244C16.1012 3.81709 15.949 4.20956 15.6448 4.49985C15.3406 4.79014 14.9713 4.93534 14.5367 4.93534C14.1021 4.93534 13.7327 4.79014 13.4285 4.49985C13.1243 4.20956 12.9722 3.81709 12.9722 3.32244C12.9722 2.82785 13.1243 2.43538 13.4285 2.14503C13.7327 1.85474 14.1021 1.70959 14.5367 1.70959C14.9713 1.70959 15.3406 1.85474 15.6448 2.14503C15.949 2.43538 16.1012 2.82785 16.1012 3.32244Z" fill="#7E7E7E"/>
                        <path fill-rule="evenodd" clip-rule="evenodd" d="M21.251 8.35467H27.9652V10.1288H21.251V18.9996C21.251 19.9458 21.3324 20.7146 21.4954 21.306C21.6583 21.8974 21.892 22.3544 22.1962 22.6769C22.5004 22.9995 22.8697 23.2145 23.3044 23.3221C23.7389 23.4296 24.217 23.4834 24.7385 23.4834C25.6294 23.4834 26.3464 23.3812 26.8896 23.1769C27.4328 22.9726 27.8566 22.7844 28.1608 22.6124L28.6823 24.3543C28.3781 24.5478 27.8457 24.7683 27.0852 25.0156C26.3246 25.2629 25.499 25.3866 24.6081 25.3866C23.5651 25.3866 22.6905 25.2521 21.9843 24.9833C21.2781 24.7145 20.7132 24.3059 20.2894 23.7576C19.8657 23.2092 19.5669 22.5264 19.3931 21.7092C19.2193 20.892 19.1323 19.9243 19.1323 18.8061V3.45151L21.251 3.06445V8.35467Z" fill="#7E7E7E"/>
                        <path fill-rule="evenodd" clip-rule="evenodd" d="M29.5623 16.6771C29.5623 15.2148 29.7741 13.9407 30.1978 12.8547C30.6216 11.7687 31.1756 10.8601 31.8601 10.1289C32.5445 9.39774 33.3268 8.85477 34.2069 8.49991C35.0869 8.14505 35.994 7.96765 36.9284 7.96765C38.9927 7.96765 40.6386 8.63434 41.8663 9.96761C43.094 11.3009 43.7079 13.3546 43.7079 16.1288C43.7079 16.3008 43.7025 16.4728 43.6916 16.6449C43.6807 16.8169 43.6644 16.9782 43.6427 17.1288H31.8112C31.8764 19.1717 32.3871 20.7416 33.3431 21.8383C34.2992 22.9351 35.8202 23.4835 37.9062 23.4835C39.0579 23.4835 39.9705 23.376 40.6441 23.1609C41.3177 22.9458 41.8066 22.7631 42.1108 22.6125L42.5019 24.4189C42.1977 24.591 41.6273 24.7953 40.7908 25.0318C39.9542 25.2684 38.9709 25.3866 37.841 25.3866C36.3634 25.3866 35.1032 25.1716 34.0602 24.7415C33.0172 24.3114 32.1589 23.7093 31.4853 22.9351C30.8117 22.1609 30.3228 21.2416 30.0186 20.1771C29.7144 19.1126 29.5623 17.946 29.5623 16.6771ZM41.5241 15.3546C41.4806 13.6127 41.0677 12.2579 40.2855 11.2902C39.5033 10.3225 38.3951 9.83859 36.9609 9.83859C36.2004 9.83859 35.5214 9.98915 34.9238 10.2902C34.3263 10.5913 33.8048 10.9945 33.3594 11.4999C32.9139 12.0052 32.5663 12.5912 32.3164 13.2579C32.0665 13.9246 31.9198 14.6234 31.8763 15.3546H41.5241Z" fill="#7E7E7E"/>
                        <path fill-rule="evenodd" clip-rule="evenodd" d="M49.9334 16.161C49.9334 17.8168 50.2974 19.0265 51.0253 19.7899C51.7533 20.5533 52.6931 20.935 53.8447 20.935C54.4749 20.935 55.067 20.849 55.6211 20.677C56.1752 20.5049 56.626 20.3006 56.9737 20.0641V11.3223C56.6912 11.2578 56.3435 11.1987 55.9307 11.1449C55.5178 11.0912 54.9963 11.0643 54.3662 11.0643C52.9321 11.0643 51.8348 11.532 51.0742 12.4675C50.3137 13.4029 49.9334 14.6341 49.9334 16.161ZM60.9172 23.3221C60.9172 26.0102 60.2276 27.9779 58.8478 29.2252C57.468 30.4725 55.3549 31.0961 52.5084 31.0961C51.4654 31.0961 50.4496 31.0101 49.4609 30.838C48.4722 30.666 47.5759 30.4402 46.7719 30.1606L47.489 26.8381C48.1626 27.1177 48.9285 27.3435 49.7868 27.5155C50.6451 27.6876 51.574 27.7736 52.5735 27.7736C54.1598 27.7736 55.2897 27.451 55.9633 26.8059C56.6369 26.1607 56.9737 25.2038 56.9737 23.9349V23.2898C56.5826 23.4834 56.0665 23.6769 55.4255 23.8704C54.7845 24.064 54.0511 24.1608 53.2254 24.1608C52.139 24.1608 51.1448 23.9887 50.2431 23.6447C49.3413 23.3006 48.57 22.7952 47.9289 22.1286C47.288 21.4619 46.7882 20.6286 46.4297 19.6286C46.0712 18.6286 45.8918 17.4727 45.8918 16.161C45.8918 14.9352 46.082 13.8061 46.4622 12.7739C46.8425 11.7417 47.3966 10.86 48.1245 10.1288C48.8524 9.39763 49.7379 8.82777 50.7809 8.41917C51.8239 8.01057 53.0082 7.80627 54.3336 7.80627C55.6156 7.80627 56.8325 7.90304 57.9841 8.09656C59.1358 8.29015 60.1135 8.49445 60.9172 8.70946V23.3221Z" fill="#9B9B9B"/>
                        <path fill-rule="evenodd" clip-rule="evenodd" d="M69.5871 25.3543C68.4142 25.3328 67.4414 25.2038 66.6704 24.9672C65.8988 24.7307 65.2853 24.392 64.8287 23.9511C64.3726 23.5103 64.0516 22.9619 63.8674 22.306C63.6825 21.6501 63.5901 20.9028 63.5901 20.0641V0.645149L67.5338 0V19.3222C67.5338 19.7953 67.5721 20.1932 67.6481 20.5157C67.7241 20.8383 67.8597 21.1125 68.0555 21.3383C68.2513 21.5641 68.517 21.7361 68.8538 21.8544C69.1907 21.9727 69.62 22.064 70.1417 22.1286L69.5871 25.3543Z" fill="#9B9B9B"/>
                        <mask id="mask0" mask-type="alpha" maskUnits="userSpaceOnUse" x="72" y="0" width="7" height="6">
                            <path fill-rule="evenodd" clip-rule="evenodd" d="M78.1458 0.111206L74.8119 3.66281L74.1121 5.22432L72.2947 3.14968L78.1458 0.111206Z" fill="white"/>
                        </mask>
                        <g mask="url(#mask0)">
                            <path fill-rule="evenodd" clip-rule="evenodd" d="M71.5122 5.99884H78.9284V-0.663452H71.5122V5.99884Z" fill="#737373"/>
                        </g>
                        <mask id="mask1" mask-type="alpha" maskUnits="userSpaceOnUse" x="69" y="0" width="10" height="4">
                            <path fill-rule="evenodd" clip-rule="evenodd" d="M78.149 0.110352L72.3009 3.15262H69.6377L78.149 0.110352Z" fill="white"/>
                        </mask>
                        <g mask="url(#mask1)">
                            <path fill-rule="evenodd" clip-rule="evenodd" d="M68.8552 3.92714H78.9321V-0.664307H68.8552V3.92714Z" fill="#9B9B9B"/>
                        </g>
                        <mask id="mask2" mask-type="alpha" maskUnits="userSpaceOnUse" x="74" y="0" width="5" height="6">
                            <path fill-rule="evenodd" clip-rule="evenodd" d="M78.1501 0.106934L76.6501 5.1571L74.812 3.65986L78.1501 0.106934Z" fill="white"/>
                        </mask>
                        <g mask="url(#mask2)">
                            <path fill-rule="evenodd" clip-rule="evenodd" d="M74.0295 5.93168H78.9328V-0.667725H74.0295V5.93168Z" fill="#9B9B9B"/>
                        </g>
                        <path fill-rule="evenodd" clip-rule="evenodd" d="M72.0642 25.0317H76.008V8.16113H72.0642V25.0317Z" fill="#9B9B9B"/>
                        <path fill-rule="evenodd" clip-rule="evenodd" d="M82.8204 16.5481C82.8204 18.2684 83.2333 19.6179 84.059 20.5964C84.8847 21.5748 86.0254 22.0641 87.481 22.0641C88.1115 22.0641 88.649 22.0372 89.0947 21.9834C89.5398 21.9297 89.904 21.8705 90.1867 21.806V12.1288C89.8389 11.8922 89.3768 11.6718 88.801 11.4675C88.2252 11.2633 87.6117 11.1611 86.9599 11.1611C85.5255 11.1611 84.4773 11.645 83.8145 12.6127C83.1518 13.5804 82.8204 14.8922 82.8204 16.5481ZM94.1305 24.5156C93.3479 24.7522 92.3647 24.9672 91.1809 25.1608C89.9964 25.3543 88.7524 25.4511 87.4488 25.4511C86.1014 25.4511 84.8956 25.2468 83.831 24.8382C82.7663 24.4296 81.8591 23.8436 81.1094 23.0802C80.3597 22.3167 79.7839 21.392 79.382 20.306C78.9795 19.22 78.7788 17.9996 78.7788 16.6448C78.7788 15.3115 78.9472 14.1019 79.2841 13.0159C79.6209 11.9299 80.1153 10.9998 80.7671 10.2256C81.4189 9.4514 82.2118 8.85469 83.1463 8.43532C84.0809 8.01595 85.1565 7.8063 86.3732 7.8063C87.1989 7.8063 87.9267 7.90306 88.5566 8.09659C89.1871 8.29018 89.7301 8.50519 90.1868 8.74174V0.645149L94.1305 0V24.5156Z" fill="#9B9B9B"/>
                        <path fill-rule="evenodd" clip-rule="evenodd" d="M96.5747 16.6771C96.5747 15.1933 96.7972 13.8922 97.2429 12.7739C97.6886 11.6557 98.2802 10.7256 99.0196 9.98369C99.7584 9.24177 100.605 8.68268 101.562 8.30633C102.518 7.92999 103.495 7.74182 104.495 7.74182C106.842 7.74182 108.673 8.46225 109.987 9.90305C111.302 11.3439 111.959 13.4944 111.959 16.3545C111.959 16.5696 111.954 16.8115 111.943 17.0803C111.932 17.3491 111.915 17.591 111.894 17.8061H100.649C100.757 19.1609 101.241 20.2093 102.099 20.9512C102.958 21.6931 104.202 22.0641 105.831 22.0641C106.787 22.0641 107.662 21.9781 108.455 21.806C109.249 21.634 109.873 21.4512 110.329 21.2576L110.851 24.4511C110.634 24.5587 110.335 24.6716 109.955 24.7899C109.574 24.9081 109.14 25.0156 108.651 25.1124C108.162 25.2092 107.635 25.2898 107.07 25.3543C106.505 25.4189 105.929 25.4511 105.343 25.4511C103.843 25.4511 102.54 25.2307 101.431 24.7899C100.323 24.349 99.4106 23.7361 98.6931 22.9512C97.9762 22.1662 97.4442 21.2415 97.0964 20.1771C96.7486 19.1125 96.5747 17.9459 96.5747 16.6771ZM108.015 14.9352C108.015 14.3976 107.939 13.8868 107.787 13.403C107.635 12.9191 107.412 12.4998 107.119 12.145C106.826 11.7901 106.467 11.5105 106.043 11.3062C105.62 11.1019 105.115 10.9998 104.528 10.9998C103.919 10.9998 103.387 11.1127 102.93 11.3385C102.474 11.5643 102.088 11.86 101.773 12.2256C101.458 12.5912 101.214 13.0105 101.04 13.4837C100.866 13.9568 100.747 14.4406 100.681 14.9352H108.015Z" fill="#9B9B9B"/>
                    </svg>
                    <svg width="112" height="32" viewBox="0 0 112 32" fill="none" xmlns="http://www.w3.org/2000/svg">
                        <path fill-rule="evenodd" clip-rule="evenodd" d="M4.95423 23.548C6.17107 23.548 7.17603 23.3491 7.96915 22.9512C8.76227 22.5533 9.15883 21.8814 9.15883 20.9351C9.15883 20.4835 9.08817 20.0964 8.94693 19.7739C8.80568 19.4513 8.57213 19.161 8.24617 18.9029C7.92026 18.6448 7.49111 18.3976 6.95871 18.161C6.42638 17.9245 5.76907 17.6449 4.98682 17.3223C4.35668 17.0643 3.75913 16.8008 3.19418 16.532C2.62922 16.2632 2.12945 15.9514 1.69487 15.5966C1.26029 15.2417 0.912624 14.817 0.651874 14.3224C0.391124 13.8277 0.26075 13.2256 0.26075 12.516C0.26075 11.1611 0.776813 10.0644 1.80895 9.2257C2.84108 8.38702 4.2589 7.96765 6.06241 7.96765C7.21403 7.96765 8.16469 8.06441 8.91434 8.258C9.66398 8.45153 10.1909 8.62357 10.4952 8.77407L10.0062 10.645C9.74546 10.516 9.30549 10.344 8.6862 10.1289C8.06692 9.91387 7.15973 9.80634 5.96463 9.80634C5.48659 9.80634 5.03571 9.85472 4.612 9.95148C4.18828 10.0482 3.81345 10.1988 3.48752 10.4031C3.16158 10.6074 2.90083 10.8654 2.70527 11.1773C2.50971 11.4891 2.41193 11.8708 2.41193 12.3224C2.41193 12.774 2.49885 13.1611 2.67268 13.4837C2.84651 13.8063 3.10182 14.0912 3.43863 14.3385C3.77543 14.5858 4.18828 14.817 4.67719 15.032C5.16609 15.2471 5.72561 15.4837 6.35573 15.7417C7.0076 15.9997 7.63236 16.2632 8.22987 16.532C8.82745 16.8008 9.35437 17.1234 9.8107 17.4997C10.267 17.876 10.6364 18.3277 10.9188 18.8546C11.2013 19.3814 11.3426 20.0427 11.3426 20.8384C11.3426 22.3437 10.7722 23.4835 9.63139 24.2577C8.49066 25.0318 6.9316 25.4189 4.95423 25.4189C3.47665 25.4189 2.34674 25.2953 1.56449 25.048C0.782249 24.8006 0.26075 24.6125 0 24.4834L0.55409 22.5802C0.619277 22.6233 0.760518 22.6931 0.977811 22.79C1.1951 22.8867 1.48844 22.9942 1.85784 23.1125C2.22723 23.2308 2.66724 23.3329 3.17788 23.4189C3.68851 23.505 4.28063 23.548 4.95423 23.548Z" fill="#7E7E7E"/>
                        <path fill-rule="evenodd" clip-rule="evenodd" d="M15.6122 25.0317H13.4937V8.35464H15.6122V25.0317ZM16.1012 3.32244C16.1012 3.81709 15.949 4.20956 15.6448 4.49985C15.3406 4.79014 14.9713 4.93534 14.5367 4.93534C14.1021 4.93534 13.7327 4.79014 13.4285 4.49985C13.1243 4.20956 12.9722 3.81709 12.9722 3.32244C12.9722 2.82785 13.1243 2.43538 13.4285 2.14503C13.7327 1.85474 14.1021 1.70959 14.5367 1.70959C14.9713 1.70959 15.3406 1.85474 15.6448 2.14503C15.949 2.43538 16.1012 2.82785 16.1012 3.32244Z" fill="#7E7E7E"/>
                        <path fill-rule="evenodd" clip-rule="evenodd" d="M21.251 8.35467H27.9652V10.1288H21.251V18.9996C21.251 19.9458 21.3324 20.7146 21.4954 21.306C21.6583 21.8974 21.892 22.3544 22.1962 22.6769C22.5004 22.9995 22.8697 23.2145 23.3044 23.3221C23.7389 23.4296 24.217 23.4834 24.7385 23.4834C25.6294 23.4834 26.3464 23.3812 26.8896 23.1769C27.4328 22.9726 27.8566 22.7844 28.1608 22.6124L28.6823 24.3543C28.3781 24.5478 27.8457 24.7683 27.0852 25.0156C26.3246 25.2629 25.499 25.3866 24.6081 25.3866C23.5651 25.3866 22.6905 25.2521 21.9843 24.9833C21.2781 24.7145 20.7132 24.3059 20.2894 23.7576C19.8657 23.2092 19.5669 22.5264 19.3931 21.7092C19.2193 20.892 19.1323 19.9243 19.1323 18.8061V3.45151L21.251 3.06445V8.35467Z" fill="#7E7E7E"/>
                        <path fill-rule="evenodd" clip-rule="evenodd" d="M29.5623 16.6771C29.5623 15.2148 29.7741 13.9407 30.1978 12.8547C30.6216 11.7687 31.1756 10.8601 31.8601 10.1289C32.5445 9.39774 33.3268 8.85477 34.2069 8.49991C35.0869 8.14505 35.994 7.96765 36.9284 7.96765C38.9927 7.96765 40.6386 8.63434 41.8663 9.96761C43.094 11.3009 43.7079 13.3546 43.7079 16.1288C43.7079 16.3008 43.7025 16.4728 43.6916 16.6449C43.6807 16.8169 43.6644 16.9782 43.6427 17.1288H31.8112C31.8764 19.1717 32.3871 20.7416 33.3431 21.8383C34.2992 22.9351 35.8202 23.4835 37.9062 23.4835C39.0579 23.4835 39.9705 23.376 40.6441 23.1609C41.3177 22.9458 41.8066 22.7631 42.1108 22.6125L42.5019 24.4189C42.1977 24.591 41.6273 24.7953 40.7908 25.0318C39.9542 25.2684 38.9709 25.3866 37.841 25.3866C36.3634 25.3866 35.1032 25.1716 34.0602 24.7415C33.0172 24.3114 32.1589 23.7093 31.4853 22.9351C30.8117 22.1609 30.3228 21.2416 30.0186 20.1771C29.7144 19.1126 29.5623 17.946 29.5623 16.6771ZM41.5241 15.3546C41.4806 13.6127 41.0677 12.2579 40.2855 11.2902C39.5033 10.3225 38.3951 9.83859 36.9609 9.83859C36.2004 9.83859 35.5214 9.98915 34.9238 10.2902C34.3263 10.5913 33.8048 10.9945 33.3594 11.4999C32.9139 12.0052 32.5663 12.5912 32.3164 13.2579C32.0665 13.9246 31.9198 14.6234 31.8763 15.3546H41.5241Z" fill="#7E7E7E"/>
                        <path fill-rule="evenodd" clip-rule="evenodd" d="M49.9334 16.161C49.9334 17.8168 50.2974 19.0265 51.0253 19.7899C51.7533 20.5533 52.6931 20.935 53.8447 20.935C54.4749 20.935 55.067 20.849 55.6211 20.677C56.1752 20.5049 56.626 20.3006 56.9737 20.0641V11.3223C56.6912 11.2578 56.3435 11.1987 55.9307 11.1449C55.5178 11.0912 54.9963 11.0643 54.3662 11.0643C52.9321 11.0643 51.8348 11.532 51.0742 12.4675C50.3137 13.4029 49.9334 14.6341 49.9334 16.161ZM60.9172 23.3221C60.9172 26.0102 60.2276 27.9779 58.8478 29.2252C57.468 30.4725 55.3549 31.0961 52.5084 31.0961C51.4654 31.0961 50.4496 31.0101 49.4609 30.838C48.4722 30.666 47.5759 30.4402 46.7719 30.1606L47.489 26.8381C48.1626 27.1177 48.9285 27.3435 49.7868 27.5155C50.6451 27.6876 51.574 27.7736 52.5735 27.7736C54.1598 27.7736 55.2897 27.451 55.9633 26.8059C56.6369 26.1607 56.9737 25.2038 56.9737 23.9349V23.2898C56.5826 23.4834 56.0665 23.6769 55.4255 23.8704C54.7845 24.064 54.0511 24.1608 53.2254 24.1608C52.139 24.1608 51.1448 23.9887 50.2431 23.6447C49.3413 23.3006 48.57 22.7952 47.9289 22.1286C47.288 21.4619 46.7882 20.6286 46.4297 19.6286C46.0712 18.6286 45.8918 17.4727 45.8918 16.161C45.8918 14.9352 46.082 13.8061 46.4622 12.7739C46.8425 11.7417 47.3966 10.86 48.1245 10.1288C48.8524 9.39763 49.7379 8.82777 50.7809 8.41917C51.8239 8.01057 53.0082 7.80627 54.3336 7.80627C55.6156 7.80627 56.8325 7.90304 57.9841 8.09656C59.1358 8.29015 60.1135 8.49445 60.9172 8.70946V23.3221Z" fill="#9B9B9B"/>
                        <path fill-rule="evenodd" clip-rule="evenodd" d="M69.5871 25.3543C68.4142 25.3328 67.4414 25.2038 66.6704 24.9672C65.8988 24.7307 65.2853 24.392 64.8287 23.9511C64.3726 23.5103 64.0516 22.9619 63.8674 22.306C63.6825 21.6501 63.5901 20.9028 63.5901 20.0641V0.645149L67.5338 0V19.3222C67.5338 19.7953 67.5721 20.1932 67.6481 20.5157C67.7241 20.8383 67.8597 21.1125 68.0555 21.3383C68.2513 21.5641 68.517 21.7361 68.8538 21.8544C69.1907 21.9727 69.62 22.064 70.1417 22.1286L69.5871 25.3543Z" fill="#9B9B9B"/>
                        <mask id="mask0" mask-type="alpha" maskUnits="userSpaceOnUse" x="72" y="0" width="7" height="6">
                            <path fill-rule="evenodd" clip-rule="evenodd" d="M78.1458 0.111206L74.8119 3.66281L74.1121 5.22432L72.2947 3.14968L78.1458 0.111206Z" fill="white"/>
                        </mask>
                        <g mask="url(#mask0)">
                            <path fill-rule="evenodd" clip-rule="evenodd" d="M71.5122 5.99884H78.9284V-0.663452H71.5122V5.99884Z" fill="#737373"/>
                        </g>
                        <mask id="mask1" mask-type="alpha" maskUnits="userSpaceOnUse" x="69" y="0" width="10" height="4">
                            <path fill-rule="evenodd" clip-rule="evenodd" d="M78.149 0.110352L72.3009 3.15262H69.6377L78.149 0.110352Z" fill="white"/>
                        </mask>
                        <g mask="url(#mask1)">
                            <path fill-rule="evenodd" clip-rule="evenodd" d="M68.8552 3.92714H78.9321V-0.664307H68.8552V3.92714Z" fill="#9B9B9B"/>
                        </g>
                        <mask id="mask2" mask-type="alpha" maskUnits="userSpaceOnUse" x="74" y="0" width="5" height="6">
                            <path fill-rule="evenodd" clip-rule="evenodd" d="M78.1501 0.106934L76.6501 5.1571L74.812 3.65986L78.1501 0.106934Z" fill="white"/>
                        </mask>
                        <g mask="url(#mask2)">
                            <path fill-rule="evenodd" clip-rule="evenodd" d="M74.0295 5.93168H78.9328V-0.667725H74.0295V5.93168Z" fill="#9B9B9B"/>
                        </g>
                        <path fill-rule="evenodd" clip-rule="evenodd" d="M72.0642 25.0317H76.008V8.16113H72.0642V25.0317Z" fill="#9B9B9B"/>
                        <path fill-rule="evenodd" clip-rule="evenodd" d="M82.8204 16.5481C82.8204 18.2684 83.2333 19.6179 84.059 20.5964C84.8847 21.5748 86.0254 22.0641 87.481 22.0641C88.1115 22.0641 88.649 22.0372 89.0947 21.9834C89.5398 21.9297 89.904 21.8705 90.1867 21.806V12.1288C89.8389 11.8922 89.3768 11.6718 88.801 11.4675C88.2252 11.2633 87.6117 11.1611 86.9599 11.1611C85.5255 11.1611 84.4773 11.645 83.8145 12.6127C83.1518 13.5804 82.8204 14.8922 82.8204 16.5481ZM94.1305 24.5156C93.3479 24.7522 92.3647 24.9672 91.1809 25.1608C89.9964 25.3543 88.7524 25.4511 87.4488 25.4511C86.1014 25.4511 84.8956 25.2468 83.831 24.8382C82.7663 24.4296 81.8591 23.8436 81.1094 23.0802C80.3597 22.3167 79.7839 21.392 79.382 20.306C78.9795 19.22 78.7788 17.9996 78.7788 16.6448C78.7788 15.3115 78.9472 14.1019 79.2841 13.0159C79.6209 11.9299 80.1153 10.9998 80.7671 10.2256C81.4189 9.4514 82.2118 8.85469 83.1463 8.43532C84.0809 8.01595 85.1565 7.8063 86.3732 7.8063C87.1989 7.8063 87.9267 7.90306 88.5566 8.09659C89.1871 8.29018 89.7301 8.50519 90.1868 8.74174V0.645149L94.1305 0V24.5156Z" fill="#9B9B9B"/>
                        <path fill-rule="evenodd" clip-rule="evenodd" d="M96.5747 16.6771C96.5747 15.1933 96.7972 13.8922 97.2429 12.7739C97.6886 11.6557 98.2802 10.7256 99.0196 9.98369C99.7584 9.24177 100.605 8.68268 101.562 8.30633C102.518 7.92999 103.495 7.74182 104.495 7.74182C106.842 7.74182 108.673 8.46225 109.987 9.90305C111.302 11.3439 111.959 13.4944 111.959 16.3545C111.959 16.5696 111.954 16.8115 111.943 17.0803C111.932 17.3491 111.915 17.591 111.894 17.8061H100.649C100.757 19.1609 101.241 20.2093 102.099 20.9512C102.958 21.6931 104.202 22.0641 105.831 22.0641C106.787 22.0641 107.662 21.9781 108.455 21.806C109.249 21.634 109.873 21.4512 110.329 21.2576L110.851 24.4511C110.634 24.5587 110.335 24.6716 109.955 24.7899C109.574 24.9081 109.14 25.0156 108.651 25.1124C108.162 25.2092 107.635 25.2898 107.07 25.3543C106.505 25.4189 105.929 25.4511 105.343 25.4511C103.843 25.4511 102.54 25.2307 101.431 24.7899C100.323 24.349 99.4106 23.7361 98.6931 22.9512C97.9762 22.1662 97.4442 21.2415 97.0964 20.1771C96.7486 19.1125 96.5747 17.9459 96.5747 16.6771ZM108.015 14.9352C108.015 14.3976 107.939 13.8868 107.787 13.403C107.635 12.9191 107.412 12.4998 107.119 12.145C106.826 11.7901 106.467 11.5105 106.043 11.3062C105.62 11.1019 105.115 10.9998 104.528 10.9998C103.919 10.9998 103.387 11.1127 102.93 11.3385C102.474 11.5643 102.088 11.86 101.773 12.2256C101.458 12.5912 101.214 13.0105 101.04 13.4837C100.866 13.9568 100.747 14.4406 100.681 14.9352H108.015Z" fill="#9B9B9B"/>
                    </svg>
                    <svg width="112" height="32" viewBox="0 0 112 32" fill="none" xmlns="http://www.w3.org/2000/svg">
                        <path fill-rule="evenodd" clip-rule="evenodd" d="M4.95423 23.548C6.17107 23.548 7.17603 23.3491 7.96915 22.9512C8.76227 22.5533 9.15883 21.8814 9.15883 20.9351C9.15883 20.4835 9.08817 20.0964 8.94693 19.7739C8.80568 19.4513 8.57213 19.161 8.24617 18.9029C7.92026 18.6448 7.49111 18.3976 6.95871 18.161C6.42638 17.9245 5.76907 17.6449 4.98682 17.3223C4.35668 17.0643 3.75913 16.8008 3.19418 16.532C2.62922 16.2632 2.12945 15.9514 1.69487 15.5966C1.26029 15.2417 0.912624 14.817 0.651874 14.3224C0.391124 13.8277 0.26075 13.2256 0.26075 12.516C0.26075 11.1611 0.776813 10.0644 1.80895 9.2257C2.84108 8.38702 4.2589 7.96765 6.06241 7.96765C7.21403 7.96765 8.16469 8.06441 8.91434 8.258C9.66398 8.45153 10.1909 8.62357 10.4952 8.77407L10.0062 10.645C9.74546 10.516 9.30549 10.344 8.6862 10.1289C8.06692 9.91387 7.15973 9.80634 5.96463 9.80634C5.48659 9.80634 5.03571 9.85472 4.612 9.95148C4.18828 10.0482 3.81345 10.1988 3.48752 10.4031C3.16158 10.6074 2.90083 10.8654 2.70527 11.1773C2.50971 11.4891 2.41193 11.8708 2.41193 12.3224C2.41193 12.774 2.49885 13.1611 2.67268 13.4837C2.84651 13.8063 3.10182 14.0912 3.43863 14.3385C3.77543 14.5858 4.18828 14.817 4.67719 15.032C5.16609 15.2471 5.72561 15.4837 6.35573 15.7417C7.0076 15.9997 7.63236 16.2632 8.22987 16.532C8.82745 16.8008 9.35437 17.1234 9.8107 17.4997C10.267 17.876 10.6364 18.3277 10.9188 18.8546C11.2013 19.3814 11.3426 20.0427 11.3426 20.8384C11.3426 22.3437 10.7722 23.4835 9.63139 24.2577C8.49066 25.0318 6.9316 25.4189 4.95423 25.4189C3.47665 25.4189 2.34674 25.2953 1.56449 25.048C0.782249 24.8006 0.26075 24.6125 0 24.4834L0.55409 22.5802C0.619277 22.6233 0.760518 22.6931 0.977811 22.79C1.1951 22.8867 1.48844 22.9942 1.85784 23.1125C2.22723 23.2308 2.66724 23.3329 3.17788 23.4189C3.68851 23.505 4.28063 23.548 4.95423 23.548Z" fill="#7E7E7E"/>
                        <path fill-rule="evenodd" clip-rule="evenodd" d="M15.6122 25.0317H13.4937V8.35464H15.6122V25.0317ZM16.1012 3.32244C16.1012 3.81709 15.949 4.20956 15.6448 4.49985C15.3406 4.79014 14.9713 4.93534 14.5367 4.93534C14.1021 4.93534 13.7327 4.79014 13.4285 4.49985C13.1243 4.20956 12.9722 3.81709 12.9722 3.32244C12.9722 2.82785 13.1243 2.43538 13.4285 2.14503C13.7327 1.85474 14.1021 1.70959 14.5367 1.70959C14.9713 1.70959 15.3406 1.85474 15.6448 2.14503C15.949 2.43538 16.1012 2.82785 16.1012 3.32244Z" fill="#7E7E7E"/>
                        <path fill-rule="evenodd" clip-rule="evenodd" d="M21.251 8.35467H27.9652V10.1288H21.251V18.9996C21.251 19.9458 21.3324 20.7146 21.4954 21.306C21.6583 21.8974 21.892 22.3544 22.1962 22.6769C22.5004 22.9995 22.8697 23.2145 23.3044 23.3221C23.7389 23.4296 24.217 23.4834 24.7385 23.4834C25.6294 23.4834 26.3464 23.3812 26.8896 23.1769C27.4328 22.9726 27.8566 22.7844 28.1608 22.6124L28.6823 24.3543C28.3781 24.5478 27.8457 24.7683 27.0852 25.0156C26.3246 25.2629 25.499 25.3866 24.6081 25.3866C23.5651 25.3866 22.6905 25.2521 21.9843 24.9833C21.2781 24.7145 20.7132 24.3059 20.2894 23.7576C19.8657 23.2092 19.5669 22.5264 19.3931 21.7092C19.2193 20.892 19.1323 19.9243 19.1323 18.8061V3.45151L21.251 3.06445V8.35467Z" fill="#7E7E7E"/>
                        <path fill-rule="evenodd" clip-rule="evenodd" d="M29.5623 16.6771C29.5623 15.2148 29.7741 13.9407 30.1978 12.8547C30.6216 11.7687 31.1756 10.8601 31.8601 10.1289C32.5445 9.39774 33.3268 8.85477 34.2069 8.49991C35.0869 8.14505 35.994 7.96765 36.9284 7.96765C38.9927 7.96765 40.6386 8.63434 41.8663 9.96761C43.094 11.3009 43.7079 13.3546 43.7079 16.1288C43.7079 16.3008 43.7025 16.4728 43.6916 16.6449C43.6807 16.8169 43.6644 16.9782 43.6427 17.1288H31.8112C31.8764 19.1717 32.3871 20.7416 33.3431 21.8383C34.2992 22.9351 35.8202 23.4835 37.9062 23.4835C39.0579 23.4835 39.9705 23.376 40.6441 23.1609C41.3177 22.9458 41.8066 22.7631 42.1108 22.6125L42.5019 24.4189C42.1977 24.591 41.6273 24.7953 40.7908 25.0318C39.9542 25.2684 38.9709 25.3866 37.841 25.3866C36.3634 25.3866 35.1032 25.1716 34.0602 24.7415C33.0172 24.3114 32.1589 23.7093 31.4853 22.9351C30.8117 22.1609 30.3228 21.2416 30.0186 20.1771C29.7144 19.1126 29.5623 17.946 29.5623 16.6771ZM41.5241 15.3546C41.4806 13.6127 41.0677 12.2579 40.2855 11.2902C39.5033 10.3225 38.3951 9.83859 36.9609 9.83859C36.2004 9.83859 35.5214 9.98915 34.9238 10.2902C34.3263 10.5913 33.8048 10.9945 33.3594 11.4999C32.9139 12.0052 32.5663 12.5912 32.3164 13.2579C32.0665 13.9246 31.9198 14.6234 31.8763 15.3546H41.5241Z" fill="#7E7E7E"/>
                        <path fill-rule="evenodd" clip-rule="evenodd" d="M49.9334 16.161C49.9334 17.8168 50.2974 19.0265 51.0253 19.7899C51.7533 20.5533 52.6931 20.935 53.8447 20.935C54.4749 20.935 55.067 20.849 55.6211 20.677C56.1752 20.5049 56.626 20.3006 56.9737 20.0641V11.3223C56.6912 11.2578 56.3435 11.1987 55.9307 11.1449C55.5178 11.0912 54.9963 11.0643 54.3662 11.0643C52.9321 11.0643 51.8348 11.532 51.0742 12.4675C50.3137 13.4029 49.9334 14.6341 49.9334 16.161ZM60.9172 23.3221C60.9172 26.0102 60.2276 27.9779 58.8478 29.2252C57.468 30.4725 55.3549 31.0961 52.5084 31.0961C51.4654 31.0961 50.4496 31.0101 49.4609 30.838C48.4722 30.666 47.5759 30.4402 46.7719 30.1606L47.489 26.8381C48.1626 27.1177 48.9285 27.3435 49.7868 27.5155C50.6451 27.6876 51.574 27.7736 52.5735 27.7736C54.1598 27.7736 55.2897 27.451 55.9633 26.8059C56.6369 26.1607 56.9737 25.2038 56.9737 23.9349V23.2898C56.5826 23.4834 56.0665 23.6769 55.4255 23.8704C54.7845 24.064 54.0511 24.1608 53.2254 24.1608C52.139 24.1608 51.1448 23.9887 50.2431 23.6447C49.3413 23.3006 48.57 22.7952 47.9289 22.1286C47.288 21.4619 46.7882 20.6286 46.4297 19.6286C46.0712 18.6286 45.8918 17.4727 45.8918 16.161C45.8918 14.9352 46.082 13.8061 46.4622 12.7739C46.8425 11.7417 47.3966 10.86 48.1245 10.1288C48.8524 9.39763 49.7379 8.82777 50.7809 8.41917C51.8239 8.01057 53.0082 7.80627 54.3336 7.80627C55.6156 7.80627 56.8325 7.90304 57.9841 8.09656C59.1358 8.29015 60.1135 8.49445 60.9172 8.70946V23.3221Z" fill="#9B9B9B"/>
                        <path fill-rule="evenodd" clip-rule="evenodd" d="M69.5871 25.3543C68.4142 25.3328 67.4414 25.2038 66.6704 24.9672C65.8988 24.7307 65.2853 24.392 64.8287 23.9511C64.3726 23.5103 64.0516 22.9619 63.8674 22.306C63.6825 21.6501 63.5901 20.9028 63.5901 20.0641V0.645149L67.5338 0V19.3222C67.5338 19.7953 67.5721 20.1932 67.6481 20.5157C67.7241 20.8383 67.8597 21.1125 68.0555 21.3383C68.2513 21.5641 68.517 21.7361 68.8538 21.8544C69.1907 21.9727 69.62 22.064 70.1417 22.1286L69.5871 25.3543Z" fill="#9B9B9B"/>
                        <mask id="mask0" mask-type="alpha" maskUnits="userSpaceOnUse" x="72" y="0" width="7" height="6">
                            <path fill-rule="evenodd" clip-rule="evenodd" d="M78.1458 0.111206L74.8119 3.66281L74.1121 5.22432L72.2947 3.14968L78.1458 0.111206Z" fill="white"/>
                        </mask>
                        <g mask="url(#mask0)">
                            <path fill-rule="evenodd" clip-rule="evenodd" d="M71.5122 5.99884H78.9284V-0.663452H71.5122V5.99884Z" fill="#737373"/>
                        </g>
                        <mask id="mask1" mask-type="alpha" maskUnits="userSpaceOnUse" x="69" y="0" width="10" height="4">
                            <path fill-rule="evenodd" clip-rule="evenodd" d="M78.149 0.110352L72.3009 3.15262H69.6377L78.149 0.110352Z" fill="white"/>
                        </mask>
                        <g mask="url(#mask1)">
                            <path fill-rule="evenodd" clip-rule="evenodd" d="M68.8552 3.92714H78.9321V-0.664307H68.8552V3.92714Z" fill="#9B9B9B"/>
                        </g>
                        <mask id="mask2" mask-type="alpha" maskUnits="userSpaceOnUse" x="74" y="0" width="5" height="6">
                            <path fill-rule="evenodd" clip-rule="evenodd" d="M78.1501 0.106934L76.6501 5.1571L74.812 3.65986L78.1501 0.106934Z" fill="white"/>
                        </mask>
                        <g mask="url(#mask2)">
                            <path fill-rule="evenodd" clip-rule="evenodd" d="M74.0295 5.93168H78.9328V-0.667725H74.0295V5.93168Z" fill="#9B9B9B"/>
                        </g>
                        <path fill-rule="evenodd" clip-rule="evenodd" d="M72.0642 25.0317H76.008V8.16113H72.0642V25.0317Z" fill="#9B9B9B"/>
                        <path fill-rule="evenodd" clip-rule="evenodd" d="M82.8204 16.5481C82.8204 18.2684 83.2333 19.6179 84.059 20.5964C84.8847 21.5748 86.0254 22.0641 87.481 22.0641C88.1115 22.0641 88.649 22.0372 89.0947 21.9834C89.5398 21.9297 89.904 21.8705 90.1867 21.806V12.1288C89.8389 11.8922 89.3768 11.6718 88.801 11.4675C88.2252 11.2633 87.6117 11.1611 86.9599 11.1611C85.5255 11.1611 84.4773 11.645 83.8145 12.6127C83.1518 13.5804 82.8204 14.8922 82.8204 16.5481ZM94.1305 24.5156C93.3479 24.7522 92.3647 24.9672 91.1809 25.1608C89.9964 25.3543 88.7524 25.4511 87.4488 25.4511C86.1014 25.4511 84.8956 25.2468 83.831 24.8382C82.7663 24.4296 81.8591 23.8436 81.1094 23.0802C80.3597 22.3167 79.7839 21.392 79.382 20.306C78.9795 19.22 78.7788 17.9996 78.7788 16.6448C78.7788 15.3115 78.9472 14.1019 79.2841 13.0159C79.6209 11.9299 80.1153 10.9998 80.7671 10.2256C81.4189 9.4514 82.2118 8.85469 83.1463 8.43532C84.0809 8.01595 85.1565 7.8063 86.3732 7.8063C87.1989 7.8063 87.9267 7.90306 88.5566 8.09659C89.1871 8.29018 89.7301 8.50519 90.1868 8.74174V0.645149L94.1305 0V24.5156Z" fill="#9B9B9B"/>
                        <path fill-rule="evenodd" clip-rule="evenodd" d="M96.5747 16.6771C96.5747 15.1933 96.7972 13.8922 97.2429 12.7739C97.6886 11.6557 98.2802 10.7256 99.0196 9.98369C99.7584 9.24177 100.605 8.68268 101.562 8.30633C102.518 7.92999 103.495 7.74182 104.495 7.74182C106.842 7.74182 108.673 8.46225 109.987 9.90305C111.302 11.3439 111.959 13.4944 111.959 16.3545C111.959 16.5696 111.954 16.8115 111.943 17.0803C111.932 17.3491 111.915 17.591 111.894 17.8061H100.649C100.757 19.1609 101.241 20.2093 102.099 20.9512C102.958 21.6931 104.202 22.0641 105.831 22.0641C106.787 22.0641 107.662 21.9781 108.455 21.806C109.249 21.634 109.873 21.4512 110.329 21.2576L110.851 24.4511C110.634 24.5587 110.335 24.6716 109.955 24.7899C109.574 24.9081 109.14 25.0156 108.651 25.1124C108.162 25.2092 107.635 25.2898 107.07 25.3543C106.505 25.4189 105.929 25.4511 105.343 25.4511C103.843 25.4511 102.54 25.2307 101.431 24.7899C100.323 24.349 99.4106 23.7361 98.6931 22.9512C97.9762 22.1662 97.4442 21.2415 97.0964 20.1771C96.7486 19.1125 96.5747 17.9459 96.5747 16.6771ZM108.015 14.9352C108.015 14.3976 107.939 13.8868 107.787 13.403C107.635 12.9191 107.412 12.4998 107.119 12.145C106.826 11.7901 106.467 11.5105 106.043 11.3062C105.62 11.1019 105.115 10.9998 104.528 10.9998C103.919 10.9998 103.387 11.1127 102.93 11.3385C102.474 11.5643 102.088 11.86 101.773 12.2256C101.458 12.5912 101.214 13.0105 101.04 13.4837C100.866 13.9568 100.747 14.4406 100.681 14.9352H108.015Z" fill="#9B9B9B"/>
                    </svg>
                </div>
            </div>
            <div class="col-12 col-md-5 offset-md-1">
                <img src="{{ 'images/content/design-system-placeholder.svg' | asset_url }}" alt="">
            </div>
        </div>
    </div>
</section>

Siteglide Design System is Open Source and free to use

<section class="content content-16">
    <div class="container">
        <div class="row">
            <div class="col-12 col-md-10 offset-md-1 text-center">
                <h2>Siteglide Design System is Open Source and free to use</h2>
                <img src="{{ 'images/content/design-system-placeholder.svg' | asset_url }}" alt="">
            </div>
        </div>
    </div>
</section>

Siteglide Design System is Open Source and free to use

Far, far away, behind the word mountains, far from the countries Vokalia and Consonantia, there live the blind texts.

Design System

Far far away, behind the word mountains, far from the countries Vokalia and Consonantia.

<section class="content content-19">
    <div class="container">
        <div class="row align-items-center">
            <div class="col-12 col-md-6">
                <div class="row">
                    <div class="col-12 col-md-8">
                        <img src="{{ 'images/content/design-system-placeholder.svg' | asset_url }}">
                    </div>
                    <div class="col-12 col-md-4">
                        <div class="row">
                            <div class="col-6 col-md-12">
                                <img src="{{ 'images/content/design-system-placeholder.svg' | asset_url }}">  
                            </div>
                            <div class="col-6 col-md-12">
                                <img src="{{ 'images/content/design-system-placeholder.svg' | asset_url }}">  
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="col-12 col-md-4 offset-md-1 text-center">
                <span class="fa-stack fa-2x mb-3">
                    <svg class="svg-inline--fa fa-square fa-w-14 fa-stack-2x" aria-hidden="true" data-prefix="far" data-icon="square" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512" data-fa-i2svg=""><path fill="currentColor" d="M400 32H48C21.5 32 0 53.5 0 80v352c0 26.5 21.5 48 48 48h352c26.5 0 48-21.5 48-48V80c0-26.5-21.5-48-48-48zm-6 400H54c-3.3 0-6-2.7-6-6V86c0-3.3 2.7-6 6-6h340c3.3 0 6 2.7 6 6v340c0 3.3-2.7 6-6 6z"></path></svg><!-- <i class="far fa-square fa-stack-2x"></i> -->
                    <svg class="svg-inline--fa fa-flag fa-w-16 fa-stack-1x" aria-hidden="true" data-prefix="fas" data-icon="flag" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512" data-fa-i2svg=""><path fill="currentColor" d="M349.565 98.783C295.978 98.783 251.721 64 184.348 64c-24.955 0-47.309 4.384-68.045 12.013a55.947 55.947 0 0 0 3.586-23.562C118.117 24.015 94.806 1.206 66.338.048 34.345-1.254 8 24.296 8 56c0 19.026 9.497 35.825 24 45.945V488c0 13.255 10.745 24 24 24h16c13.255 0 24-10.745 24-24v-94.4c28.311-12.064 63.582-22.122 114.435-22.122 53.588 0 97.844 34.783 165.217 34.783 48.169 0 86.667-16.294 122.505-40.858C506.84 359.452 512 349.571 512 339.045v-243.1c0-23.393-24.269-38.87-45.485-29.016-34.338 15.948-76.454 31.854-116.95 31.854z"></path></svg><!-- <i class="fas fa-flag fa-stack-1x"></i> -->
                </span>
                <h2>Design System</h2>
                <p>Far far away, behind the word mountains, far from the countries Vokalia and Consonantia.</p>
            </div>
        </div>
    </div>
</section>

Far far away, behind the word mountains, far from the countries Vokalia and Consonantia, there live the blind texts. Separated they live in Bookmarksgrove.

Right at the coast of the Semantics, a large language ocean. A small river named Duden.

<section class="content content-20">
    <div class="container">
        <div class="row align-items-center">
            <div class="col-12 col-md-6">
                <div class="row">
                    <div class="col-12 col-md-6">
                        <img src="{{ 'images/content/design-system-placeholder.svg' | asset_url }}" alt="">
                    </div>
                    <div class="col-12 col-md-6">
                        <img src="{{ 'images/content/design-system-placeholder.svg' | asset_url }}" alt="">
                    </div>
                </div>
            </div>
            <div class="col-12 col-md-5 offset-md-1">
                <p>Far far away, behind the word mountains, far from the countries Vokalia and Consonantia, there live the blind texts. Separated they live in Bookmarksgrove.</p>
                <p>Right at the coast of the Semantics, a large language ocean. A small river named Duden.</p>
                <div class="d-flex justify-content-center">
                    <a href="#" title="">Read More</a>
                </div
            </div>
        </div>
    </div>
</section>

Your website

Far far away, behind the word mountains, far from the countries Vokalia and Consonantia, there live the blind texts.

Amazing design

Right at the coast of the Semantics, a large language ocean. A small river named Dude a rge language ocean there live the blind.

<section class="content content-21">
  <div class="container">
    <div class="row">
      <div class="col-12 col-md-4">
        <h2>Your website</h2>
        <p>Far far away, behind the word mountains, far from the countries Vokalia and Consonantia, there live the blind texts.</p>
        <a href="#" title="">Read More</a>
      </div>
      <div class="col-12 col-md-4">
        <h2>Amazing design</h2>
        <p>Right at the coast of the Semantics, a large language ocean. A small river named Dude a rge language ocean there live the blind.</p>
        <a href="#" title="">Read More</a>
      </div>
      <div class="col-12 col-md-4">
        <img src="{{ 'images/content/design-system-placeholder.svg' | asset_url }}" alt="">
      </div>
    </div>
  </div>
</section>

Siteglide Design System

Right at the coast of the Semantics, a large language ocean.

Far far away, behind the word mountains, far from the countries Vokalia and Consonantia.

<section class="content content-22">
    <div class="container">
        <div class="row">
            <div class="col-12 text-center">
                <h2>Siteglide Design System</h2>
                <p>Right at the coast of the Semantics, a large language ocean.</p>
            </div>
        </div>
        <div class="row">
            <div class="col-12 col-md-6">
                <img src="{{ 'images/content/design-system-placeholder.svg' | asset_url }}">
                <p class="text-center">Far far away, behind the word mountains, far from the countries Vokalia and Consonantia.</p>
            </div>
            <div class="col-12 col-md-6">
                <img src="{{ 'images/content/design-system-placeholder.svg' | asset_url }}">
                <p class="text-center">Far far away, behind the word mountains, far from the countries Vokalia and Consonantia.</p>
            </div>
        </div>
    </div>
</section>

Design System

Far far away, behind the word mountains, far from the countries Vokalia and Consonantia, there live the blind texts. Separated they live in Bookmarksgrove right at the coast of the Semantics

Siteglide Design System

Far far away, behind the word mountains, far from the countries Vokalia and Consonantia, there live the blind texts.

Siteglide Design System

Far far away, behind the word mountains, far from the countries Vokalia and Consonantia, there live the blind texts. Separated they live in Bookmarksgrove right at the coast of the Semantics.

Open Source

Far far away, behind the word mountains, far from the countries Vokalia and Consonantia.

Bootstrap

Far far away, behind the word mountains, far from the countries Vokalia and Consonantia.

<section class="content content-25">
    <div class="container">
        <div class="row align-items-center">
            <div class="col-12 col-md-5">
                <img src="{{ 'images/content/design-system-placeholder.svg' | asset_url }}" alt="">
            </div>
            <div class="col-12 col-md-6 offset-md-1">
                <h2>Siteglide Design System</h2>
                <p>Far far away, behind the word mountains, far from the countries Vokalia and Consonantia, there live the blind texts. Separated they live in Bookmarksgrove right at the coast of the Semantics.</p>
                <div class="row">
                    <div class="col-12 col-md-6">
                        <h3>Open Source</h3>
                        <p>Far far away, behind the word mountains, far from the countries Vokalia and Consonantia.</p>
                    </div>
                    <div class="col-12 col-md-6">
                        <h3>Bootstrap</h3>
                        <p>Far far away, behind the word mountains, far from the countries Vokalia and Consonantia.</p>
                    </div>
                </div>
            </div>
        </div>
    </div>
</section>

Design System

Far far away, behind the word mountains, far from the countries Vokalia and Consonantia, there live the blind texts. Separated they live in Bookmarksgrove right at the coast of the Semantics.

Design System

Far far away, behind the word mountains, far from the countries Vokalia and Consonantia, there live the blind texts. Separated they live in Bookmarksgrove right at the coast of the Semantics.

<section class="content content-27">
    <div class="container-fluid">
        <div class="row align-items-center">
            <div class="col-12 col-md-4 offset-md-1">
                <h2>Design System</h2>
                <p>Far far away, behind the word mountains, far from the countries Vokalia and Consonantia, there live the blind texts. Separated they live in Bookmarksgrove right at the coast of the Semantics.</p>
                <a href="#" title="">Read More</a>
            </div>
            <div class="col-12 col-md-6 offset-md-1 background-image" style="background-image: url('{{ 'images/content/design-system-placeholder.svg' | asset_url }}')">
            </div>
        </div>
        <div class="row align-items-center">
            <div class="col-12 col-md-6 background-image" style="background-image: url('{{ 'images/content/design-system-placeholder.svg' | asset_url }}')">
            </div>
            <div class="col-12 col-md-4 offset-md-1">
                <h2>Design System</h2>
                <p>Far far away, behind the word mountains, far from the countries Vokalia and Consonantia, there live the blind texts. Separated they live in Bookmarksgrove right at the coast of the Semantics.</p>
                <a href="#" title="">Read More</a>
            </div>
        </div>
    </div>
</section>

Cart

Items	Attributes	Quantity	Price
Product One	Size: Small	Quantity	£8.00
Product Two	Size: Large	Quantity	£25.00

TOTAL QUANTITY: 2

TOTAL PRICE: £33.00

Continue Shopping

Proceed to checkout

<section class="ecommerce ecommerce-cart-01">
	<div class="container">
        <form>
            <h2>Cart</h2>
            <table>
                <thead>
                    <tr>
                        <th scope="col">Items</th>
                        <th scope="col">Attributes</th>
                        <th scope="col">Quantity</th>
                        <th scope="col">Price</th>
                        <th scope="col"></th>
                    </tr>
                </thead> 
                <tbody>
                    <tr>
                        <td scope="row">
                            <img src="https://uploads.prod01.oregon.platform-os.com/instances/916/assets/images/content/design-system-placeholder.svg" alt="" />
                            <h2>Product One</h2>
                        </td>
                        <td>Size: Small</td>
                        <td>
                        <label for="quantity">Quantity</label>
                            <input type="number" id="quantity" name="quantity" min="1" max="100" value="1">
                        </td>
                        <td>&pound;8.00</td>
                        <td><button class="btn btn-secondary"><i class="fas fa-times"></i><span>Remove</span></button></td>
                    </tr>
                    <tr>
                        <td scope="row">
                            <img src="https://uploads.prod01.oregon.platform-os.com/instances/916/assets/images/content/design-system-placeholder.svg" alt="" />
                            <h2>Product Two</h2>
                        </td>
                        <td>Size: Large</td>
                        <td>
                        <label for="quantity">Quantity</label>
                            <input type="number" id="quantity" name="quantity" min="1" max="100" value="1">
                        </td>
                        <td>&pound;25.00</td>
                        <td><button class="btn btn-secondary"><i class="fas fa-times"></i><span>Remove</span></button></td>
                    </tr>
                </tbody>
            </table>
            <div class="text-center text-md-right">
                <p><strong>TOTAL QUANTITY:</strong> 2</p>
                <p><strong>TOTAL PRICE:</strong> &pound;33.00</p>
            </div>
            <div class="d-flex flex-wrap justify-content-center justify-content-lg-between">
                <a class="btn btn-secondary" href="#">Continue Shopping</a>
                <div class="d-flex flex-wrap justify-content-center">
                <button class="btn btn-secondary">Empty cart</button>
                    <button class="btn btn-primary">Update cart</button>
                    <a class="btn btn-primary" href="#">Proceed to checkout</a>
                </div>
            </div>
        </form>
    </div>
</section>

All Events

Past Events

Event 1

Tag of Event 1

This is the description of Event 1

Location

Address of Event 1

Event Start

24/04/2020
Event End

24/04/2020
View Details

Event 2

Tag of Event 2

This is the description of Event 2

Location

Address of Event 2

Event Start

24/04/2020
Event End

24/04/2020
View Details

Archive by Years

2020

All Past Events

All Past Events

All Future Events

All Future Events

Search by Date

Event Hosts

<section class="events events-01">
	<div class="events-future">
		<div class="container">
			<div class="row">
				<div class="col-12 col-md-8">
					<div class="row">
						<div class="col-12 d-flex justify-content-between align-items-center pb-3">
							{% assign now = "now" | date: "%s" %}
							{% if context.params.range_type == "past" %}
								<h2>Past Events</h2>
								<a href="{{context.headers.PATH_INFO}}?range_field=events&range_type=future&range_gt={{now}}">Future Events</a>
							{% elsif context.params.range_type == "future" %}
								<h2>Future Events</h2>
								<a href="{{context.headers.PATH_INFO}}?range_field=events&range_type=past&range_lt={{now}}">Past Events</a>
							{% else %}
								<h2>All Events</h2>
								<a href="{{context.headers.PATH_INFO}}?range_field=events&range_type=past&range_lt={{now}}">Past Events</a>
							{% endif %}
							</ul>
						</div>
					</div>
					{% comment %} Include the following code in to the item.liquid for list {%- include 'modules/siteglide_system/get/get_items', item_layout: 'item' -%}{% endcomment %}
					  <div class="card">
            	<div class="card-body">
            		<h3>{{this['name']}}</h3>
            		{% if this.category_array[0] %}
            			{% for category in this.category_array %}
            				<span class="tag"><a href="{{context.headers.PATH_INFO}}?category={{category}}" title=""><i class="fas fa-tag"></i>{{context.exports.categories.items[category].name}}</a></span>
            			{% endfor %}
            		{% endif %}
            		<p>{{this['Description']}}</p>
            		{% if this['Location - Address'] %}
            			<h4>Location</h4>
            			<div class="event-information">
            				<p>{{this['Location - Address']}}</p>
            			</div>
            		{% endif %}
            	</div>
            	<div class="card-footer">
            		<div class="row align-items-center">
            			<div class="col-12">
            				<ul>
            					<li>
            						<div class="event-icon">
            							<i class="far fa-calendar"></i>
            						</div>
            						<div class="event-information">
            							<h4>Event Start</h4>
            							<p data-date>{{this['Event Start'] | date: "%d/%m/%Y %H:%M"}}</p>
            						</div>
            					</li>
            					<li>
            						<div class="event-icon">
            							<i class="far fa-calendar"></i>
            						</div>
            						<div class="event-information">
            							<h4>Event End</h4>
            							<p data-date>{{this['Event End'] | date: "%d/%m/%Y %H:%M" }}</p>
            						</div>
            					</li>
            					{% if this.properties.module_field_12_4_datasource %}
            					<li>
            						<div class="event-icon">
            							<i class="fas fa-user"></i>
            						</div>
            						<div class="event-information">
            							<h4>Host</h4>
            							{% include "datasource", datasource_field: "properties.module_field_12_4_datasource", layout: "events_host_datasource" %}
            						</div>
            					</li>
            					{% endif %}
            					<li>
            						<div class="event-icon">
            							<i class="fas fa-plus"></i>
            						</div>
            						<div class="event-information">
            							<a href="{{this.full_slug}}">View Details</a>
            						</div>
            					</li>
            				</ul>
            			</div>
            		</div>
            	</div>
            </div>
          {% comment %} End of include for the item.liquid for list {% endcomment %}
					{%- include 'modules/siteglide_system/get/get_pagination', pagination_layout: "default" -%}
				</div>
				<div class="col-12 col-md-4">
					<div class="events-01-sidebar">
					  {% comment %} Include the following code in to the sidebar_years_and_date_search.liquid for archive {%- include 'modules/siteglide_events/get/get_events_archive', archive_layout: "design_system/1/archive", archive_layout_type: "sidebar_years_and_date_search" -%}{% endcomment %}
					    <div class="row no-gutters">
              	<div class="col-12">
              		<h2>Archive by Years</h2>
              		<ul>
              			{% assign events_archive_years = events_archive_years | sort: "start" %}
              			{% for year in events_archive_years %}
              				<li>{{year.start | date: "%Y"}}</li>
              				<ul>
              					{% assign months_by_year = events_archive_months | sort: "start" | group_by: "year"  %}
              					{% for month in months_by_year[year.start] %}
              						<li><a href="{{context.headers.PATH_INFO}}?range_gte={{month.start}}&range_lt={{month.end}}&range_type=month&range_field=events">{{month.start | date: "%b" }}</a></li>
              					{% endfor %}
              				</ul>
              			{% endfor %}
              		</ul>
              	</div>
              </div>
              {% assign now = "now" | date: "%s" %}
              <div class="row no-gutters">
              	<div class="col-12">
              		<h2><a href="{{context.headers.PATH_INFO}}?range_field=events&range_lt={{now}}&range_type=past">All Past Events</a></h2>
              	</div>
              </div>
              <div class="row no-gutters">
              	<div class="col-12">
              		<h2><a href="{{context.headers.PATH_INFO}}?range_field=events&range_gte={{now}}&range_type=future">All Future Events</a></h2>
              	</div>
              </div>
              <div class="row no-gutters">
              	<div class="col-12">
              		<h2>Search by Date</h2>
              		<form title="Search events by Date" id="events-archive-search">
              			<div class="form-group">
              				<label for="range_gt">Start Date</label>
              				<input data-sg-events="start-date" id="range_gt" name="range_gt" type="date">
              			</div>
              			<div class="form-group">
              				<label for="range_gt">End Date</label>
              				<input data-sg-events="end-date" id="range_lte" name="range_lte" type="date">
              			</div>
              			<input value="Search" class="btn btn-primary" type="submit" data-slug="/module-12" onclick="s_events_date_search(s_events_date_search_error)">
              		</form>
              	</div>
              </div>
              {% comment %}Add your custom error message here- it can be renamed by changing its name in the argument for the s_events_date_search function and in the definition below.{% endcomment %}
              <script>
              	function s_events_date_search_error() {
              		alert("Please enter valid dates before searching.");
              	}
              </script>
					  {% comment %} End of include for the sidebar_years_and_date_search.liquid for archive {% endcomment %}
					  
					  {% comment %} Include the following code in to the wrapper.liquid for categories {%- include 'modules/siteglide_system/get/get_categories', categories_layout: 'design_system/1/categories', categories_layout_type: 'list' -%}{% endcomment %}
					    <div class="row no-gutters">
              	<div class="col-12">
              		<h2>Categories</h2>
              		<ul>
              		  {% comment %} Include the following code in to the item.liquid for categories {%- include 'modules/siteglide_system/get/get_items', item_layout: 'item' -%}{% endcomment %}
              			  <li><a href="{{context.headers.PATH_INFO}}?category={{this.id}}" title="Category: {{this.properties.name}}">{{this.properties.name}}</a></li>
              			{% comment %} End of include for the item.liquid for categories {% endcomment %}
              		</ul>
              	</div>
              </div>
					  {% comment %} End of include for the wrapper.liquid for categories {% endcomment %}
					  
					  {% comment %} Include the following code in to the wrapper.liquid for author {%- include 'modules/siteglide_authors/get/get_authors', author_layout: 'design_system/1/author', author_layout_type: 'list', author_field: 'module_field_12_4' -%}{% endcomment %}
						  <h2>Event Hosts</h2>
              <div class="row no-gutters">
              	<div class="col-12">
              		<ul>
              			{% comment %} Include the following code in to the item.liquid for author {%- include 'modules/siteglide_system/get/get_items', item_layout: 'item' -%}{% endcomment %}
              			  <li><a href="{{context.headers.PATH_NAME}}?module_field_12_4={{this.id}}&host_name={{this.name | url_encode}}" title="Host: {{this['Title']}}">{{this['Title']}}</a></li>
              			{% comment %} End of include for the item.liquid for author {% endcomment %}
              		</ul>
              	</div>
              </div>
						{% comment %} End of include for the wrapper.liquid for author {% endcomment %}
					</div>
				</div>
			</div>
		</div>
	</div>
</section>

Frequently Asked Questions

Lorem ipsum

<section class="faq faq-02">
  <div class="container">
    <h2 class="text-center">Frequently Asked Questions</h2>
    <div class="row">
      <div class="col-12">
        <div id="faq-02-accordion" class="accordion">
    		  {%- capture questionID -%}id{{this.id}}{%- endcapture -%}
{%- capture cardID -%}card{{this.id}}{%- endcapture -%}
<div class="card">
	<div class="card-header" id="{{cardID}}">
		<button class="collapsed" data-toggle="collapse" data-target="#{{questionID}}" aria-expanded="true" aria-controls="{{questionName}}">
		  {{ this['Question'] }}
		  <i class="faq-arrow-icon fas fa-angle-up" aria-hidden="true"></i>
		</button>
	</div>
	<div id="{{questionID}}" class="collapse" aria-labelledby="{{cardID}}" data-parent="#faq-02-accordion">
		<div class="card-body">{{ this.Answer }}</div>
	</div>
</div>
    		</div>
      </div>
    </div>
  </div>
</section>

Features

Feature 1

Lorem Ipsum is simply dummy text of the printing industry.

Feature 2

Lorem Ipsum is simply dummy text of the printing industry.

Feature 3

Lorem Ipsum is simply dummy text of the printing industry.

Feature 4

Lorem Ipsum is simply dummy text of the printing industry.

Feature 5

Lorem Ipsum is simply dummy text of the printing industry.

Feature 6

Lorem Ipsum is simply dummy text of the printing industry.

<section class="feature feature-01">
  <div class="container text-center">
    <div class="row">
      <div class="col-12">
        <h2>Features</h2>
      </div>
    </div>
    <div class="row">
      <div class="col-12 col-md-4">
        <h3>Feature 1</h3>
        <p>Lorem Ipsum is simply dummy text of the printing industry.</p>
      </div>
      <div class="col-12 col-md-4">
        <h3>Feature 2</h3>
        <p>Lorem Ipsum is simply dummy text of the printing industry.</p>
      </div>
      <div class="col-12 col-md-4">
        <h3>Feature 3</h3>
        <p>Lorem Ipsum is simply dummy text of the printing industry.</p>
      </div>
  </div>
  <div class="row">
      <div class="col-12 col-md-4">
        <h3>Feature 4</h3>
        <p>Lorem Ipsum is simply dummy text of the printing industry.</p>
      </div>
      <div class="col-12 col-md-4">
        <h3>Feature 5</h3>
        <p>Lorem Ipsum is simply dummy text of the printing industry.</p>
      </div>
      <div class="col-12 col-md-4">
        <h3>Feature 6</h3>
        <p>Lorem Ipsum is simply dummy text of the printing industry.</p>
      </div>
    </div>
  </div>
</section>

Siteglide Design System

Feature 1

Far far away, behind the word mountains, far from the countries

Learn more

Feature 2

Seperated they live in Bookmarksgrove at the coast of the Semantics, a large langauge ocean.

Learn more

Feature 3

A small river named Duden flows by their place and supplies it with the necessary regelialia.

Learn more

<section class="feature feature-02 background-image" style="background-image: url('{{ 'images/content/design-system-placeholder.svg' | asset_url }}')">
  <div class="container">
  <h2 class="text-center">Siteglide Design System</h2>
    <div class="card-deck">
      <div class="card">
        <div class="card-body">
          <h3>Feature 1</h3>
          <p>Far far away, behind the word mountains, far from the countries</p>
        </div>
        <div class="card-footer text-center">
          <a href="#" title>Learn more<i class="fas fa-chevron-right ml-2"></i></a> 
        </div>
      </div>
      <div class="card">
        <div class="card-body">
          <h3>Feature 2</h3>
          <p>Seperated they live in Bookmarksgrove at the coast of the Semantics, a large langauge ocean.</p>
        </div>
        <div class="card-footer text-center">
          <a href="#" title>Learn more<i class="fas fa-chevron-right ml-2"></i></a>  
        </div>
      </div>
      <div class="card">
        <div class="card-body">
          <h3>Feature 3</h3>
          <p>A small river named Duden flows by their place and supplies it with the necessary regelialia.</p>
        </div>
        <div class="card-footer text-center">
          <a href="#" title>Learn more<i class="fas fa-chevron-right ml-2"></i></a>
        </div>
      </div> 
    </div>
  </div>
</section>

Design System

Far far away, behind the word mountains, far from the countries Vokalia and Consonantia, there live the blind texts. Separated they live in Bookmarksgrove right at the coast of the Semantics, a large language ocean.

Feature One

A small river named Duden flows

Feature Two

Separated they live in Bookmarksgrove

<section class="feature feature-03">
  <div class="container">
    <div class="row align-items-center">
      <div class="col-12 col-md-5">
        <div class="row">
          <div class="col-12">
            <h2>Design System</h2>
            <p>Far far away, behind the word mountains, far from the countries Vokalia and Consonantia, there live the blind texts. Separated they live in Bookmarksgrove right at the coast of the Semantics, a large language ocean.</p>
          </div>
        </div>
        <div class="row">
          <div class="col-12 col-sm-6">
            <h3>Feature One</h3>
            <p>A small river named Duden flows</p>
          </div>
          <div class="col-12 col-sm-6">
            <h3>Feature Two</h3>
            <p>Separated they live in Bookmarksgrove</p>
          </div>
        </div>
      </div>
      <div class="col-12 col-md-6 offset-md-1">
        <img src="{{ 'images/content/design-system-placeholder.svg' | asset_url }}" alt="">
      </div>
    </div>
  </div>
</section>

Design System

Feature One

Far far away, behind the word mountains

Feature Two

Separated they live in Bookmarksgrove

Feature Three

A small river named Duden flows by me

Feature Four

Separated they live in Bookmarksgrove

<section class="feature feature-04">
  <div class="container">
    <div class="row">
      <div class="col-12 col-lg-10 offset-lg-1">
        <div class="row">
          <div class="col-12 col-lg-6">
            <img src="{{ 'images/content/design-system-placeholder.svg' | asset_url }}" alt="" />
          </div>
          <div class="col-12 col-lg-5 offset-lg-1">
            <h2>Design System</h2>
            <div class="row">
              <div class="col-6">
                <h3>Feature One</h3>
                <p>Far far away, behind the word mountains</p>
              </div>
              <div class="col-6">
                <h3>Feature Two</h3>
                <p>Separated they live in Bookmarksgrove</p>
              </div>
              <div class="col-6">
                <h3>Feature Three</h3>
                <p>A small river named Duden flows by me</p>
              </div>
              <div class="col-6">
                <h3>Feature Four</h3>
                <p>Separated they live in Bookmarksgrove</p>
              </div>    
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</section>

Features

Feature One

Far far away, behind the word mountains, far from the countries

Feature Two

Separated they live in Bookmarksgrove right at the coast

Feature Three

A small river named Duden flows by their place and supplies it

Feature Four

Duden flows by their place far far away, behind the word mountains.

<section class="feature feature-05">
  <div class="container text-center">
    <div class="row">
      <div class="col-12">
        <h2>Features</h2>
        <img src="{{ 'images/content/design-system-placeholder.svg' | asset_url }}" alt=""/>
      </div>
    </div>
    <div class="row">
      <div class="col-12 col-md-3 d-flex flex-column align-items-center">
        <img src="{{ 'images/content/design-system-placeholder.svg' | asset_url }}" alt="" class="icon" />
        <h3>Feature One</h3>
        <p>Far far away, behind the word mountains, far from the countries</p>
      </div>
      <div class="col-12 col-md-3 d-flex flex-column align-items-center">
        <img src="{{ 'images/content/design-system-placeholder.svg' | asset_url }}" alt="" class="icon" />
        <h3>Feature Two</h3>
        <p>Separated they live in Bookmarksgrove right at the coast</p>
      </div>
      <div class="col-12 col-md-3 d-flex flex-column align-items-center">
        <img src="{{ 'images/content/design-system-placeholder.svg' | asset_url }}" alt="" class="icon" />
        <h3>Feature Three</h3>
        <p>A small river named Duden flows by their place and supplies it</p>
      </div>
      <div class="col-12 col-md-3 d-flex flex-column align-items-center">
        <img src="{{ 'images/content/design-system-placeholder.svg' | asset_url }}" alt="" class="icon" />
        <h3>Feature Four</h3>
        <p>Duden flows by their place far far away, behind the word mountains.</p>
      </div>      
    </div>
  </div>
</section>

Features

Feature One

Far far away, behind the word mountains, far from the countries

Feature Two

Far far away, behind the word mountains, far from the countries

Feature Three

Far far away, behind the word mountains, far from the countries

Feature Four

Far far away, behind the word mountains, far from the countries

Feature Five

Far far away, behind the word mountains, far from the countries

Feature Six

Far far away, behind the word mountains, far from the countries

<section class="feature feature-06">
    <div class="container">
        <h2 class="text-center">Features</h2>
        <div class="row">
            <div class="col-12 col-md-4">
                <img class="icon" src="{{ 'images/content/design-system-placeholder.svg' | asset_url }}" alt="">
                <div class="feature">
                    <h3>Feature One</h3>
                    <p>Far far away, behind the word mountains, far from the countries</p>
                </div>
            </div>
            <div class="col-12 col-md-4">
                <img class="icon" src="{{ 'images/content/design-system-placeholder.svg' | asset_url }}" alt="">
                <div class="feature">
                    <h3>Feature Two</h3>
                    <p>Far far away, behind the word mountains, far from the countries</p>
                </div>
            </div>
            <div class="col-12 col-md-4">
                <img class="icon" src="{{ 'images/content/design-system-placeholder.svg' | asset_url }}" alt="">
                <div class="feature">
                    <h3>Feature Three</h3>
                    <p>Far far away, behind the word mountains, far from the countries</p>
                </div>
            </div>
        </div>
        <div class="row">
            <div class="col-12 col-md-4">
                <img class="icon" src="{{ 'images/content/design-system-placeholder.svg' | asset_url }}" alt="">
                <div class="feature">
                    <h3>Feature Four</h3>
                    <p>Far far away, behind the word mountains, far from the countries</p>
                </div>
            </div>
            <div class="col-12 col-md-4">
                <img class="icon" src="{{ 'images/content/design-system-placeholder.svg' | asset_url }}" alt="">
                <div class="feature">
                    <h3>Feature Five</h3>
                    <p>Far far away, behind the word mountains, far from the countries</p>
                </div>
            </div>
            <div class="col-12 col-md-4">
                <img class="icon" src="{{ 'images/content/design-system-placeholder.svg' | asset_url }}" alt="">
                <div class="feature">
                    <h3>Feature Six</h3>
                    <p>Far far away, behind the word mountains, far from the countries</p>
                </div>
            </div>
        </div>
    </div>
</section>

Features

Feature One

Even the all-powerful Pointing has no control about the blind texts.

Feature Two

Duden flows by their place far far away, behind the word mountains.

Feature Three

A small river named Duden flows by their place and supplies it.

<section class="feature feature-07">
  <div class="container-fluid">
    <div class="row align-items-center">
      <div class="col-12 col-md-6">
        <img src="{{ 'images/content/design-system-placeholder.svg' | asset_url }}" />
      </div>
      <div class="col-12 col-md-5 offset-md-1">
        <h2>Features</h2>
        <div class="row">
          <div class="col-12 d-flex">
            <img src="{{ 'images/content/design-system-placeholder.svg' | asset_url }}" alt="" class="icon" />
            <div class="feature">
              <h3>Feature One</h3>
              <p>Even the all-powerful Pointing has no control about the blind texts.</p>
            </div>
          </div>
        </div>
        <div class="row">
          <div class="col-12 d-flex">
            <img src="{{ 'images/content/design-system-placeholder.svg' | asset_url }}" alt="" class="icon" />
            <div class="feature">
              <h3>Feature Two</h3>
              <p>Duden flows by their place far far away, behind the word mountains.</p>
            </div>
          </div>
        </div>   
        <div class="row">
          <div class="col-12 d-flex">
            <img src="{{ 'images/content/design-system-placeholder.svg' | asset_url }}" alt="" class="icon" />
            <div class="feature">
              <h3>Feature Three</h3>
              <p>A small river named Duden flows by their place and supplies it.</p>
            </div>
          </div>
        </div>    
      </div>
    </div>
  </div>
</section>

Siteglide Design System

Even the all-powerful Pointing has no control about the blind texts it is an almost unorthographic life One day however a small line of blind text by the name of Lorem Ipsum decided to leave for the far World of Grammar.

Feature One

A small river named Duden flows by their place and supplies it with the necessary regelialia. It is a paradisematic country, in which roasted parts of sentences.

Feature Two

When she reached the first hills of the Italic Mountains, she had a last view back on the skyline of her hometown Bookmarksgrove, there live the blind texts.

Feature Three

Even the all-powerful Pointing has no control about the blind texts it is an almost unorthographic life One day however a small line of blind text by the name of Lorem Ipsum.

<section class="feature feature-08">
  <div class="container-fluid">
    <div class="row text-center">
      <div class="col-12 col-lg-6 offset-lg-3">
        <h2>Siteglide Design System</h2>
        <p>Even the all-powerful Pointing has no control about the blind texts it is an almost unorthographic life One day however a small line of blind text by the name of Lorem Ipsum decided to leave for the far World of Grammar.</p>
      </div> 
    </div>
    <div class="row">
      <div class="col-12 col-lg-6"> 
        <img src="{{ 'images/content/design-system-placeholder.svg' | asset_url }}" alt="" />
      </div>
      <div class="col-12 col-lg-5 offset-lg-1">
        <h3>Feature One</h3>
        <p>A small river named Duden flows by their place and supplies it with the necessary regelialia. It is a paradisematic country, in which roasted parts of sentences.</p>
        <h3>Feature Two</h3>
        <p>When she reached the first hills of the Italic Mountains, she had a last view back on the skyline of her hometown Bookmarksgrove, there live the blind texts.</p>
        <h3>Feature Three</h3>
        <p>Even the all-powerful Pointing has no control about the blind texts it is an almost unorthographic life One day however a small line of blind text by the name of Lorem Ipsum.</p>
      </div>
    </div>
  </div>
</section>

Siteglide Design System

Far far away, behind the word mountains, far from the countries Vokalia and Consonantia, there live the blind texts. Separated they live in Bookmarksgrove right at the coast of the Semantics, a large language ocean.

Feature One

Far far away, behind the word mountains, far from the countries

Feature Two

Far far away, behind the word mountains, far from the countries

Feature Three

Far far away, behind the word mountains, far from the countries

<section class="feature feature-09">
  <div class="container">
    <div class="row">
      <div class="col-12 col-lg-10 offset-lg-1">
        <h2 class="text-center text-lg-left">Siteglide Design System</h2>
        <p>Far far away, behind the word mountains, far from the countries Vokalia and Consonantia, there live the blind texts. Separated they live in Bookmarksgrove right at the coast of the Semantics, a large language ocean.</p>
        <img src="{{ 'images/content/design-system-placeholder.svg' | asset_url }}" alt="" />
      </div>
    </div>
    <div class="row">
      <div class="col-12 col-lg-10 offset-lg-1">
        <div class="row">
          <div class="col-12 col-lg-4 d-flex">
            <img src="{{ 'images/content/design-system-placeholder.svg' | asset_url }}" class="icon" alt="" />
            <div class="feature">
              <h3>Feature One</h3>
              <p>Far far away, behind the word mountains, far from the countries</p>
            </div>
          </div>
          <div class="col-12 col-lg-4 d-flex">
            <img src="{{ 'images/content/design-system-placeholder.svg' | asset_url }}" class="icon" alt="" />
            <div class="feature">
              <h3>Feature Two</h3>
              <p>Far far away, behind the word mountains, far from the countries</p>
            </div>
          </div>
          <div class="col-12 col-lg-4 d-flex">
            <img src="{{ 'images/content/design-system-placeholder.svg' | asset_url }}" class="icon" alt="" />
            <div class="feature">
              <h3>Feature Three</h3>
              <p>Far far away, behind the word mountains, far from the countries </p>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</section>

Features

Feature 1

Far far away, behind the word mountains, far from the countries Vokalia and Consonantia

Feature 2

Separated they live in Bookmarksgrove right at the coast of the Semantics, a large language ocean.

Feature 3

A small river named Duden flows by their place and supplies it with the necessary regelialia

<section class="feature feature-10">
  <div class="container text-center">
    <h2>Features</h2>
    <div class="row">
      <div class="col-12 col-md-4 d-flex flex-column align-items-center">
        <img src="{{ 'images/content/design-system-placeholder.svg' | asset_url }}"" alt="" class="icon">
        <h3>Feature 1</h3>
        <p>Far far away, behind the word mountains, far from the countries Vokalia and Consonantia</p>
      </div>
      <div class="col-12 col-md-4 d-flex flex-column align-items-center">
        <img src="{{ 'images/content/design-system-placeholder.svg' | asset_url }}"" alt="" class="icon">
        <h3>Feature 2</h3>
        <p>Separated they live in Bookmarksgrove right at the coast of the Semantics, a large language ocean.</p>        
      </div>
      <div class="col-12 col-md-4 d-flex flex-column align-items-center">
        <img src="{{ 'images/content/design-system-placeholder.svg' | asset_url }}"" alt="" class="icon">
        <h3>Feature 3</h3>
        <p>A small river named Duden flows by their place and supplies it with the necessary regelialia</p>       
      </div>
    </div>
    <img src="{{ 'images/content/design-system-placeholder.svg' | asset_url }}" alt="" />
  </div>
</section>

Why become a Siteglide Partner?

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec posuere efficitur erat, ut blandit dui rhoncus sit amet. Donec varius tellus sodales, elementum ex vitae, interdum risus. Fusce condimentum ligula a sapien mollis, eget accumsan dui posuere. Ut a nulla augue. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Sed aliquet malesuada magna.

Feature One

Far far away, behind the word mountains, far from the countries

Feature Two

Far far away, behind the word mountains, far from the countries

Feature Three

Far far away, behind the word mountains, far from the countries

<section class="feature feature-11">
  <div class="container">
    <h2>Why become a Siteglide Partner?</h2>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec posuere efficitur erat, ut blandit dui rhoncus sit amet. Donec varius tellus sodales, elementum ex vitae, interdum risus. Fusce condimentum ligula a sapien mollis, eget accumsan dui posuere. Ut a nulla augue. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Sed aliquet malesuada magna.</p>
    <div class="card-deck">
      <div class="card">
        <div class="card-img background-image" style="background-image: url('{{ 'images/content/design-system-placeholder.svg' | asset_url }}');"></div>
        <div class="card-body">
          <h3>Feature One</h3>
          <p>Far far away, behind the word mountains, far from the countries</p>
        </div>
      </div>
      <div class="card">
        <div class="card-img background-image" style="background-image: url('{{ 'images/content/design-system-placeholder.svg' | asset_url }}');"></div>
        <div class="card-body">
          <h3>Feature Two</h3>
          <p>Far far away, behind the word mountains, far from the countries</p>
        </div>
      </div>
      <div class="card">
        <div class="card-img background-image" style="background-image: url('{{ 'images/content/design-system-placeholder.svg' | asset_url }}');"></div>
        <div class="card-body">
          <h3>Feature Three</h3>
          <p>Far far away, behind the word mountains, far from the countries</p>
        </div>
      </div>
    </div>
  </div>
</section>

Siteglide Design System

Far far away, behind the word mountains, far from the countries Vokalia and Consonantia, there live the blind texts. Separated they live in Bookmarksgrove right at the coast of the Semantics, a large language ocean.

Feature One

Far from the countries Vokalia and Consonantia, there live the blind texts. Separated they live in Bookmarksgrove right at the coast of the Semantics, a large language ocean. A small river named Duden flows by their place and supplies it with the necessary regelialia. When she reached the first hills of the Italic Mountains, she had a last view back on the skyline of her hometown Bookmarksgrove, the headline of Alphabet Village and the subline of her own road, the Line Lane.

Feature Two

It is a paradisematic country, in which roasted parts of sentences fly into your mouth. Even the all-powerful Pointing has no control about the blind texts it is an almost unorthographic life. The Big Oxmox advised her not to do so, because there were thousands of bad Commas, wild Question Marks and devious Semikoli. On her way she met a copy. The copy warned the Little Blind Text, that where it came from it would have been rewritten a thousand times and everything that was left from its origin.

<section class="feature feature-12">
  <div class="container">
    <div class="row">
      <div class="col-12 col-md-10 offset-md-1">
        <h2 class="text-center text-md-left">Siteglide Design System</h2>
          <p>Far far away, behind the word mountains, far from the countries Vokalia and Consonantia, there live the blind texts. Separated they live in Bookmarksgrove right at the coast of the Semantics, a large language ocean.</p>
          <img src="{{ 'images/content/design-system-placeholder.svg' | asset_url }}" alt="" />
          <div class="row">
            <div class="col-12 col-lg-6">
              <h3>Feature One</h3>
              <p>Far from the countries Vokalia and Consonantia, there live the blind texts. Separated they live in Bookmarksgrove right at the coast of the Semantics, a large language ocean. A small river named Duden flows by their place and supplies it with the necessary regelialia. When she reached the first hills of the Italic Mountains, she had a last view back on the skyline of her hometown Bookmarksgrove, the headline of Alphabet Village and the subline of her own road, the Line Lane.</p>
            </div>
            <div class="col-12 col-lg-6">
              <h3>Feature Two</h3>
              <p>It is a paradisematic country, in which roasted parts of sentences fly into your mouth. Even the all-powerful Pointing has no control about the blind texts it is an almost unorthographic life. The Big Oxmox advised her not to do so, because there were thousands of bad Commas, wild Question Marks and devious Semikoli. On her way she met a copy. The copy warned the Little Blind Text, that where it came from it would have been rewritten a thousand times and everything that was left from its origin.</p>
          </div>
        </div>
      </div>
    </div>
  </div>
</section>

Siteglide Design System

Far far away, behind the word mountains, far from the countries Vokalia and Consonantia, there live the blind texts. Separated they live in Bookmarksgrove right at the coast of the Semantics, a large language ocean. On her way she met a copy. The copy warned the Little Blind Text, that where it came from it would have been rewritten a thousand times and everything that was left from its origin would be the word "and" and the Little Blind Text.

Feature One

Even the all-powerful Pointing has no control about the blind texts it is an almost unorthographic life One day however a small line of blind text by the name of Lorem Ipsum decided to leave for the far World of Grammar.

Feature Two

It is a paradisematic country, in which roasted parts of sentences fly into your mouth. Even the all-powerful Pointing has no control about the blind texts it is an almost unorthographic life.

<section class="feature feature-13">
  <div class="container">
    <div class="row">
      <div class="col-12 col-lg-10 offset-lg-1">
        <h2>Siteglide Design System</h2>
        <p>Far far away, behind the word mountains, far from the countries Vokalia and Consonantia, there live the blind texts. Separated they live in Bookmarksgrove right at the coast of the Semantics, a large language ocean. On her way she met a copy. The copy warned the Little Blind Text, that where it came from it would have been rewritten a thousand times and everything that was left from its origin would be the word "and" and the Little Blind Text.</p>
      </div>
    </div>
    <div class="row">
      <div class="col-12 col-lg-5 offset-lg-1">
        <img src="{{ 'images/content/design-system-placeholder.svg' | asset_url }}" alt=""/>
        <h3>Feature One</h3>
        <p>Even the all-powerful Pointing has no control about the blind texts it is an almost unorthographic life One day however a small line of blind text by the name of Lorem Ipsum decided to leave for the far World of Grammar.</p>
      </div>
      <div class="col-12 col-lg-5">
        <img src="{{ 'images/content/design-system-placeholder.svg' | asset_url }}" alt=""/>
        <h3>Feature Two</h3>
        <p>It is a paradisematic country, in which roasted parts of sentences fly into your mouth. Even the all-powerful Pointing has no control about the blind texts it is an almost unorthographic life.</p>
      </div>
    </div>
  </div>
</section>

Siteglide Design System

CRM

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec posuere efficitur erat, ut blandit dui rhoncus sit amet. Donec varius tellus sodales, elementum ex vitae, interdum risus. Fusce condimentum ligula a sapien mollis, eget accumsan dui posuere. Ut a nulla augue. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Sed aliquet malesuada magna.

Learn more

CRM

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec posuere efficitur erat, ut blandit dui rhoncus sit amet. Donec varius tellus sodales, elementum ex vitae, interdum risus. Fusce condimentum ligula a sapien mollis, eget accumsan dui posuere. Ut a nulla augue. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Sed aliquet malesuada magna.

Learn more

CRM

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec posuere efficitur erat, ut blandit dui rhoncus sit amet. Donec varius tellus sodales, elementum ex vitae, interdum risus. Fusce condimentum ligula a sapien mollis, eget accumsan dui posuere. Ut a nulla augue. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Sed aliquet malesuada magna.

Learn more

<section class="feature feature-14">
  <div class="container">
    <h2 class="text-center">Siteglide Design System</h2>
    <div class="row align-items-center">
      <div class="col-12 col-md-6">
        <img src="{{ 'images/content/design-system-placeholder.svg' | asset_url }}" alt="">
      </div>
      <div class="col-12 col-md-6">
        <h3>CRM</h3>
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec posuere efficitur erat, ut blandit dui rhoncus sit amet. Donec varius tellus sodales, elementum ex vitae, interdum risus. Fusce condimentum ligula a sapien mollis, eget accumsan dui posuere. Ut a nulla augue. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Sed aliquet malesuada magna.</p>
        <a href="#" title="">Learn more</a>
      </div>
    </div>
    <div class="row align-items-center">
      <div class="col-12 col-md-6 order-md-2">
        <img src="{{ 'images/content/design-system-placeholder.svg' | asset_url }}" alt="">
      </div>
      <div class="col-12 col-md-6 order-md-1">
        <h3>CRM</h3>
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec posuere efficitur erat, ut blandit dui rhoncus sit amet. Donec varius tellus sodales, elementum ex vitae, interdum risus. Fusce condimentum ligula a sapien mollis, eget accumsan dui posuere. Ut a nulla augue. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Sed aliquet malesuada magna.</p>
        <a href="#" title="">Learn more</a>
      </div>
    </div>
    <div class="row align-items-center">
      <div class="col-12 col-md-6">
        <img src="{{ 'images/content/design-system-placeholder.svg' | asset_url }}" alt="">
      </div>
      <div class="col-12 col-md-6">
        <h3>CRM</h3>
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec posuere efficitur erat, ut blandit dui rhoncus sit amet. Donec varius tellus sodales, elementum ex vitae, interdum risus. Fusce condimentum ligula a sapien mollis, eget accumsan dui posuere. Ut a nulla augue. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Sed aliquet malesuada magna.</p>
        <a href="#" title="">Learn more</a>
      </div>
    </div>
  </div>
</section>

Siteglide Design System is simply ahead the word mountains

Far far away, behind the word mountains, far from the countries Vokalia and Consonantia, there live the blind texts. Separated they live in Bookmarksgrove right at the coast of the Semantics, a large language ocean.

Explore more features

Feature One

Feature Two

Feature Three

Feature Four

<section class="feature feature-15">
  <div class="container">
    <div class="col-12 col-lg-7 offset-lg-1">
      <div class="row">
        <h2>Siteglide Design System is simply ahead the word mountains</h2>
        <p>Far far away, behind the word mountains, far from the countries Vokalia and Consonantia, there live the blind texts. Separated they live in Bookmarksgrove right at the coast of the Semantics, a large language ocean.</p>
        <a href="#" title>Explore more features<i class="fas fa-chevron-right ml-2"></i></a>
      </div>
      <div class="row text-center"> 
        <div class="col-6 col-lg-3">
          <img src="{{ 'images/content/design-system-placeholder.svg' | asset_url }}" class="icon" alt="" />
          <h3>Feature One</h3>
        </div>
        <div class="col-6 col-lg-3">
          <img src="{{ 'images/content/design-system-placeholder.svg' | asset_url }}" class="icon" alt="" />
          <h3>Feature Two</h3>
        </div>      
        <div class="col-6 col-lg-3">
          <img src="{{ 'images/content/design-system-placeholder.svg' | asset_url }}" class="icon" alt="" />
          <h3>Feature Three</h3>
        </div>      
        <div class="col-6 col-lg-3">
          <img src="{{ 'images/content/design-system-placeholder.svg' | asset_url }}" class="icon" alt="" />
          <h3>Feature Four</h3>
        </div>  
      </div>
    </div>
  </div>
</section>

There is a feature for everyone

See all features

Feature One

Feature Two

Feature Three

Feature Four

<section class="feature feature-16">
  <div class="container text-center">
    <div class="row">
      <div class="col-12">
        <h2>There is a feature for everyone</h2>
        <a href="#" title="">See all features<i class="fas fa-chevron-right ml-2"></i></a>
      </div>
    </div>
    <div class="row">
      <div class="col-12 col-lg-3">
        <img src="{{ 'images/content/design-system-placeholder.svg' | asset_url }}" />
        <h3>Feature One</h3>
      </div>
      <div class="col-12 col-lg-3">
        <img src="{{ 'images/content/design-system-placeholder.svg' | asset_url }}" />
        <h3>Feature Two</h3>
      </div>
      <div class="col-12 col-lg-3">
        <img src="{{ 'images/content/design-system-placeholder.svg' | asset_url }}" />
        <h3>Feature Three</h3>
      </div>
      <div class="col-12 col-lg-3">
        <img src="{{ 'images/content/design-system-placeholder.svg' | asset_url }}" />
        <h3>Feature Four</h3>
      </div>
    </div>
  </div>
</section>

Siteglide Design System

Far far away, behind the word mountains, far from the countries Vokalia and Consonantia, there live the blind texts. Separated they live in Bookmarksgrove right at the coast of the Semantics, a large language ocean.

Feature One

Separated they live in Bookmarksgrove right at the coast of the Semantics, a large ocean.

Feature Two

A small river named Duden flows by their place and supplies it with the necessary regelialia.

Feature Three

It is a paradisematic country, in which roasted parts of sentences fly into your mouth.

Feature Four

Even the all-powerful Pointing has no control about the blind texts it is an almost unorthographic life.

<section class="feature feature-17">
  <div class="container">
    <div class="row d-flex align-items-center mb-5">
      <div class="col-12 col-md-5 text-center text-sm-left">
        <h2>Siteglide Design System</h2>
        <p>Far far away, behind the word mountains, far from the countries Vokalia and Consonantia, there live the blind texts. Separated they live in Bookmarksgrove right at the coast of the Semantics, a large language ocean.</p>
      </div>
      <div class="col-md-5 offset-md-2">
        <img src="{{ 'images/content/design-system-placeholder.svg' | asset_url }}" alt="">
      </div>
    </div>
    <div class="row">
      <div class="col-12 col-sm-6 col-md-3">
        <h3>Feature One</h3>
        <p>Separated they live in Bookmarksgrove right at the coast of the Semantics, a large ocean.</p>
      </div>
      <div class="col-12 col-sm-6 col-md-3">
        <h3>Feature Two</h3>
        <p>A small river named Duden flows by their place and supplies it with the necessary regelialia.</p>
      </div>
      <div class="col-12 col-sm-6 col-md-3">
        <h3>Feature Three</h3>
        <p>It is a paradisematic country, in which roasted parts of sentences fly into your mouth.</p>
      </div>
      <div class="col-12 col-sm-6 col-md-3">
        <h3>Feature Four</h3>
        <p>Even the all-powerful Pointing has no control about the blind texts it is an almost unorthographic life.</p>
      </div>
    </div>
  </div>
</section>

Siteglide Design System

Feature One

Even the all-powerful Pointing has no control about the blind texts it is an almost unorthographic life.

Feature Two

Separated they live in Bookmarksgrove, right at the coast of the Semantics, a large language ocean.

<section class="feature feature-18">
  <div class="container">
    <div class="row">
      <div class="col-12 col-lg-10 offset-lg-1">
        <h2 class="text-center">Siteglide Design System</h2>
        <img src="{{ 'images/content/design-system-placeholder.svg' | asset_url }}" alt="" /> 
        <div class= "row">
          <div class="col-12 col-lg-6 d-flex flex-row">
            <img src="{{ 'images/content/design-system-placeholder.svg' | asset_url }}" class="icon" alt="" />
            <div class="feature">
              <h3>Feature One</h3>
              <p>Even the all-powerful Pointing has no control about the blind texts it is an almost unorthographic life.</p>
            </div>
          </div>
          <div class="col-12 col-lg-6 d-flex flex-row">
            <img src="{{ 'images/content/design-system-placeholder.svg' | asset_url }}" class="icon" alt="" />
            <div class="feature">
              <h3>Feature Two</h3>
              <p>Separated they live in Bookmarksgrove, right at the coast of the Semantics, a large language ocean.</p>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</section>

Siteglide Design System

Feature one longer text

Feature two longer text

Coming this fall

<section class="feature feature-19">
  <div class="container text-center">
    <h2>Siteglide Design System</h2>
    <div class="row">
      <div class="col-12 col-lg-8 offset-lg-2">
        <div class="row">
          <div class="col-12 col-lg-4 offset-lg-2 ">
            <img src="{{ 'images/content/design-system-placeholder.svg' | asset_url }}" alt="" class="icon" />
            <h3>Feature one longer text</h3>
          </div>
          <div class="col-12 col-lg-4">
            <img src="{{ 'images/content/design-system-placeholder.svg' | asset_url }}" alt="" class="icon" /> 
            <h3>Feature two longer text</h3>
          </div>
          <img src="{{ 'images/content/design-system-placeholder.svg' | asset_url }}" alt="" />
        </div>
        <p>Coming this fall</p>
      </div>
    </div>
  </div>
</section>

Siteglide Design System

The all powerful Pointing has no control

Learn

The all powerful Pointing has no control

Learn

The all powerful Pointing has no control

Learn

The all powerful Pointing has no control

Learn

<section class="feature feature-20">
  <div class="container text-center">
    <h2>Siteglide Design System</h2>
    <div class="row">
      <div class="col-12 col-lg-6">
        <div class="row">
          <div class="col-12 col-sm-6 d-flex flex-column align-items-center mb-4">
            <img src="{{ 'images/icons/placeholder-feature.svg' | asset_url }}" alt="" class="icon mb-3" />
            <h3>The all powerful Pointing has no control</h3>
            <a class="btn btn-primary" href="#" title="">Learn</a>
          </div>
          <div class="col-12 col-sm-6 d-flex flex-column align-items-center mb-4">
            <img src="{{ 'images/icons/placeholder-feature.svg' | asset_url }}" alt="" class="icon mb-3" />
            <h3>The all powerful Pointing has no control</h3>
            <a class="btn btn-primary" href="#" title="">Learn</a>
          </div>
        </div>
      </div>
      <div class="col-12 col-lg-6">
        <div class="row">
          <div class="col-12 col-sm-6 d-flex flex-column align-items-center mb-4">
            <img src="{{ 'images/icons/placeholder-feature.svg' | asset_url }}" alt="" class="icon mb-3" />
            <h3>The all powerful Pointing has no control</h3>
            <a class="btn btn-primary" href="#" title="">Learn</a>
          </div>
          <div class="col-12 col-sm-6 d-flex flex-column align-items-center mb-4">
            <img src="{{ 'images/icons/placeholder-feature.svg' | asset_url }}" alt="" class="icon mb-3" />
            <h3>The all powerful Pointing has no control</h3>
            <a class="btn btn-primary" href="#" title="">Learn</a>
          </div>
        </div>
      </div>
    </div>
  </div>
</section>

Siteglide Design System

Feature

Far far away, behind the word mountains, far from the countries.

Feature

Separated they live in Bookmarksgrove right at the coast.

Feature

A small river named Duden flows by their place and supplies.

<section class="feature feature-21">
  <div class="container text-center">
    <div class="row">
      <div class="col-12">
        <h2>Siteglide Design System</h2>
        <div class="card-deck">
          <div class="card">
            <div class="card-img">
              <img src="{{ 'images/content/design-system-placeholder.svg' | asset_url }}" class="icon" alt="" />
            </div>
            <div class="card-body">
              <h3>Feature</h3>
              <p>Far far away, behind the word mountains, far from the countries.</p>
            </div>
          </div>
          <div class="card">
            <div class="card-img">
              <img src="{{ 'images/content/design-system-placeholder.svg' | asset_url }}" class="icon" alt="" />
            </div>
            <div class="card-body">
              <h3>Feature</h3>
              <p>Separated they live in Bookmarksgrove right at the coast.</p>
            </div>
          </div>            
          <div class="card">
            <div class="card-img">
              <img src="{{ 'images/content/design-system-placeholder.svg' | asset_url }}" class="icon" alt="" />
            </div>
            <div class="card-body">
              <h3>Feature</h3>
              <p>A small river named Duden flows by their place and supplies.</p>
            </div>
          </div>            
        </div>
      </div>
    </div>
  </div>
</section>

Siteglide Design System

Feature

Far far away, behind the word mountains, far from the countries.

Feature

Separated they live in Bookmarksgrove right at the coast.

Feature

A small river named Duden flows by their place and supplies.

<section class="feature feature-22">
  <div class="container">
    <div class="row">
      <div class="col-12">
        <h2 class="text-center">Siteglide Design System</h2>
        <div class="card-deck">
          <div class="card">
            <div class="card-img">
              <img src="{{ 'images/content/design-system-placeholder.svg' | asset_url }}" class="icon" alt="" />
            </div>
            <div class="card-body">
              <h3>Feature</h3>
              <p>Far far away, behind the word mountains, far from the countries.</p>
            </div>
          </div>
          <div class="card">
            <div class="card-img">
              <img src="{{ 'images/content/design-system-placeholder.svg' | asset_url }}" class="icon" alt="" />
            </div>
            <div class="card-body">
              <h3>Feature</h3>
              <p>Separated they live in Bookmarksgrove right at the coast.</p>
            </div>
          </div>            
          <div class="card">
            <div class="card-img">
              <img src="{{ 'images/content/design-system-placeholder.svg' | asset_url }}" class="icon" alt="" />
            </div>
            <div class="card-body">
              <h3>Feature</h3>
              <p>A small river named Duden flows by their place and supplies.</p>
            </div>
          </div>            
        </div>
      </div>
    </div>
  </div>
</section>

<footer class="footer footer-10 bg-dark">
  <div class="container">
    <div class="row text-center text-md-left">
      <div class="col-12 col-md-4">
        <h2>Country A</h2>
        <address>Street Address 52<br>Contact Name<br>0118 212 24 01<br>hello@siteglide.com</address>
      </div>
      <div class="col-12 col-md-4">
        <h2>Country B</h2>
        <address>Street Address 52<br>Contact Name<br>0118 212 24 01<br>hello@siteglide.com</address>
      </div>
      <div class="col-12 col-md-4">
        <h2>Country C</h2>
        <p>Far far away, behind the word mountains, far from the countries Vokalia and Consonantia, there live the blind texts.</p>
      </div>
    </div>
    <p class="copyright text-center">&copy; 2020 Siteglide. All rights reserved.</p>
  </div>
</footer>

<footer class="footer footer-11 bg-dark">
  <div class="container">
    <div class="row flex-column flex-md-row align-items-center justify-content-between">
      <p>&copy; 2019 {{context.exports.company_information.properties.company_name}}</p>
      <a href="/" title="">
        <img src="{{context.exports.company_information.properties.logo | asset_url}}" alt="Welcome to {{context.exports.company_information.properties.company_name}}">
      </a>
      {%- include 'menu', id:'ID NUMBER', layout: 'LAYOUT NAME', name: 'MENU NAME' -%}
    </div>
  </div>
</footer>

<ul>
   {%- include 'modules/siteglide_menu/get/get_items', item_layout: 'item' -%}
</ul>

{%- comment -%} If this item has children, output the item, and then go get its children {%- endcomment -%}
{%- if this['is_parent'] -%}
	<li {% if this['link_class'] %} class="{{this['link_class']}}" {%- endif -%}>
	  <div class="dropdown">
  		<a href="{{this['link_url']}}" id="{{this.id}}" class="dropdown-toggle" {% if this['target'] %}target="{{this['target']}}"{% endif %} data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">{{this['link_name']}}</a>
  		{%- comment -%} Wrap children in <ul>, set the next level, and then get the children {%- endcomment -%}
  		<div class="dropdown-menu" aria-labelledby="{{this.id}}">
  		<ul>
  			{%- assign _next_level = _level | plus: 1 -%}
  			{%- include 'modules/siteglide_menu/get/get_items', level: _next_level, parent_id: this['forced_id'], item_layout: 'item' -%}
  		</ul>
  		</div>
		</div>
	</li>
{%- comment -%} Else just output the item by itself {%- endcomment -%}
{%- else -%}
	<li {% if this['link_class'] %} class="{{this['link_class']}}" {%- endif -%}>
		<a href="{{this['link_url']}}" {% if this['target'] %}target="{{this['target']}}"{% endif %}>{{this['link_name']}}</a>
	</li>
{%- endif -%}

<section class="form form-01">
    <div class="container">
        <form>
            <div class="row d-flex justify-content-center">
                <div class="col-12 col-md-6">
                    <h2 class="text-center">Subscribe</h2>
                    <div class="input-group">
                        <label for="append">Email Address</label>
                        <input id="append" type="text" class="form-control" placeholder="Email Address" aria-label="append" aria-describedby="appended-input">
                        <div class="input-group-append">
                            <button class="btn btn-primary" type="button">Submit</button>
                        </div>
                    </div>
                    <p class="text-center">Find us on Facebook and Twitter.</p>
                </div>
            </div>
        </form>
    </div>
</section>

<section class="form form-05">
  <div class="container">
    <form>
      <div class="row align-items-center">
        <div class="col-12 col-md-5">
          <img src="{{ 'images/content/design-system-placeholder.svg' | asset_url }}">
        </div>
        <div class="col-12 col-md-6 offset-md-1">
          <h2>Subscribe</h2>
          <p>Far far away, behind the word mountains, far from the countries Vokalia and Consonantia.</p>
          <div class="input-group">
            <label for="append">Email Address</label>
            <input id="append" type="text" class="form-control" placeholder="Email Address" aria-label="append" aria-describedby="appended-input">
            <div class="input-group-append">
              <button class="btn btn-primary" type="button">Submit</button>
            </div>
          </div>
          <p class="small"><sup>*</sup> Leave your email address to be notified first.</p>
        </div>
      </div>
    </form>
  </div>
</section>

Sign Up

Far far away, behind the word mountains, far from the countries Vokalia and Consonantia.

<section class="form form-08">
  <div class="container">
    <div class="row">
      <div class="col-12 col-md-6 offset-md-3 text-center">
        <div class="card">
          <div class="card-body">
            <h2>Sign Up</h2>
            <p>Far far away, behind the word mountains, far from the countries Vokalia and Consonantia.</p>
            <form>
                <!-- INSERT FORM HERE -->
            </form>
          </div>
        </div>
      </div>
    </div>
  </div>
</section>

<header class="masthead masthead-01">
  <nav class="navbar navbar-expand-lg navbar-light">
    <div class="container">
      <a class="navbar-brand" href="#" title="">
        <img src="{{context.exports.company_information.properties.logo_white | asset_url}}" alt="">
      </a>
      <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
        <span class="navbar-toggler-icon"></span>
      </button>
      <div class="collapse navbar-collapse" id="navbarNav">
        {%- include 'menu', id:'ID NUMBER', layout: 'LAYOUT NAME', name: 'MENU NAME' -%}
        <ul class="navbar-nav d-flex-lg align-items-lg-center list-inline">
            <li class="nav-item list-inline-item">
                <a href="https://www.facebook.com/" target="_blank" title="">
                    <svg class="svg-inline--fa fa-facebook-f fa-w-9 fa-lg" aria-hidden="true" data-prefix="fab" data-icon="facebook-f" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 264 512" data-fa-i2svg=""><path fill="currentColor" d="M76.7 512V283H0v-91h76.7v-71.7C76.7 42.4 124.3 0 193.8 0c33.3 0 61.9 2.5 70.2 3.6V85h-48.2c-37.8 0-45.1 18-45.1 44.3V192H256l-11.7 91h-73.6v229"></path></svg>
                    <!-- <i class="fab fa-facebook-f fa-lg"></i> -->
                </a>
            </li>
            <li class="nav-item list-inline-item">
                <a href="https://www.facebook.com/" target="_blank" title="">
                    <svg class="svg-inline--fa fa-facebook-f fa-w-9 fa-lg" aria-hidden="true" data-prefix="fab" data-icon="facebook-f" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 264 512" data-fa-i2svg=""><path fill="currentColor" d="M76.7 512V283H0v-91h76.7v-71.7C76.7 42.4 124.3 0 193.8 0c33.3 0 61.9 2.5 70.2 3.6V85h-48.2c-37.8 0-45.1 18-45.1 44.3V192H256l-11.7 91h-73.6v229"></path></svg>
                    <!-- <i class="fab fa-facebook-f fa-lg"></i> -->
                </a>
            </li>
        </ul>
        <ul class="navbar-nav d-flex-lg align-items-lg-center">
          <li class="nav-item">
            <a class="nav-link btn btn-primary" href="#" title="">Button Label</a>
          </li>
        </ul>
      </div>
    </div>
  </nav>
</header>

<ul class="navbar-nav d-flex-lg align-items-lg-center">
    {%- include 'modules/siteglide_menu/get/get_items', item_layout: 'item' -%}
</ul>

{%- comment -%} If this item has children, output the item, and then go get its children {%- endcomment -%}
{%- if this['is_parent'] -%}
	<li {% if this['link_class'] %} class="nav-item {{this['link_class']}}" {%- endif -%}>
	    <div class="dropdown">
            <a href="{{this['link_url']}}" id="{{this.id}}" class="nav-link dropdown-toggle" {% if this['target'] %}target="{{this['target']}}"{% endif %} data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">{{this['link_name']}}
                <i class="fas fa-chevron-down"></i>
            </a>
            {%- comment -%} Wrap children in <ul>, set the next level, and then get the children {%- endcomment -%}
            <div class="dropdown-menu" aria-labelledby="{{this.id}}">
                <ul>
                    {%- assign _next_level = _level | plus: 1 -%}
			        {%- include 'modules/siteglide_menu/get/get_items', level: _next_level, parent_id: this['forced_id'], item_layout: 'subitem' -%}
                </ul>
            </div>
	    </div>
	</li>
{%- comment -%} Else just output the item by itself {%- endcomment -%}
{%- else -%}
	<li {% if this['link_class'] %} class="nav-item {{this['link_class']}}" {%- endif -%}>
		<a class="nav-link" href="{{this['link_url']}}" {% if this['target'] %}target="{{this['target']}}"{% endif %}>{{this['link_name']}}</a>
	</li>
{%- endif -%}

<li class="nav-item sub-nav-item {% if this['link_class'] %}{{this['link_class']}}{%- endif -%}">
	<a class="nav-link" href="{{this['link_url']}}" title="{{this['link_name']}}" target="{{this['link_target']}}">{{this['link_name']}}</a>
</li>

<header class="masthead masthead-01 bg-dark">
  <nav class="navbar navbar-expand-lg navbar-dark">
    <div class="container">
      <a class="navbar-brand" href="#" title="">
        <img src="{{context.exports.company_information.properties.logo | asset_url}}" alt="">
      </a>
      <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
        <span class="navbar-toggler-icon"></span>
      </button>
      <div class="collapse navbar-collapse" id="navbarNav">
        <ul class="navbar-nav d-flex-lg align-items-lg-center">
          <li class="nav-item">
            <a class="nav-link" href="#" title="">Home</a>
          </li>
          <li class="nav-item dropdown">
            <a class="nav-link dropdown-toggle" id="Features" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false" href="" title="Features" target="_self">Features
                <i class="fas fa-chevron-down"></i>
            </a>
            <ul class="dropdown-menu" aria-labelledby="Benefits">
                <li class="nav-item sub-nav-item">
                    <a class="nav-link" href="#" title="Webapps" target="_self">Webapps</a>
                </li>
                <li class="nav-item sub-nav-item">
                    <a class="nav-link" href="#" title="eCommerce" target="_self">eCommerce</a>
                </li>
                <li class="nav-item sub-nav-item">
                    <a class="nav-link" href="#" title="Content Management System" target="_self">Content Management System</a>
                </li>
            </ul>
          </li>
          <li class="nav-item">
            <a class="nav-link" href="#" title="">Pricing</a>
          </li>
          <li class="nav-item">
            <a class="nav-link" href="#" title="">Team</a>
          </li>
          <li class="nav-item">
            <a class="nav-link" href="#" title="">Contact</a>
          </li>
        </ul>
        <ul class="navbar-nav d-flex-lg align-items-lg-center list-inline">
            <li class="nav-item list-inline-item">
                <a href="https://www.facebook.com/" target="_blank" title="">
                    <svg class="svg-inline--fa fa-facebook-f fa-w-9 fa-lg" aria-hidden="true" data-prefix="fab" data-icon="facebook-f" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 264 512" data-fa-i2svg=""><path fill="currentColor" d="M76.7 512V283H0v-91h76.7v-71.7C76.7 42.4 124.3 0 193.8 0c33.3 0 61.9 2.5 70.2 3.6V85h-48.2c-37.8 0-45.1 18-45.1 44.3V192H256l-11.7 91h-73.6v229"></path></svg>
                    <!-- <i class="fab fa-facebook-f fa-lg"></i> -->
                </a>
            </li>
            <li class="nav-item list-inline-item">
                <a href="https://www.facebook.com/" target="_blank" title="">
                    <svg class="svg-inline--fa fa-facebook-f fa-w-9 fa-lg" aria-hidden="true" data-prefix="fab" data-icon="facebook-f" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 264 512" data-fa-i2svg=""><path fill="currentColor" d="M76.7 512V283H0v-91h76.7v-71.7C76.7 42.4 124.3 0 193.8 0c33.3 0 61.9 2.5 70.2 3.6V85h-48.2c-37.8 0-45.1 18-45.1 44.3V192H256l-11.7 91h-73.6v229"></path></svg>
                    <!-- <i class="fab fa-facebook-f fa-lg"></i> -->
                </a>
            </li>
        </ul>
        <ul class="navbar-nav d-flex-lg align-items-lg-center">
          <li class="nav-item">
            <a class="nav-link btn btn-primary" href="#" title="">Button Label</a>
          </li>
        </ul>
      </div>
    </div>
  </nav>
</header>

<header class="masthead masthead-02">
  <nav class="navbar navbar-expand-lg navbar-light">
    <div class="container">
      <a class="navbar-brand" href="#" title="">
        <img src="{{context.exports.company_information.properties.logo_white | asset_url}}" alt="">
      </a>
      <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
        <span class="navbar-toggler-icon"></span>
      </button>
      <div class="collapse navbar-collapse" id="navbarNav">
        <ul class="navbar-nav d-flex-lg align-items-lg-center">
          <li class="nav-item">
            <a class="nav-link" href="#" title="">Home</a>
          </li>
          <li class="nav-item dropdown">
            <a class="nav-link dropdown-toggle" id="Features" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false" href="" title="Features" target="_self">Features
                <i class="fas fa-chevron-down"></i>
            </a>
            <ul class="dropdown-menu" aria-labelledby="Benefits">
                <li class="nav-item sub-nav-item">
                    <a class="nav-link" href="#" title="Webapps" target="_self">Webapps</a>
                </li>
                <li class="nav-item sub-nav-item">
                    <a class="nav-link" href="#" title="eCommerce" target="_self">eCommerce</a>
                </li>
                <li class="nav-item sub-nav-item">
                    <a class="nav-link" href="#" title="Content Management System" target="_self">Content Management System</a>
                </li>
            </ul>
          </li>
          <li class="nav-item">
            <a class="nav-link" href="#" title="">Pricing</a>
          </li>
          <li class="nav-item">
            <a class="nav-link" href="#" title="">Team</a>
          </li>
          <li class="nav-item">
            <a class="nav-link btn btn-primary" href="#" title="">Button Label</a>
          </li>
        </ul>
      </div>
    </div>
  </nav>
</header>

<header class="masthead masthead-02 bg-dark">
  <nav class="navbar navbar-expand-lg navbar-dark">
    <div class="container">
      <a class="navbar-brand" href="#" title="">
        <img src="{{context.exports.company_information.properties.logo | asset_url}}" alt="">
      </a>
      <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
        <span class="navbar-toggler-icon"></span>
      </button>
      <div class="collapse navbar-collapse" id="navbarNav">
        <ul class="navbar-nav d-flex-lg align-items-lg-center">
          <li class="nav-item">
            <a class="nav-link" href="#" title="">Home</a>
          </li>
          <li class="nav-item dropdown">
            <a class="nav-link dropdown-toggle" id="Features" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false" href="" title="Features" target="_self">Features
                <i class="fas fa-chevron-down"></i>
            </a>
            <ul class="dropdown-menu" aria-labelledby="Benefits">
                <li class="nav-item sub-nav-item">
                    <a class="nav-link" href="#" title="Webapps" target="_self">Webapps</a>
                </li>
                <li class="nav-item sub-nav-item">
                    <a class="nav-link" href="#" title="eCommerce" target="_self">eCommerce</a>
                </li>
                <li class="nav-item sub-nav-item">
                    <a class="nav-link" href="#" title="Content Management System" target="_self">Content Management System</a>
                </li>
            </ul>
          </li>
          <li class="nav-item">
            <a class="nav-link" href="#" title="">Pricing</a>
          </li>
          <li class="nav-item">
            <a class="nav-link" href="#" title="">Team</a>
          </li>
          <li class="nav-item">
            <a class="nav-link btn btn-primary" href="#" title="">Button Label</a>
          </li>
        </ul>
      </div>
    </div>
  </nav>
</header>

<header class="masthead masthead-03">
  <nav class="navbar navbar-expand-lg navbar-light">
    <div class="container">
      <a class="navbar-brand" href="#" title="">
        <img src="{{context.exports.company_information.properties.logo | asset_url}}" alt="">
      </a>
      <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
        <span class="navbar-toggler-icon"></span>
      </button>
      <div class="collapse navbar-collapse" id="navbarNav">
        <ul class="navbar-nav d-flex-lg align-items-lg-center">
          <li class="nav-item">
            <a class="nav-link" href="#" title="">Home</a>
          </li>
          <li class="nav-item dropdown">
            <a class="nav-link dropdown-toggle" id="Features" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false" href="" title="Features" target="_self">Features
                <i class="fas fa-chevron-down"></i>
            </a>
            <ul class="dropdown-menu" aria-labelledby="Benefits">
                <li class="nav-item sub-nav-item">
                    <a class="nav-link" href="#" title="Webapps" target="_self">Webapps</a>
                </li>
                <li class="nav-item sub-nav-item">
                    <a class="nav-link" href="#" title="eCommerce" target="_self">eCommerce</a>
                </li>
                <li class="nav-item sub-nav-item">
                    <a class="nav-link" href="#" title="Content Management System" target="_self">Content Management System</a>
                </li>
            </ul>
          </li>
          <li class="nav-item">
            <a class="nav-link" href="#" title="">Pricing</a>
          </li>
          <li class="nav-item">
            <a class="nav-link" href="#" title="">Team</a>
          </li>
          <li class="nav-item">
            <a class="nav-link" href="#" title="">Contact</a>
          </li>
        </ul>
        <ul class="navbar-nav d-flex-lg align-items-lg-center list-inline">
            <li class="nav-item list-inline-item">
                <a href="https://www.facebook.com/" target="_blank" title="">
                    <svg class="svg-inline--fa fa-facebook-f fa-w-9 fa-lg" aria-hidden="true" data-prefix="fab" data-icon="facebook-f" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 264 512" data-fa-i2svg=""><path fill="currentColor" d="M76.7 512V283H0v-91h76.7v-71.7C76.7 42.4 124.3 0 193.8 0c33.3 0 61.9 2.5 70.2 3.6V85h-48.2c-37.8 0-45.1 18-45.1 44.3V192H256l-11.7 91h-73.6v229"></path></svg>
                    <!-- <i class="fab fa-facebook-f fa-lg"></i> -->
                </a>
            </li>
            <li class="nav-item list-inline-item">
                <a href="https://www.facebook.com/" target="_blank" title="">
                    <svg class="svg-inline--fa fa-facebook-f fa-w-9 fa-lg" aria-hidden="true" data-prefix="fab" data-icon="facebook-f" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 264 512" data-fa-i2svg=""><path fill="currentColor" d="M76.7 512V283H0v-91h76.7v-71.7C76.7 42.4 124.3 0 193.8 0c33.3 0 61.9 2.5 70.2 3.6V85h-48.2c-37.8 0-45.1 18-45.1 44.3V192H256l-11.7 91h-73.6v229"></path></svg>
                    <!-- <i class="fab fa-facebook-f fa-lg"></i> -->
                </a>
            </li>
        </ul>
      </div>
    </div>
  </nav>
</header>

<header class="masthead masthead-03 bg-dark">
  <nav class="navbar navbar-expand-lg navbar-dark">
    <div class="container">
      <a class="navbar-brand" href="#" title="">
        <img src="{{context.exports.company_information.properties.logo_white | asset_url}}" alt="">
      </a>
      <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
        <span class="navbar-toggler-icon"></span>
      </button>
      <div class="collapse navbar-collapse" id="navbarNav">
        <ul class="navbar-nav d-flex-lg align-items-lg-center">
          <li class="nav-item">
            <a class="nav-link" href="#" title="">Home</a>
          </li>
          <li class="nav-item dropdown">
            <a class="nav-link dropdown-toggle" id="Features" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false" href="" title="Features" target="_self">Features
                <i class="fas fa-chevron-down"></i>
            </a>
            <ul class="dropdown-menu" aria-labelledby="Benefits">
                <li class="nav-item sub-nav-item">
                    <a class="nav-link" href="#" title="Webapps" target="_self">Webapps</a>
                </li>
                <li class="nav-item sub-nav-item">
                    <a class="nav-link" href="#" title="eCommerce" target="_self">eCommerce</a>
                </li>
                <li class="nav-item sub-nav-item">
                    <a class="nav-link" href="#" title="Content Management System" target="_self">Content Management System</a>
                </li>
            </ul>
          </li>
          <li class="nav-item">
            <a class="nav-link" href="#" title="">Pricing</a>
          </li>
          <li class="nav-item">
            <a class="nav-link" href="#" title="">Team</a>
          </li>
          <li class="nav-item">
            <a class="nav-link" href="#" title="">Contact</a>
          </li>
        </ul>
        <ul class="navbar-nav d-flex-lg align-items-lg-center list-inline">
            <li class="nav-item list-inline-item">
                <a href="https://www.facebook.com/" target="_blank" title="">
                    <svg class="svg-inline--fa fa-facebook-f fa-w-9 fa-lg" aria-hidden="true" data-prefix="fab" data-icon="facebook-f" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 264 512" data-fa-i2svg=""><path fill="currentColor" d="M76.7 512V283H0v-91h76.7v-71.7C76.7 42.4 124.3 0 193.8 0c33.3 0 61.9 2.5 70.2 3.6V85h-48.2c-37.8 0-45.1 18-45.1 44.3V192H256l-11.7 91h-73.6v229"></path></svg>
                    <!-- <i class="fab fa-facebook-f fa-lg"></i> -->
                </a>
            </li>
            <li class="nav-item list-inline-item">
                <a href="https://www.facebook.com/" target="_blank" title="">
                    <svg class="svg-inline--fa fa-facebook-f fa-w-9 fa-lg" aria-hidden="true" data-prefix="fab" data-icon="facebook-f" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 264 512" data-fa-i2svg=""><path fill="currentColor" d="M76.7 512V283H0v-91h76.7v-71.7C76.7 42.4 124.3 0 193.8 0c33.3 0 61.9 2.5 70.2 3.6V85h-48.2c-37.8 0-45.1 18-45.1 44.3V192H256l-11.7 91h-73.6v229"></path></svg>
                    <!-- <i class="fab fa-facebook-f fa-lg"></i> -->
                </a>
            </li>
        </ul>
      </div>
    </div>
  </nav>
</header>

<header class="masthead masthead-04">
  <nav class="navbar navbar-expand-lg navbar-light">
    <div class="container">
      <a class="navbar-brand" href="#" title="">
        <img src="{{context.exports.company_information.properties.logo | asset_url}}" alt="">
      </a>
      <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
        <span class="navbar-toggler-icon"></span>
      </button>
      <div class="collapse navbar-collapse" id="navbarNav">
        <ul class="navbar-nav d-flex-lg align-items-lg-center">
          <li class="nav-item">
            <a class="nav-link" href="#" title="">Home</a>
          </li>
          <li class="nav-item dropdown">
            <a class="nav-link dropdown-toggle" id="Features" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false" href="" title="Features" target="_self">Features
                <i class="fas fa-chevron-down"></i>
            </a>
            <ul class="dropdown-menu" aria-labelledby="Benefits">
                <li class="nav-item sub-nav-item">
                    <a class="nav-link" href="#" title="Webapps" target="_self">Webapps</a>
                </li>
                <li class="nav-item sub-nav-item">
                    <a class="nav-link" href="#" title="eCommerce" target="_self">eCommerce</a>
                </li>
                <li class="nav-item sub-nav-item">
                    <a class="nav-link" href="#" title="Content Management System" target="_self">Content Management System</a>
                </li>
            </ul>
          </li>
          <li class="nav-item">
            <a class="nav-link" href="#" title="">Pricing</a>
          </li>
          <li class="nav-item">
            <a class="nav-link" href="#" title="">Team</a>
          </li>
          <li class="nav-item">
            <a class="nav-link" href="#" title="">Contact</a>
          </li>
        </ul>
        <ul class="navbar-nav d-flex-lg align-items-lg-center">
          <li class="nav-item">
            <a class="nav-link" href="#" title="">Log in</a>
          </li>
          <li class="nav-item">
            <a class="nav-link btn btn-primary" href="#" title="">Button Label</a>
          </li>
        </ul>
      </div>
    </div>
  </nav>
</header>

<header class="masthead masthead-04 bg-dark">
  <nav class="navbar navbar-expand-lg navbar-dark">
    <div class="container">
      <a class="navbar-brand" href="#" title="">
        <img src="{{context.exports.company_information.properties.logo | asset_url}}" alt="">
      </a>
      <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
        <span class="navbar-toggler-icon"></span>
      </button>
      <div class="collapse navbar-collapse" id="navbarNav">
        <ul class="navbar-nav d-flex-lg align-items-lg-center">
          <li class="nav-item">
            <a class="nav-link" href="#" title="">Home</a>
          </li>
          <li class="nav-item dropdown">
            <a class="nav-link dropdown-toggle" id="Features" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false" href="" title="Features" target="_self">Features
                <i class="fas fa-chevron-down"></i>
            </a>
            <ul class="dropdown-menu" aria-labelledby="Benefits">
                <li class="nav-item sub-nav-item">
                    <a class="nav-link" href="#" title="Webapps" target="_self">Webapps</a>
                </li>
                <li class="nav-item sub-nav-item">
                    <a class="nav-link" href="#" title="eCommerce" target="_self">eCommerce</a>
                </li>
                <li class="nav-item sub-nav-item">
                    <a class="nav-link" href="#" title="Content Management System" target="_self">Content Management System</a>
                </li>
            </ul>
          </li>
          <li class="nav-item">
            <a class="nav-link" href="#" title="">Pricing</a>
          </li>
          <li class="nav-item">
            <a class="nav-link" href="#" title="">Team</a>
          </li>
          <li class="nav-item">
            <a class="nav-link" href="#" title="">Contact</a>
          </li>
        </ul>
        <ul class="navbar-nav d-flex-lg align-items-lg-center">
          <li class="nav-item">
            <a class="nav-link" href="#" title="">Log in</a>
          </li>
          <li class="nav-item">
            <a class="nav-link btn btn-primary" href="#" title="">Button Label</a>
          </li>
        </ul>
      </div>
    </div>
  </nav>
</header>

<header class="masthead masthead-05">
  <nav class="navbar navbar-expand-lg navbar-light">
    <div class="container">
      <a class="navbar-brand" href="#" title="">
        <img src="{{context.exports.company_information.properties.logo_white | asset_url}}" alt="">
      </a>
      <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
        <span class="navbar-toggler-icon"></span>
      </button>
      <div class="collapse navbar-collapse" id="navbarNav">
        <ul class="navbar-nav d-flex-lg align-items-lg-center">
          <li class="nav-item">
            <a class="nav-link" href="#" title="">Home</a>
          </li>
          <li class="nav-item dropdown">
            <a class="nav-link dropdown-toggle" id="Features" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false" href="" title="Features" target="_self">Features
                <i class="fas fa-chevron-down"></i>
            </a>
            <ul class="dropdown-menu" aria-labelledby="Benefits">
                <li class="nav-item sub-nav-item">
                    <a class="nav-link" href="#" title="Webapps" target="_self">Webapps</a>
                </li>
                <li class="nav-item sub-nav-item">
                    <a class="nav-link" href="#" title="eCommerce" target="_self">eCommerce</a>
                </li>
                <li class="nav-item sub-nav-item">
                    <a class="nav-link" href="#" title="Content Management System" target="_self">Content Management System</a>
                </li>
            </ul>
          </li>
          <li class="nav-item">
            <a class="nav-link" href="#" title="">Pricing</a>
          </li>
          <li class="nav-item">
            <a class="nav-link" href="#" title="">Team</a>
          </li>
          <li class="nav-item">
            <a class="nav-link" href="#" title="">Contact</a>
          </li>
        </ul>
        <ul class="navbar-nav d-flex-lg align-items-lg-center">
          <li class="nav-item">
            <a class="nav-link" href="#" title="">Log in</a>
          </li>
          <li class="nav-item">
            <a class="nav-link btn btn-primary" href="#" title="">Button Label</a>
          </li>
        </ul>
      </div>
    </div>
  </nav>
</header>

<header class="masthead masthead-05 bg-dark">
  <nav class="navbar navbar-expand-lg navbar-dark">
    <div class="container">
      <a class="navbar-brand" href="#" title="">
        <img src="{{context.exports.company_information.properties.logo | asset_url}}" alt="">
      </a>
      <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
        <span class="navbar-toggler-icon"></span>
      </button>
      <div class="collapse navbar-collapse" id="navbarNav">
        <ul class="navbar-nav d-flex-lg align-items-lg-center">
          <li class="nav-item">
            <a class="nav-link" href="#" title="">Home</a>
          </li>
          <li class="nav-item dropdown">
            <a class="nav-link dropdown-toggle" id="Features" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false" href="" title="Features" target="_self">Features
                <i class="fas fa-chevron-down"></i>
            </a>
            <ul class="dropdown-menu" aria-labelledby="Benefits">
                <li class="nav-item sub-nav-item">
                    <a class="nav-link" href="#" title="Webapps" target="_self">Webapps</a>
                </li>
                <li class="nav-item sub-nav-item">
                    <a class="nav-link" href="#" title="eCommerce" target="_self">eCommerce</a>
                </li>
                <li class="nav-item sub-nav-item">
                    <a class="nav-link" href="#" title="Content Management System" target="_self">Content Management System</a>
                </li>
            </ul>
          </li>
          <li class="nav-item">
            <a class="nav-link" href="#" title="">Pricing</a>
          </li>
          <li class="nav-item">
            <a class="nav-link" href="#" title="">Team</a>
          </li>
          <li class="nav-item">
            <a class="nav-link" href="#" title="">Contact</a>
          </li>
        </ul>
        <ul class="navbar-nav d-flex-lg align-items-lg-center">
          <li class="nav-item">
            <a class="nav-link" href="#" title="">Log in</a>
          </li>
          <li class="nav-item">
            <a class="nav-link btn btn-primary" href="#" title="">Button Label</a>
          </li>
        </ul>
      </div>
    </div>
  </nav>
</header>

Frequently Asked Questions

Far far away, behind the word mountains, far from the countries Vokalia and Consonantia, there live the blind texts

Button Label Button Label

<section class="hero hero-01 bg-dark background-image" style="background-image: url('https://uploads.prod01.oregon.platform-os.com/instances/916/assets/images/content/design-system-placeholder.svg')">
  <div class="container">
    <div class="row">
      <div class="col-12 text-center">
        <h2>Frequently Asked Questions</h2>
        <p>Far far away, behind the word mountains, far from the countries Vokalia and Consonantia, there live the blind texts</p>
        <a class="btn btn-primary" href="#" title="">Button Label</a>
        <a class="btn btn-secondary" href="#" title="">Button Label</a>
      </div>
    </div>
  </div>
  <a href="#" title="" class="btn btn-scroll">
    <span class="sr-only">Scroll to the next section</span>
    <i class="fas fa-chevron-down"></i>
  </a>
</section>

A Complete Digital Marketing Suite that's fully customisable

Siteglide gives agencies the toolkit they need to build enterprise grade web solutions for clients. Our hybrid SaaS model gives you total control to get under the hood while we take care of maintenance, updates and security.

Primary Secondary

<section class="hero hero-03">
  <div class="container">
    <div class="row align-items-center">
      <div class="col-12 col-md-5 text-center text-md-left">
        <h2>A Complete Digital Marketing Suite that's fully customisable</h2>
        <p>Siteglide gives agencies the toolkit they need to build enterprise grade web solutions for clients. Our hybrid SaaS model gives you total control to get under the hood while we take care of maintenance, updates and security.</p>
        <a class="btn btn-primary" href="#" title="">Primary</a>
        <a class="btn btn-secondary" href="#" title="">Secondary</a>
      </div>
      <div class="col-12 col-md-6 offset-md-1">
        <img src="{{ 'images/content/design-system-placeholder.svg' | asset_url }}" alt="">
      </div>
    </div>
  </div>
</section>

Map View

<script>
	//---Events Module Map View Options--- The Events Module Items should be loaded into a JavaScript Array- this allows them to be used by Google Maps. Changing the format in the item.liquid file may cause errors.
	var locations = [
{% comment %} Include the following code in to the item.liquid for map {%- include 'modules/siteglide_system/get/get_items', item_layout: 'item' -%}{% endcomment %}
		{
	id: "{{this.id}}",
	lat: {{this.properties.module_field_12_7 | split: ',' | first | times: 1 | default: "invalid" }},
	lng: {{this.properties.module_field_12_7 | split: ',' | last | times: 1 | default: "invalid" }},
	name: {{this.properties.name | json }},
	address: {{this.properties.module_field_12_6 | json }},
	slug: {{this.full_slug | json }},
	event_start: "{{this.properties.module_field_12_2 | date: "%d/%m/%Y %H:%M T%z"}}",
	event_end: "{{this.properties.module_field_12_3 | date: "%d/%m/%Y %H:%M T%z"}}",
	valid: "{% if this.properties.module_field_12_7 == blank %}invalid{% else %}valid{% endif %}"
}{% unless forloop.last %},{% endunless %}
	];
{% comment %} End of include for the item.liquid for map {% endcomment %}
	var options = {
		map_selector: "#map",// The Selector for the Element into which you want to render the map.
		zoom: 3,// Sets the initial zoom on the Map. 1 is minimum and 22 is maximum.
		center: false,// Sets the initial center of the Map. Should be in format {lat: Float, lng: Float} or false. If false, we will find the mid-point between all event locations and center there.
		show_info_windows: true,// Info Windows give the event information as a modal when you click an event marker.
		markers: {// Select an animation option from the Google Maps Documentation. String e.g. "DROP"
			animation: "DROP"
		},
		show_summary: false,// Shows a summary of the Events visible on the current Map Viewport.
		summary_selector: "#mapSummary"// Selector for Element which will contain any summary. String
	}

	function mapReady() {
		initMap(options, locations);
	}
</script>

{% comment %} Docs: https://developers.google.com/maps/documentation/javascript/tutorial {% endcomment %}
<script src="{{'js/modules/module_12/default_map.js' | asset_url }}"></script>

{% comment %} Required for Google Maps Marker Clustering {% endcomment %}
<script src="https://cdnjs.cloudflare.com/ajax/libs/markerclustererplus/2.1.4/markerclusterer.min.js"></script>

{% comment %} Required for Google Maps. Set your key in Integrations {% endcomment %}
<script src="https://maps.googleapis.com/maps/api/js?key={{context.exports.integrations.properties.google_api_key}}&callback=mapReady" async defer></script>

<section class="map map-01">
	<div class="container">
		<div class="row">
			<div class="col-12">
				<h2>Event Map View</h2>
				<div class="responsive-map-container">
					<div id="map" class="map"></div>
				</div>
			</div>
		</div>
	</div>
</section>

Prev
1
2
3
4
5
Next

{% assign total_pages = 5 %}

{% if total_pages != 1 -%}
  <ul class="pagination pagination-01">
    <li class="page-item {% if previous_page == false %}disabled{% endif %}">
      <a class="page-link" href="{{prev_path}}">Prev</a>
    </li>
    {% for page_button in (1..total_pages) -%}
      {% capture _path -%}{{context.location.pathname}}?page={{page_button}}{{page_search_params}}{% endcapture -%}
      <li class="page-item {% if page_button == current_page -%}active{% endif -%}">
        <a class="page-link " href="{{_path}}">{{page_button}}</a>
      </li>
    {% endfor -%}
    <li class="page-item {% if next_page == false %}disabled{% endif %}">
      <a class="page-link " href="{{next_path}}">Next</a>
    </li>
  </ul>
{% endif -%}

Previous page
1

10
Next page

  {% assign total_middle_buttons = 7 %}
  {% assign buttons_within = total_middle_buttons | divided_by: 2 %}
  
  {% assign minimum_threshold = current_page | minus: buttons_within %}
  {% assign maximum_threshold = current_page | plus: buttons_within %}
  
  {% if minimum_threshold < 1 %}
    {% assign difference = 1 | minus: minimum_threshold %}
    {% assign minimum_threshold = 1 %}
    {% assign maximum_threshold = maximum_threshold | plus: difference %}
  {% endif %}
  
  {% if maximum_threshold > total_pages %}
    {% assign difference = total_pages | minus: maximum_threshold %}
    {% assign maximum_threshold = total_pages %}
    {% assign minimum_threshold = minimum_threshold | plus: difference %}
  {% endif %}
  
  {% if total_pages != 1 -%}
    <ul class="pagination pagination-02">
      <li class="page-item {% if previous_page == false %}disabled{% endif %}">
        <a class="page-link" href="{{prev_path}}"><i class="fas fa-chevron-left"></i><span class="sr-only">Previous page</span></a>
      </li>
      {% if minimum_threshold > 1 %}
        <li class="page-item {% if current_page == 1 -%}active{% endif -%}">
           <a class="page-link" href="{{first_path}}">1</a>
        </li>
        <i class="fas fa-ellipsis-h"></i>
      {% endif -%}
      {% for page_button in (minimum_threshold..maximum_threshold) -%}
        {% capture _path -%}{{context.location.pathname}}?page={{page_button}}{{page_search_params}}{% endcapture -%}
        <li class="page-item {% if page_button == current_page -%}active{% endif -%}">
          <a class="page-link" href="{{_path}}">{{page_button}}</a>
        </li>
      {% endfor -%}
      {% if maximum_threshold < total_pages %}
        <i class="fas fa-ellipsis-h"></i>
        <li class="page-item {% if current_page == total_pages -%}active{% endif -%}">
           <a class="page-link" href="{{last_path}}">{{total_pages}}</a>
        </li>
      {% endif -%}
      <li class="page-item {% if next_page == false %}disabled{% endif %}">
        <a class="page-link" href="{{next_path}}"><i class="fas fa-chevron-right"></i><span class="sr-only">Next page</span></a>
      </li>
    </ul>
  {% endif -%}

Introduction

At Siteglide, we take your privacy seriously. This privacy statement explains what personal data or information we collect from you and from people who visit our website, and how we use that data.

If you have any questions regarding this statement and our privacy practices, please email them to support@siteglide.com.
Who We Are

Siteglide Limited is a registered company in the United Kingdom (Registered Number 08098016). Our registered office address is Unit 7A, Comet House, Calleva Park, Aldermaston, Reading, Berkshire, RG7 8JA.

For the purposes of data protection and the GDPR, Siteglide Limited is the data controller.

What we may collect

The personal information we collect may include your name, address, email address, IP address, and information regarding what pages you access on this website and when.

We may collect and process the following data about you:

Information you put into forms or surveys on our site at any time
A record of any correspondence between us
A record of any correspondence between us
Details of transactions you carry out through our site
Details of your visits to our site and the resources you use
Information about your computer (e.g. your IP address, browser, operating system, etc.) for system administration and to report aggregate information to our advertisers.

The specifics of the data are shown below:

Type of data	Purpose	Legal Basis
First and Surname	Used for enquiry/order identification and receipts.	Consent
Email address	This is used as a unique identifier for enquiries/orders. It is also required to send an enquiry/order receipt and any other essential communication. Finally, it may be used for marketing purposes if consent given by the customer.	Consent
Activity Data	Information is collected on total customer spend, average order value, order frequency and number of referrals.	Legitimate interest

<section class="policy policy-01">
  <div class="container">
    <div class="row">
      <div class="col-12">
        <ol>
          <li>
            <h2>Introduction</h2>
            <p>At {{context.exports.company_information.properties.company_name}}, we take your privacy seriously. This privacy statement explains what personal data or information we collect from you and from people who visit our website, and how we use that data.</p>
            <p>If you have any questions regarding this statement and our privacy practices, please email them to <a href="mailto:{{context.exports.company_information.properties.email_address}}" title="Email us at {{context.exports.company_information.properties.email_address}}">{{context.exports.company_information.properties.email_address}}</a>.</p>
          </li>
          <li>
            <h2>Who We Are</h2>
            <p>{{context.exports.company_information.properties.company_name}} is a registered company in the United Kingdom (Registered Number 08098016). Our registered office address is {{context.exports.company_information.properties.address_line_1}}, {{context.exports.company_information.properties.address_line_2}}.</p>
            <p>For the purposes of data protection and the GDPR, {{context.exports.company_information.properties.company_name}} is the data controller.</p>
          </li>
          <li>
            <h2>What we may collect</h2>
            <p>The personal information we collect may include your name, address, email address, IP address, and information regarding what pages you access on this website and when.</p>
            <p>We may collect and process the following data about you:</p>
            <ol>
              <li>Information you put into forms or surveys on our site at any time</li>
              <li>A record of any correspondence between us</li>
              <li>A record of any correspondence between us</li>
              <li>Details of transactions you carry out through our site</li>
              <li>Details of your visits to our site and the resources you use</li>
              <li>Information about your computer (e.g. your IP address, browser, operating system, etc.) for system administration and to report aggregate information to our advertisers.</li>
            </ol>
            <p>The specifics of the data are shown below:</p>
            <div class="responsive-table-container">
              <table>
                <thead>
                  <tr>
                    <th scope="col">Type of data</th>
                    <th scope="col">Purpose</th>
                    <th scope="col">Legal Basis</th>
                  </tr>
                </thead>
                <tbody>
                  <tr>
                    <th scope="row">First and Surname</th>
                    <td>Used for enquiry/order identification and receipts.</td>
                    <td>Consent</td>
                  </tr>
                  <tr>
                    <th scope="row">Email address</th>
                    <td>This is used as a unique identifier for enquiries/orders. It is also required to send an enquiry/order receipt and any other essential communication. Finally, it may be used for marketing purposes if consent given by the customer.</td>
                    <td>Consent</td>
                  </tr>
                  <tr>
                    <th scope="row">Activity Data</th>
                    <td>Information is collected on total customer spend, average order value, order frequency and number of referrals.</td>
                    <td>Legitimate interest</td>
                  </tr>
                </tbody>
              </table>
            </div>
          </li>
        </ol>
      </div>
    </div>
  </div>
</section>

Siteglide Design System

Item title

Far far away, behind the word mountains, far from the countries Vokalia and Consonantia, there live the blind texts.

Item title

Far far away, behind the word mountains, far from the countries Vokalia and Consonantia, there live the blind texts.

Item title

Far far away, behind the word mountains, far from the countries Vokalia and Consonantia, there live the blind texts.

<section class="portfolio portfolio-02">
  <div class="container text-center">
    <h2>Siteglide Design System</h2>
    <div class="card-deck">
      <div class="card">
        <div class="card-img background-image" style="background-image: url('{{ 'images/content/design-system-placeholder.svg' | asset_url }}')"></div>
        <div class="card-body">
          <h3 class="card-title">Item title</h3>
          <p class="card-text">Far far away, behind the word mountains, far from the countries Vokalia and Consonantia, there live the blind texts.</p>
        </div>
      </div>
      <div class="card">
        <div class="card-img background-image" style="background-image: url('{{ 'images/content/design-system-placeholder.svg' | asset_url }}')"></div>
        <div class="card-body">
          <h3 class="card-title">Item title</h3>
          <p class="card-text">Far far away, behind the word mountains, far from the countries Vokalia and Consonantia, there live the blind texts.</p>
        </div>
      </div>
      <div class="card">
        <div class="card-img background-image" style="background-image: url('{{ 'images/content/design-system-placeholder.svg' | asset_url }}')"></div>
        <div class="card-body">
          <h3 class="card-title">Item title</h3>
          <p class="card-text">Far far away, behind the word mountains, far from the countries Vokalia and Consonantia, there live the blind texts.</p>
        </div>
      </div>
    </div>
  </div>
</section>

Pricing Plans

Startup

£9.90

For Small Companies

10 hours of support
40MB of storage
Subdomain

Choose Plan

Standard

£19.90

For Medium Companies

10 hours of support
40MB of storage
Subdomain

Choose Plan

Startup

£29.90

For Large Companies

10 hours of support
40MB of storage
Subdomain

Choose Plan

<section class="pricing pricing-06">
  <div class="container text-center">
    <div class="row">
      <div class="col-12">
        <h2>Pricing Plans</h2>
        <div class="card-deck">
          <div class="card">
            <div class="card-header">
              <h3>Startup</h3>
              <p>&pound;9.90</p>
            </div>
            <div class="card-body">
              <img class="icon" src="{{ 'images/content/design-system-placeholder.svg' | asset_url }}" alt="">
              <h4>For Small Companies</h4>
              <ul>
                <li>10 hours of support</li>
                <li>40MB of storage</li>
                <li>Subdomain</li>
              </ul>
            </div>
            <div class="card-footer">
              <a class="btn btn-primary" href="#" title="">Choose Plan</a>
            </div>
          </div>
          <div class="card">
            <div class="card-header">
              <h3>Standard</h3>
              <p>&pound;19.90</p>
            </div>
            <div class="card-body">
              <img class="icon" src="{{ 'images/content/design-system-placeholder.svg' | asset_url }}" alt="">
              <h4>For Medium Companies</h4>
              <ul>
                <li>10 hours of support</li>
                <li>40MB of storage</li>
                <li>Subdomain</li>
              </ul>
            </div>
            <div class="card-footer">
              <a class="btn btn-primary" href="#" title="">Choose Plan</a>
            </div>
          </div>
          <div class="card">
            <div class="card-header">
              <h3>Startup</h3>
              <p>&pound;29.90</p>
            </div>
            <div class="card-body">
              <img class="icon" src="{{ 'images/content/design-system-placeholder.svg' | asset_url }}" alt="">
              <h4>For Large Companies</h4>
              <ul>
                <li>10 hours of support</li>
                <li>40MB of storage</li>
                <li>Subdomain</li>
              </ul>
            </div>
            <div class="card-footer">
              <a class="btn btn-primary" href="#" title="">Choose Plan</a>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</section>

Pricing Plans

	Hobby $99	Professional $399	Business $899	Enterprise Call us
Support	3 months	6 months	12 months	Custom
Full source code
SaaS / Subscription
Intranet
Downloadable Software
Redistribute
Custom code

<section class="pricing pricing-10">
  <div class="container">
    <div class="row">
      <div class="col-12">
        <h2 class="text-center">Pricing Plans</h2>
        <div class="responsive-table-container">
          <table>
            <thead class="text-center">
              <tr>
                <th scope="col"></th>
                <th scope="col">
                  <h3>Hobby</h3>
                  <p><strong>&dollar;99</strong></p>
                  <button class="btn btn-primary">Buy Now</button>
                </th>
                <th scope="col">
                  <h3>Professional</h3>
                  <p><strong>&dollar;399</strong></p>
                  <button class="btn btn-primary">Buy Now</button>
                </th>
                <th scope="col">
                  <h3>Business</h3>
                  <p><strong>&dollar;899</strong></p>
                  <button class="btn btn-primary">Buy Now</button>
                </th>
                <th scope="col">
                  <h3>Enterprise</h3>
                  <p><strong>Call us</strong></p>
                  <button class="btn btn-primary">Buy Now</button>
                </th>
              </tr>
            </thead>
            <tbody>
              <tr>
                <th scope="row">Support</th>
                <td>3 months</td>
                <td>6 months</td>
                <td>12 months</td>
                <td>Custom</td>
              </tr>
              <tr>
                <th scope="row">Full source code</th>
                <td><i class="fas fa-check"></i></td>
                <td><i class="fas fa-check"></i></td>
                <td><i class="fas fa-check"></i></td>
                <td><i class="fas fa-check"></i></td>
              </tr>
              <tr>
                <th scope="row">SaaS / Subscription</th>
                <td><i class="fas fa-check"></i></td>
                <td><i class="fas fa-check"></i></td>
                <td><i class="fas fa-check"></i></td>
                <td><i class="fas fa-check"></i></td>
              </tr>
              <tr>
                <th scope="row">Intranet</th>
                <td></td>
                <td><i class="fas fa-check"></i></td>
                <td><i class="fas fa-check"></i></td>
                <td><i class="fas fa-check"></i></td>
              </tr>
              <tr>
                <th scope="row">Downloadable Software</th>
                <td></td>
                <td></td>
                <td><i class="fas fa-check"></i></td>
                <td><i class="fas fa-check"></i></td>
              </tr>
              <tr>
                <th scope="row">Redistribute</th>
                <td></td>
                <td></td>
                <td></td>
                <td><i class="fas fa-check"></i></td>
              </tr>
              <tr>
                <th scope="row">Custom code</th>
                <td></td>
                <td></td>
                <td></td>
                <td><i class="fas fa-check"></i></td>
              </tr>
            </tbody>
          </table>
        </div>
      </div>
    </div>
  </div>
</section>

Siteglide Design System

Slide 1

Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.

Button
Slide 2

Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.

Button
Slide 3

Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.

Button

{% if total_items > 0 %}
<section class="slider slider-01">
  <div class="container">
    <div class="glide-01 slide {% if uniq_slider_id %}glide-id-{{uniq_slider_id}}{% endif %}">
      <h2 class="text-center">Siteglide Design System</h2>
      <div class="row">
        <div class="col-12">
          <div class="glide">
            <div data-glide-el="controls[nav]">
              {% if _per_page > total_items %}
                {% assign slides = total_items | minus: 1 %} <!--minus 1 because forloops starts on 0-->
              {% else %}
                {% assign slides = _per_page | minus: 1 %}
              {% endif %}
              {% for slide in (0..slides) %}
                <button class="glide-link {% if forloop.first %}active{% endif %}" data-glide-dir="={{slide}}">{{slide | plus: 1}}</button>
                {% assign tabs = forloop.index | modulo: 12 %}
                {% if tabs == 0 %}
                  <br>
                {% endif %}  
              {% endfor %}
            </div>
          </div>
        </div>
      </div>
      <div class="glide__track" data-glide-el="track">
        <ul class="glide__slides">
          {%- include 'modules/siteglide_system/get/get_items', item_layout: 'item' -%}
        </ul>
      </div>
    </div>
  </div>
</section>
{% content_for 'siteglide_footer_scripts' %}
  <script src="https://cdnjs.cloudflare.com/ajax/libs/Glide.js/3.4.1/glide.min.js" integrity="sha512-BXASbMmKLu+RC5TDnkupyhvrjiOQXILh/5zgIS8k5JAC71a73lNweVEg/X+9XJQ7GK22PH9WpztY3zqrji+xrQ==" crossorigin="anonymous"></script>,,
{% endcontent_for %}
{% content_for 'siteglide_head_scripts' %}
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/Glide.js/3.4.1/css/glide.core.min.css" integrity="sha512-wYsVD8ho6rJOAo1Xf92gguhOGQ+aWgxuyKydjyEax4bnuEmHUt6VGwgpUqN8VlB4w50d0nt+ZL+3pgaFMAmdNQ==" crossorigin="anonymous" />,,
  <link rel="stylesheet" type="text/css" href="{{'css/modules/module_4/glide.css' | asset_url }}" />,,
  <link rel="stylesheet" type="text/css" href="{{'css/modules/module_4/layouts/default.css' | asset_url }}" />,,
{% endcontent_for %}
<script>

document.addEventListener('DOMContentLoaded', function() {
 var config = {
    perView: 1
  };
  function mount_slider(id) {
    if(id) {
      var glide_ref = '.glide-id-' + id
      new Glide(glide_ref,config).mount()
    } 
    else {
      new Glide('.glide-01',config).mount()
    }
  }
  mount_slider({{uniq_slider_id}})
});

</script>
{% endif %}

<li class="glide__slide">
  <div class="row">
    <div class="col-12 col-md-5">
      <img src="{{ this['Image'] | asset_url }}" alt="{ this['Image'] | asset_url }}"/>
    </div>
    <div class="col-12 col-md-6">
      <div class="slide-content">
        <h2>{{ this['Title'] }}</h2>
        <p>{{ this['Description'] }}.</p>
        <div class="button-container">
          <a class="btn btn-primary" href="{{this['Button Link']}}" title="">{{this['Button Name']}}</a>
        </div>
      </div>
    </div>
  </div>
</li>

Siteglide Design System

{% if total_items > 0 %}
<section class="slider slider-02">
  <div class="container">
    <div class="glide-02 slide {% if uniq_slider_id %}glide-id-{{uniq_slider_id}}{% endif %}">
      <h2 class="text-center">Siteglide Design System</h2>
      <div class="glide__track" data-glide-el="track">
        <ul class="glide__slides">
          {%- include 'modules/siteglide_system/get/get_items', item_layout: 'item' -%}
        </ul>
      </div>
      <div class="glide__arrows" data-glide-el="controls">
        <button class="glide__arrow glide__arrow--left" data-glide-dir="<"><i class="fa fa-2x fa-chevron-left" aria-hidden="true"></i></button>
        <button class="glide__arrow glide__arrow--right" data-glide-dir=">"><i class="fa fa-2x fa-chevron-right" aria-hidden="true"></i></button>
      </div>
      <div class="glide text-center">
        <div class="glide__bullets" data-glide-el="controls[nav]">
          {% if _per_page > total_items %}
              {% assign slides = total_items | minus: 1 %} <!--minus 1 because forloops starts on 0-->
            {% else %}
              {% assign slides = _per_page | minus: 1 %}
            {% endif %}
            {% for slide in (0..slides) %}
              <button class="glide-link {% if forloop.first %}active{% endif %}" data-glide-dir="={{slide}}"><i class="fas fa-circle"></i></button>
              {% assign tabs = forloop.index | modulo: 12 %}
              {% if tabs == 0 %}
                <br>
              {% endif %}  
            {% endfor %}
        </div>
      </div>
    </div>
  </div>
</section>
{% content_for 'siteglide_footer_scripts' %}
  <script src="https://cdnjs.cloudflare.com/ajax/libs/Glide.js/3.4.1/glide.min.js" integrity="sha512-BXASbMmKLu+RC5TDnkupyhvrjiOQXILh/5zgIS8k5JAC71a73lNweVEg/X+9XJQ7GK22PH9WpztY3zqrji+xrQ==" crossorigin="anonymous"></script>,,
{% endcontent_for %}
{% content_for 'siteglide_head_scripts' %}
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/Glide.js/3.4.1/css/glide.core.min.css" integrity="sha512-wYsVD8ho6rJOAo1Xf92gguhOGQ+aWgxuyKydjyEax4bnuEmHUt6VGwgpUqN8VlB4w50d0nt+ZL+3pgaFMAmdNQ==" crossorigin="anonymous" />,,
  <link rel="stylesheet" type="text/css" href="{{'css/modules/module_4/glide.css' | asset_url }}" />,,
{% endcontent_for %}
<script>

document.addEventListener('DOMContentLoaded', function() {
 var config = {
    type: 'carousel',
    perView: 1,
    peek: 270,
    focusAt: 0,
    breakpoints: {
	  	990: {peek: 0}
    },
    gap: 0
  };
  function mount_slider(id) {
    if(id) {
      var glide_ref = '.glide-id-' + id
      new Glide(glide_ref,config).mount()
    } 
    else {
      new Glide('.glide-02',config).mount()
    }
  }
  mount_slider({{uniq_slider_id}})
});

</script>
{% endif %}

 <li class="glide__slide">
    <img src="{{ this['Image'] | asset_url }}" alt="{ this['Image'] | asset_url }}"/>
  </li>

Slide 1

Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.
Button
Slide 2

Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.
Button
Slide 3

Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.
Button

{% if total_items > 0 %}
<section class="slider slider-03">
  <div class="container">
    <div class="glide-03 slide {% if uniq_slider_id %}glide-id-{{uniq_slider_id}}{% endif %}">
      <div class="glide__track" data-glide-el="track">
        <ul class="glide__slides">
          {%- include 'modules/siteglide_system/get/get_items', item_layout: 'item' -%}
        </ul>
      </div>
      <div class="glide text-center">
        <div class="glide__bullets" data-glide-el="controls[nav]">
          {% if _per_page > total_items %}
              {% assign slides = total_items | minus: 1 %} <!--minus 1 because forloops starts on 0-->
            {% else %}
              {% assign slides = _per_page | minus: 1 %}
            {% endif %}
            {% for slide in (0..slides) %}
              <button class="glide-link {% if forloop.first %}active{% endif %}" data-glide-dir="={{slide}}"><i class="fas fa-circle"></i></button>
              {% assign tabs = forloop.index | modulo: 12 %}
              {% if tabs == 0 %}
                <br>
              {% endif %}  
            {% endfor %}
        </div>
      </div>
    </div>
  </div>
</section>
{% content_for 'siteglide_footer_scripts' %}
  <script src="https://cdnjs.cloudflare.com/ajax/libs/Glide.js/3.4.1/glide.min.js" integrity="sha512-BXASbMmKLu+RC5TDnkupyhvrjiOQXILh/5zgIS8k5JAC71a73lNweVEg/X+9XJQ7GK22PH9WpztY3zqrji+xrQ==" crossorigin="anonymous"></script>,,
{% endcontent_for %}
{% content_for 'siteglide_head_scripts' %}
 <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/Glide.js/3.4.1/css/glide.core.min.css" integrity="sha512-wYsVD8ho6rJOAo1Xf92gguhOGQ+aWgxuyKydjyEax4bnuEmHUt6VGwgpUqN8VlB4w50d0nt+ZL+3pgaFMAmdNQ==" crossorigin="anonymous" />,,
  <link rel="stylesheet" type="text/css" href="{{'css/modules/module_4/glide.css' | asset_url }}" />,,
{% endcontent_for %}
<script>

document.addEventListener('DOMContentLoaded', function() {
 var config = {
    perView: 1
  };
  function mount_slider(id) {
    if(id) {
      var glide_ref = '.glide-id-' + id
      new Glide(glide_ref,config).mount()
    } 
    else {
      new Glide('.glide-03',config).mount()
    }
  }
  mount_slider({{uniq_slider_id}})
});

</script>
{% endif %}

<li class="glide__slide">
  <div class="row">
    <div class="col-12 col-md-6">
      <img src="{{ this['Image'] | asset_url }}" alt="{{ this['Image'] | asset_url }}"/>
    </div>
    <div class="col-12 col-md-5 offset-md-1">
      <div class="slide-content">
        {% if this['Title'] %}<h3>{{ this['Title'] }}</h3>{% endif %}
        {% if this['Description'] %}<p>{{ this['Description'] }}.</p>{% endif %}
        {% if this['Button Name'] %}<a class="btn btn-primary" href="{% if this['Button Link'] %}{{this['Button Link']}}{% endif %}" title="">{{this['Button Name']}}</a>{% endif %}
      </div>
    </div>
  </div>
</li>

Slide 1

Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book
Button
Slide 2

Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book
Button
Slide 3

Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book
Button

{% if total_items > 0 %}
<section class="slider slider-04">
  <div class="container">
    <div class="glide-04 slide {% if uniq_slider_id %}glide-id-{{uniq_slider_id}}{% endif %}">
      <div class="glide__track" data-glide-el="track">
          <ul class="glide__slides">
            {%- include 'modules/siteglide_system/get/get_items', item_layout: 'item' -%}
          </ul>
      </div>
      <!--CONTROLS-->
      <div class="glide__arrows" data-glide-el="controls">
        <button class="glide__arrow glide__arrow--left" data-glide-dir="<"><i class="fa fa-2x fa-chevron-left" aria-hidden="true"></i></button>
        <button class="glide__arrow glide__arrow--right" data-glide-dir=">"><i class="fa fa-2x fa-chevron-right" aria-hidden="true"></i></button>
      </div>
      <div class="glide text-center">
        <div class="glide__bullets" data-glide-el="controls[nav]">
          {% if _per_page > total_items %}
              {% assign slides = total_items | minus: 1 %} <!--minus 1 because forloops starts on 0-->
            {% else %}
              {% assign slides = _per_page | minus: 1 %}
            {% endif %}
            {% for slide in (0..slides) %}
              <button class="glide-link {% if forloop.first %}active{% endif %}" data-glide-dir="={{slide}}"><i class="fas fa-circle"></i></button>
              {% assign tabs = forloop.index | modulo: 12 %}
              {% if tabs == 0 %}
                <br>
              {% endif %}  
            {% endfor %}
        </div>
      </div>
    </div>
  </div>
</section>
{% content_for 'siteglide_footer_scripts' %}
  <script src="https://cdnjs.cloudflare.com/ajax/libs/Glide.js/3.4.1/glide.min.js" integrity="sha512-BXASbMmKLu+RC5TDnkupyhvrjiOQXILh/5zgIS8k5JAC71a73lNweVEg/X+9XJQ7GK22PH9WpztY3zqrji+xrQ==" crossorigin="anonymous"></script>,,
{% endcontent_for %}
{% content_for 'siteglide_head_scripts' %}
  <link rel="stylesheet" type="text/css" href="{{'css/modules/module_4/glide.css' | asset_url }}" />,,
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/Glide.js/3.4.1/css/glide.core.min.css" integrity="sha512-wYsVD8ho6rJOAo1Xf92gguhOGQ+aWgxuyKydjyEax4bnuEmHUt6VGwgpUqN8VlB4w50d0nt+ZL+3pgaFMAmdNQ==" crossorigin="anonymous" />,,   
{% endcontent_for %}
<script>

document.addEventListener('DOMContentLoaded', function() {
 var config = {
    perView: 1
  };
  function mount_slider(id) {
    if(id) {
      var glide_ref = '.glide-id-' + id
      new Glide(glide_ref,config).mount()
    } 
    else {
      new Glide('.glide-04',config).mount()
    }
  }
  mount_slider({{uniq_slider_id}})
});

</script>
{% endif %}

 <li class="glide__slide">
  <div class="row">
    <div class="col-12 col-md-6">
      <div class="slide-content">
        {% if this['Title'] %}<h3>{{ this['Title'] }}</h3>{% endif %}
        {% if this['Description'] %}<p>{{ this['Description'] }}.</p>{% endif %}
        {% if this['Button Name'] %}<a class="btn btn-primary" href="{% if this['Button Link'] %}{{this['Button Link']}}{% endif %}" title="">{{this['Button Name']}}</a>{% endif %}
      </div>
    </div>
    <div class="col-12 col-md-5 offset-md-1">
      <img src="{{ this['Image'] | asset_url }}" alt="{ this['Image'] | asset_url }}"/>
    </div>
  </div>
</li>

Siteglide Design System

Slide 1

Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book
Slide 2

Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book
Slide 3

Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book

{% if total_items > 0 %}
<section class="slider slider-05">
  <div class="container">
    <div class="glide-05 slide {% if uniq_slider_id %}glide-id-{{uniq_slider_id}}{% endif %}">
      <h2 class="text-center">Siteglide Design System</h2>
      <div class="glide__track" data-glide-el="track">
        <ul class="glide__slides">
         
          {%- include 'modules/siteglide_system/get/get_items', item_layout: 'item' -%}
        </ul>
      </div>
      <div class="glide__arrows" data-glide-el="controls">
        <button class="glide__arrow glide__arrow--left" data-glide-dir="<"><i class="fa fa-2x fa-chevron-left" aria-hidden="true"></i></button>
        <button class="glide__arrow glide__arrow--right" data-glide-dir=">"><i class="fa fa-2x fa-chevron-right" aria-hidden="true"></i></button>
      </div>
      <div class="glide text-center">
        <div class="glide__bullets" data-glide-el="controls[nav]">
          {% if _per_page > total_items %}
              {% assign slides = total_items | minus: 1 %} <!--minus 1 because forloops starts on 0-->
            {% else %}
              {% assign slides = _per_page | minus: 1 %}
            {% endif %}
            {% for slide in (0..slides) %}
              <button class="glide-link {% if forloop.first %}active{% endif %}" data-glide-dir="={{slide}}"><i class="fas fa-circle"></i></button>
              {% assign tabs = forloop.index | modulo: 12 %}
              {% if tabs == 0 %}
                <br>
              {% endif %}  
            {% endfor %}
        </div>
      </div>
    </div>
  </div>
</section>
{% content_for 'siteglide_footer_scripts' %}
  <script src="https://cdnjs.cloudflare.com/ajax/libs/Glide.js/3.4.1/glide.min.js" integrity="sha512-BXASbMmKLu+RC5TDnkupyhvrjiOQXILh/5zgIS8k5JAC71a73lNweVEg/X+9XJQ7GK22PH9WpztY3zqrji+xrQ==" crossorigin="anonymous"></script>,,
{% endcontent_for %}
{% content_for 'siteglide_head_scripts' %}
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/Glide.js/3.4.1/css/glide.core.min.css" integrity="sha512-wYsVD8ho6rJOAo1Xf92gguhOGQ+aWgxuyKydjyEax4bnuEmHUt6VGwgpUqN8VlB4w50d0nt+ZL+3pgaFMAmdNQ==" crossorigin="anonymous" />,,
  <link rel="stylesheet" type="text/css" href="{{'css/modules/module_4/glide.css' | asset_url }}" />,,  
{% endcontent_for %}
<script>

document.addEventListener('DOMContentLoaded', function() {
 var config = {
    type: 'carousel',
    perView: '3',
    gap: '15',
    breakpoints: {
	  	800: {perView: 2},
		  500: {perView: 1}
    }
  };
  function mount_slider(id) {
    if(id) {
      var glide_ref = '.glide-id-' + id
      new Glide(glide_ref,config).mount()
    } 
    else {
      new Glide('.glide-05',config).mount()
    }
  }
  mount_slider({{uniq_slider_id}})
});

</script>
{% endif %}

<li class="glide__slide">
  <img src="{{ this['Image'] | asset_url }}" alt="{ this['Image'] | asset_url }}"/>
  <div class="slide-content">
    {% if this['Title'] %}<h3>{{ this['Title'] }}</h3>{% endif %}
    {% if this['Description'] %}<p>{{ this['Description'] }}.</p>{% endif %}
  </div>
</li>

Meet the experts

Sarah Doe

Founder

David Anderson

Programmer

Jennifer Clarke

Web Designer

<section class="team team-02">
  <div class="container text-center">
    <div class="row">
      <div class="col-12">
        <h2>Meet the experts</h2>
      </div>
    </div>
    <div class="card-deck">
      <div class="card">
        <div class="card-img background-image" style="background-image: url('{{ 'images/content/design-system-placeholder.svg' | asset_url }}')"></div>
        <div class="card-body">
          <h3>Sarah Doe</h3>
          <p>Founder</p>
        </div>
      </div>
      <div class="card">
        <div class="card-img background-image" style="background-image: url('{{ 'images/content/design-system-placeholder.svg' | asset_url }}')"></div>
        <div class="card-body">
          <h3>David Anderson</h3>
          <p>Programmer</p>
        </div>
      </div>
      <div class="card">
        <div class="card-img background-image" style="background-image: url('{{ 'images/content/design-system-placeholder.svg' | asset_url }}')"></div>
        <div class="card-body">
          <h3>Jennifer Clarke</h3>
          <p>Web Designer</p>
        </div>
      </div>
    </div>
  </div>
</section>

Team

Cody Fleming

Founder

Description

Description line 2

Richard Newman

Founder

Description

Description line 2

Ola Synder

Founder

Description

Description line 2

<section class="team team-03">
  <div class="container text-center">
    <h2>Team</h2>
    <div class="card-deck">
      <div class="card">
        <div class="card-img background-image" style="background-image: url('{{ 'images/content/design-system-placeholder.svg' | asset_url }}')"></div>
        <div class="card-body">
          <h3>Cody Fleming</h3>
          <p>Founder</p>
          <p>Description</p>
          <p>Description line 2</p>           
        </div>
      </div>
      <div class="card">
        <div class="card-img background-image" style="background-image: url('{{ 'images/content/design-system-placeholder.svg' | asset_url }}')"></div>
        <div class="card-body">
          <h3>Richard Newman</h3>
          <p>Founder</p>
          <p>Description</p>
          <p>Description line 2</p>           
        </div>
      </div>
      <div class="card">
        <div class="card-img background-image" style="background-image: url('{{ 'images/content/design-system-placeholder.svg' | asset_url }}')"></div>
        <div class="card-body">
          <h3>Ola Synder</h3>
          <p>Founder</p>
          <p>Description</p>
          <p>Description line 2</p>           
        </div>
      </div>
    </div>
  </div>
</section>

Team

Ricardo Newman

Editor

Dale Vaughn

Assitant Manager

Mario Mullins

Staff Accountant

Ola Synder

Senior Editor

Dominic Mendez

Staff Account

Harper Morgan

Editor

Rhoda Brooks

Senior Editor

Cody Fleming

Staff Accountant

Melinda Grant

General Manager

<section class="team team-04">
  <div class="container">
    <h2 class="text-center">Team</h2>
    <div class="row">
      <div class="col-12 col-md-4">
        <img class="icon" src="{{ 'images/content/design-system-placeholder.svg' | asset_url }}" alt="" />
        <div class="content">
          <h3>Ricardo Newman</h3>
          <p>Editor</p>
        </div>
      </div>
      <div class="col-12 col-md-4">
        <img class="icon" src="{{ 'images/content/design-system-placeholder.svg' | asset_url }}" alt="" />
        <div class="content">
          <h3>Dale Vaughn</h3>
          <p>Assitant Manager</p>
        </div>
      </div>
      <div class="col-12 col-md-4">
        <img class="icon" src="{{ 'images/content/design-system-placeholder.svg' | asset_url }}" alt="" />
        <div class="content">
          <h3>Mario Mullins</h3>
          <p>Staff Accountant</p>
        </div>
      </div>
    </div>
    <div class="row">
      <div class="col-12 col-md-4">
        <img class="icon" src="{{ 'images/content/design-system-placeholder.svg' | asset_url }}"/>
        <div class="content">
          <h3>Ola Synder</h3>
          <p>Senior Editor</p>
        </div>
      </div>
      <div class="col-12 col-md-4">
        <img class="icon" src="{{ 'images/content/design-system-placeholder.svg' | asset_url }}"/>
        <div class="content">
          <h3>Dominic Mendez</h3>
          <p>Staff Account</p>
        </div>
      </div>
      <div class="col-12 col-md-4">
        <img class="icon" src="{{ 'images/content/design-system-placeholder.svg' | asset_url }}"/>
        <div class="content">
          <h3>Harper Morgan</h3>
          <p>Editor</p>
        </div>
      </div>
    </div>
    <div class="row">
      <div class="col-12 col-md-4">
        <img class="icon" src="{{ 'images/content/design-system-placeholder.svg' | asset_url }}"/>
        <div class="content">
          <h3>Rhoda Brooks</h3>
          <p>Senior Editor</p>
        </div>
      </div>
      <div class="col-12 col-md-4">
        <img class="icon" src="{{ 'images/content/design-system-placeholder.svg' | asset_url }}"/>
        <div class="content">
          <h3>Cody Fleming</h3>
          <p>Staff Accountant</p>
        </div>
      </div>
      <div class="col-12 col-md-4">
        <img class="icon" src="{{ 'images/content/design-system-placeholder.svg' | asset_url }}"/>
        <div class="content">
          <h3>Melinda Grant</h3>
          <p>General Manager</p>
        </div>
      </div>
    </div>
  </div>
</section>

Our Amazing Team

A small river named Duden flows by their place and supplies it with the necessary regelialia. It is a paradisematic country, in which roasted parts of sentences fly.

Jeffery Leonard

Assistant Manager

Far far away, behind the word mountains, far from the countries Vokalia and Consonantia, there live the blind texts.

Rhoda Brooks

Senior Editor

Far far away, behind the word mountains, far from the countries Vokalia and Consonantia, there live the blind texts.

Ola Snyder

Senior Editor

Far far away, behind the word mountains, far from the countries Vokalia and Consonantia, there live the blind texts.

Annie Carson

Editor

Far far away, behind the word mountains, far from the countries Vokalia and Consonantia, there live the blind texts.

<section class="team team-05">
  <div class="container">
    <div class="row text-center">
      <div class="col-12 col-lg-8 offset-lg-2">
        <h2>Our Amazing Team</h2>
        <p>A small river named Duden flows by their place and supplies it with the necessary regelialia. It is a paradisematic country, in which roasted parts of sentences fly.</p>
      </div>
    </div>
    <div class="row">
      <div class="col-12 col-lg-6">
        <img src="{{ 'images/icons/placeholder-feature.svg' | asset_url }}" alt="" />
        <div class="content">
          <h3>Jeffery Leonard</h3>
          <p>Assistant Manager</p>
          <p>Far far away, behind the word mountains, far from the countries Vokalia and Consonantia, there live the blind texts.</p>
        </div>
      </div>
      <div class="col-12 col-lg-6">
        <img src="{{ 'images/icons/placeholder-feature.svg' | asset_url }}" alt="" />
        <div class="content">
          <h3>Rhoda Brooks</h3>
          <p>Senior Editor</p>
          <p>Far far away, behind the word mountains, far from the countries Vokalia and Consonantia, there live the blind texts.</p>
        </div>
      </div>  
    </div>
    <div class="row">
      <div class="col-12 col-lg-6">
        <img src="{{ 'images/icons/placeholder-feature.svg' | asset_url }}" alt="" />
        <div class="content">
          <h3>Ola Snyder</h3>
          <p>Senior Editor</p>
          <p>Far far away, behind the word mountains, far from the countries Vokalia and Consonantia, there live the blind texts.</p>
        </div>
      </div> 
      <div class="col-12 col-lg-6">
        <img src="{{ 'images/icons/placeholder-feature.svg' | asset_url }}" alt="" />
        <div class="content">
          <h3>Annie Carson</h3>
          <p>Editor</p>
          <p>Far far away, behind the word mountains, far from the countries Vokalia and Consonantia, there live the blind texts.</p>
        </div>
      </div>
    </div>
  </div> 
</section>

Far far away, behind the word mountains, far from the countries Vokalia and Consonantia, there live the blind texts. Separated they live in Bookmarksgrove right at the coast of the Semantics, a large language ocean.

Ola SnyderEditor at Company

<section class="testimonial testimonial-01">
  <div class="container">
    <div class="row align-items-center">
      <div class="col-12 col-md-7">
        <q>Far far away, behind the word mountains, far from the countries Vokalia and Consonantia, there live the blind texts. Separated they live in Bookmarksgrove right at the coast of the Semantics, a large language ocean.</q>
        <p><strong>Ola Snyder</strong>Editor at Company</p>
      </div>
      <div class="col-12 col-md-3 offset-md-2">
        <img src="{{ 'images/content/design-system-placeholder.svg' | asset_url }}" alt="">
      </div>
    </div>
  </div>
</section>

Cookie Policy

<section class="title title-01 bg-dark background-image" style="background-image: url('{{ 'images/content/design-system-placeholder.svg' | asset_url }}')">
  <div class="container">
    <div class="row">
      <div class="col-12 col-sm-6">
        <h1>Cookie Policy</h1>
      </div>
    </div>
  </div>
</section>

Welcome to the website

Far far away, behind the word mountains, far from the countries Vokalia and Consonantia, there live the blind texts. Separated they live in Bookmarksgrove right at the coast of the Semantics, a large language ocean. A small river named Duden flows by their place far far away.

<section class="title title-02">
  <div class="container">
    <div class="row">
      <div class="col-12 text-center">
        <h1>Welcome to the website</h1>
        <p>Far far away, behind the word mountains, far from the countries Vokalia and Consonantia, there live the blind texts. Separated they live in Bookmarksgrove right at the coast of the Semantics, a large language ocean. A small river named Duden flows by their place far far away.</p>
      </div>
    </div>
  </div>
</section>

We have an infinite amount to learn both from nature and from each other

Reusable Elements

Free Google Fonts

Responsive Symbols

blog-02

Jusendisse accumsan turpis

Jusendisse accumsan turpis

Jusendisse accumsan turpis

Categories

Archives

Tags

blog-10

calendar-01

Siteglide Design System is built on the Bootstrap 4 Framework

call-to-action-16

Contact Us

contact-01

Contact Us

Call or email

Support

Sales

General Inquiries

Drop us a line

contact-08

support@website.com

contact-09

Flying High

content-01

Siteglide Design System

content-02

Siteglide Design System

content-03

Siteglide Design System

content-04

Design System

content-05

Design System

content-06

Siteglide Design System is Open Source and free to use

content-07

content-08

Siteglide Design System is Open Source and free to use

content-09

Awesome Things

More Awesomeness

content-10

Siteglide Design System

content-11

Siteglide Design System

content-12

Siteglide Design Systems

content-13

Siteglide Design System is Open Source and free to use

content-14

Design System

content-15

Siteglide Design System is Open Source and free to use

content-16

Siteglide Design System is Open Source and free to use

content-17

Design System

content-19

content-20

Your website

Amazing design

content-21

Siteglide Design System

content-22

Design System

content-23

Siteglide Design System

content-24

Siteglide Design System

Open Source

Bootstrap

content-25

Design System

Design System

content-27

Cart