{% extends "layout/layout-docs.html" %} {% set page_title = "Layouts & Theme" %}
{% block content %}

<main class="app-wrapper">
  {% include "../templates/layout/header-footer/doc-appheader.html" %} {%
  include "../templates/layout/header-footer/doc-sidebar.html" %} {% include
  "../templates/layout/header-footer/doc-topnav.html" %}

  <div class="content-wrapper">
    <div class="page-content">
      <div class="container-fluid">
        <div class="row">
          <div class="col-12 rt-mb-25">
            {% include "../templates/components/breadcrumbs/doc-brd.html" %}
          </div>
        </div>

        <div class="docu">
          <div class="docu-section">
            <div class="docu-card">
              <div class="mb-3">
                <h2 class="docu-title">Layouts</h2>
              </div>
              <div class="row">
                <div class="col-md-6">
                  <div class="layouts">
                    <div class="layouts__img-wrapper">
                      <img
                        src="../assets/images/all-img/verticle.png"
                        alt="layout-img"
                        class="img-fluid"
                      />
                    </div>
                    <div class="layouts__text-content">
                      <h2>Verticle Sidebar</h2>
                      <p>
                        By Default if You want to set verticle sidebar , you
                        have to add attribute
                        <span> ( data-layout ) </span> inside html. attributes
                        value would be verticle, means
                        <span>data-layout="verticle"</span>. That's it
                      </p>
                    </div>
                  </div>
                </div>
                <div class="col-md-6">
                  <div class="layouts">
                    <div class="layouts__img-wrapper">
                      <img
                        src="../assets/images/all-img/horizontal.png"
                        alt="layout-img"
                        class="img-fluid"
                      />
                    </div>
                    <div class="layouts__text-content">
                      <h2>Horizontal Sidebar</h2>
                      <p>
                        By Default if You want to set verticle sidebar , you
                        have to add attribute
                        <span> ( data-layout ) </span> inside html. attributes
                        value would be verticle, means
                        <span>data-layout="horizontal"</span>. That's it
                      </p>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
          <div class="docu-section" id="theme">
            <div class="docu-card">
              <div class="mb-4">
                <h2 class="docu-title">Themes</h2>
              </div>
              <div class="row">
                <div class="col-md-6">
                  <div class="layouts">
                    <div class="layouts__img-wrapper">
                      <img
                        src="../assets/images/all-img/default.png"
                        alt="layout-img"
                        class="img-fluid"
                      />
                    </div>
                    <div class="layouts__text-content">
                      <h2>Defaul Theme</h2>
                      <p>
                        By default you will get this theme. So you have not to
                        do anything. if you didn't like default theme then you
                        can checkout other's. because Raple will give you ton's
                        of good options, that's will help you to decide.
                      </p>
                    </div>
                  </div>
                </div>
                <div class="col-md-6">
                  <div class="layouts">
                    <div class="layouts__img-wrapper">
                      <img
                        src="../assets/images/all-img/dark.png"
                        alt="layout-img"
                        class="img-fluid"
                      />
                    </div>
                    <div class="layouts__text-content">
                      <h2>Dark Theme</h2>
                      <p>
                        By Default if You want to use Dark Theme, you have to do
                        something with your html file . Go on html file and add
                        bellow attribute to your html tag.
                        <span>data-sidebar="black"</span>
                      </p>
                    </div>
                  </div>
                </div>
                <div class="col-md-6">
                  <div class="layouts">
                    <div class="layouts__img-wrapper">
                      <img
                        src="../assets/images/all-img/navy.png"
                        alt="layout-img"
                        class="img-fluid"
                      />
                    </div>
                    <div class="layouts__text-content">
                      <h2>Navy Theme</h2>
                      <p>
                        By Default if You want to use Dark Theme, you have to do
                        something with your html file . Go on html file and add
                        bellow attribute to your html tag.
                        <span>data-sidebar="blue"</span>
                      </p>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</main>

{% endblock %}
