- var page_Title = 'RTL';
- var prism                 = true;
- var clipboard             = true;
- var customcard            = true;
- var theme_customizer      = true;
- var sidebar               = true;
- var slick                 = true;
- var header_slider         = true;
- var scrollbar             = true;

doctype html
html(lang='en', dir='rtl')
  include ../../components/header-files
  body.rtl
    include ../../components/taptop
    // page-wrapper Start
    #pageWrapper.page-wrapper.compact-wrapper
      include ../../components/header
      // Page Body Start
      .page-body-wrapper
        include ../../components/sidebar
        .page-body
          .container.w-full
            .page-title
              .grid.grid-cols-12.mx-2.items-center
                div(class="col-span-6 sm:col-span-12")
                  h3
                    | RTL Layout
                div(class="col-span-6 sm:col-span-12")
                  ol.breadcrumb.flex
                    li.breadcrumb-item
                      a(href='index.html')                                        
                        svg.stroke-icon
                          use(href='../assets/svg/icon-sprite.svg#stroke-home')
                    li.breadcrumb-item Page Layout
                    li.breadcrumb-item.active  RTL Layout
          // Container-fluid starts
          .container
            .grid.grid-cols-12.card-gap
              div(class="col-span-12")
                  .card.alert.bg-primary(role='alert')
                    h5.text-white Tip!
                    p.txt-light Add the dir="rtl" to the html tag to get this layout.
              div(class="col-span-12")
                .card
                  .card-header
                    h5 How to use it?
                    .card-header-right
                      ul.list-unstyled.card-option
                        li
                          i.fa-solid.fa-gear.fa-spin
                        li
                          i.view-html.fa-solid.fa-code
                        li
                          i.icofont.icofont-maximize.full-card
                        li
                          i.icofont.icofont-minus.minimize-card
                        li
                          i.icofont.icofont-refresh.reload-card
                        li
                          i.icofont.icofont-error.close-card
                  .card-body
                    h5 Step 1
                    p On this layout, First of all you have to add the class rtl attribute in body tag
                    h5 Step 2
                    p Contents are change right to left from left to right respectively
                    h5 Step 3
                    p
                      | when you want to change spacing left to right at that right left spacing you have to unset css and apply right spacing in css
                    h5 Step 4
                    p
                      | Sometimes js are not change directly with text-align css,so that time you have to copy js and change the class as rtl="true".
                    .code-box-copy
                      button.code-box-copy__btn.btn-clipboard(data-clipboard-target='#example-head', title='Copy')
                        i.icofont.icofont-copy-alt
                      pre
                        code.language-html#example-head
                          | &lt;!-- Cod Box Copy begin --&gt;
                          | &lt;div class=&quot;card-body&quot;&gt;
                          | &lt;h5&gt;Step 1&lt;/h5&gt;
                          | &lt;p&gt;On this layout, First of all you have to add the class rtl in body tag&lt;/p&gt;
                          | &lt;h5&gt;Step 2&lt;/h5&gt;
                          | &lt;p&gt;Contents are change right to left from left to right respectively&lt;/p&gt;
                          | &lt;h5&gt;Step 3&lt;/h5&gt;
                          | &lt;p&gt;when you want to change spacing left to right at that right left spacing you have to unset css and apply right spacing in css&lt;/p&gt;
                          | &lt;h5&gt;Step 4&lt;/h5&gt;
                          | &lt;p&gt;Sometimes js are not change directly with text-align css,so that time you have to copy js and change the class as rtl="true".&lt;/p&gt;
                          | &lt;/div&gt;
                          | &lt;!-- Cod Box Copy end --&gt;
                  .card-footer
                    h6.mb-0 Card Footer
          // Container-fluid Ends
        include ../../components/footer
    include ../../components/footer-files
