- var page_Title = 'Draggable Card';
- var theme_customizer      = true;
- var header_slider         = true;
- var slick                 = true;
- var sidebar               = true;
- var draggable             = true;
- var sortable              = true;
- var scrollbar             = true;
- var height_equal          = true;
doctype html
html(lang='en')
  include ../../components/header-files
  body
    include ../../components/loader
    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
                    | Draggable Card
                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 Bonus Ui
                    li.breadcrumb-item.active Draggable Card
          // Container-fluid starts
          .container 
            .grid.grid-cols-12.card-gap#draggable
              div(class="col-span-4 xxl:col-span-6 md:col-span-12")
                .card.list-with-icon
                  .card-header
                    h5 Basic Card
                    p.mt-1.f-m-light
                        | You can draggable cards anywhere.
                  .card-body
                    ul.list-group
                      li.list-group-item 
                        i.icofont.icofont-arrow-right
                        | Logo Design
                      li.list-group-item 
                        i.icofont.icofont-arrow-right
                        | Web Designer 
                      li.list-group-item 
                        i.icofont.icofont-arrow-right
                        | E-Commerce
                      li.list-group-item 
                        i.icofont.icofont-arrow-right
                        | UX Designer
              div(class="col-span-4 xxl:col-span-6 md:col-span-12")
                .card
                  .card-header
                    h5 Default Card
                    p.mt-1.f-m-light
                        | You can draggable cards anywhere.
                  .card-body
                    ul.list-group
                      li.list-group-item.active.bg-warning-light.text-white(aria-current='true')
                        i.icofont.icofont-arrow-right 
                        | UI Kits
                      li.list-group-item
                        i.icofont.icofont-arrow-right 
                        | Wow Animations
                      li.list-group-item 
                        i.icofont.icofont-arrow-right 
                        |Apex Charts
                      li.list-group-item
                        i.icofont.icofont-arrow-right 
                        | Starter Kits
              div(class="col-span-4 xxl:col-span-6 md:col-span-12")
                .card.rounded-none.list-with-icon
                  .card-header
                    h5 Flat Card
                    p.f-m-light.mt-1
                      | You can draggable cards anywhere.
                  .card-body
                    ul.list-group.list-group-flush
                      li.list-group-item
                        i.icofont.icofont-chart-histogram-alt
                        | Charts
                      li.list-group-item
                        i.icofont.icofont-warning
                        | Alerts
                      li.list-group-item
                        i.icofont.icofont-cart
                        | Cart
                      li.list-group-item
                        i.icofont.icofont-checked
                        | Checkout
              div(class="col-span-4 xxl:col-span-6 md:col-span-12")
                .card
                  .card-header.bg-info
                    h5.text-white Info Color Header
                  .card-body
                    h6.pb-2  Web Designer 
                    p.mb-0.c-light
                      | By following instructions and adding your own unique twist and style, you may apply your imagination as a web designer. The majority of the tasks you'll be assigned will have a specific due date and work description, but the reason you were employed was because they need a specialist to inject some much-needed creativity.
                  .card-footer
                    h6.mb-0.text-end Cuba Theme
              div(class="col-span-4 xxl:col-span-6 md:col-span-12")
                .card
                  .card-header
                    h5 Info Color Body
                  .card-body.bg-info
                    h6.pb-2.text-white UX Designer 
                    p.mb-0.text-white
                      | It is the responsibility of the UX designer to make a product or service useful, pleasurable, and accessible. The word "user experience" is used by various industries, although it is most frequently related to digital design for websites and mobile applications.There is no need for coding in user experience design.
                  .card-footer
                    h6.mb-0.text-end Cuba Theme
              div(class="col-span-4 xxl:col-span-6 md:col-span-12")
                .card
                  .card-header
                    h5 Info Color Footer
                  .card-body
                    h6.pb-2 Web Developer
                    p.mb-0.c-light
                      | A programmer who uses the client-server architecture to create World Wide Web applications is known as a web developer. The apps generally employ any general-purpose programming language on the server and HTML, CSS, and javaScript on the client.
                  .card-footer.bg-info
                    h6.mb-0.text-end.text-white Cuba Theme
          // Container-fluid Ends 
        include ../../components/footer 
    include ../../components/footer-files
