- var page_Title = 'Ribbons';
- var theme_customizer      = true;
- var sidebar               = true;
- var slick                 = true;
- var header_slider         = true;
- var animate               = 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
                    | Ribbons
                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 Ribbons
          // Container-fluid starts
          .container
            // ribbon left (default) side
            .grid.grid-cols-12.gap-4
              div(class="col-span-12")
                .card
                  .card-header
                    h5 Variations Of Left Ribbons
                    p.f-m-light.mt-1
                      | Use class of 
                      code ribbon-*
                      | [ribbon-space-bottom/ribbon-clip/ribbon-vertical-left/ribbon-bookmark/ribbon-clip-bottom/ribbon-vertical-left] through create ribbons and all ribbon colors are available.
                      code [ribbon-*] 
                  .card-body
                    .grid.grid-cols-12.gap-4
                      div(class="col-span-4 xl:col-span-6 sm:col-span-12")
                        .ribbon-wrapper.border.border-1.alert-light-light
                          .ribbon.ribbon-primary.ribbon-space-bottom SAVE 10%
                          p
                            | Ribbon designs use the class of 
                            b ribbon-space-bottom
                            |  through create top-start ribbon and common class use "ribbon".
                      div(class="col-span-4 xl:col-span-6 sm:col-span-12")
                        .ribbon-wrapper.border.border-1
                          .ribbon.ribbon-secondary.ribbon-clip SAVE 50%
                          p
                            | Ribbon designs use the class of 
                            b ribbon-clip
                            |  through create top-start ribbon and common class use "ribbon".
                      div(class="col-span-4 xl:col-span-6 sm:col-span-12")
                        .ribbon-vertical-left-wrapper.border.border-1.vertical-lp-space.alert-light-light
                          .ribbon.ribbon-warning.ribbon-vertical-left
                            i.icofont.icofont-love
                          p
                            | Ribbon designs use the class of 
                            b ribbon-vertical-left
                            |  through create top-start ribbon and common class use "ribbon".
                      div(class="col-span-4 xl:col-span-6 sm:col-span-12")
                        .ribbon-wrapper.border.border-1
                          .ribbon.ribbon-info.ribbon-bookmark Cashback 20%
                          p
                            | Ribbon designs use the class of 
                            b ribbon-bookmark
                            |  through create top-start ribbon and common class use "ribbon".
                      div(class="col-span-4 xl:col-span-6 sm:col-span-12")
                        .ribbon-wrapper-bottom.border.border-1.clip-bp-space.alert-light-light
                          .ribbon.ribbon-dark.ribbon-clip-bottom 40% OFF
                          p
                            | Ribbon designs use the class of 
                            b ribbon-clip-bottom
                            |  through create bottom-start ribbon and common class use "ribbon".
                      div(class="col-span-4 xl:col-span-6 sm:col-span-12")
                        .ribbon-vertical-left-wrapper.border.border-1.vertical-lp-space
                          .ribbon.ribbon-bookmark.ribbon-vertical-left.ribbon-danger
                            i.icon-gift
                          p
                            | Ribbon designs use the class of 
                            b ribbon-vertical-left
                            |  through create top-start ribbon and common class use "ribbon".
            // ribbon right side(default)
            .grid.grid-cols-12.gap-4
              div(class="col-span-12")
                .card
                  .card-header
                    h5 Variations Of Right Ribbons
                    p.f-m-light.mt-1
                      | Use class of 
                      code ribbon-*
                      | [ribbon-right/ribbon-clip-right/ribbon-vertical-right/ribbon-bookmark/ribbon-clip-bottom-right/ribbon-vertical-right] through create ribbons and all ribbon colors are available.
                      code [ribbon-*]
                  .card-body
                    .grid.grid-cols-12.gap-4
                      div(class="col-span-4 xl:col-span-6 sm:col-span-12")
                        .ribbon-wrapper.border.border-1
                          .ribbon.ribbon-dark.ribbon-right 50% OFF
                          p
                            | Ribbon designs use the class of 
                            b ribbon-right
                            |  through create top-end ribbon and common class use "ribbon".
                      div(class="col-span-4 xl:col-span-6 sm:col-span-12")
                        .ribbon-wrapper-right.border.border-1.alert-light-light
                          .ribbon.ribbon-primary.ribbon-clip-right.ribbon-right SAVE 50%
                          p
                            | Ribbon designs use the class of 
                            b ribbon-right & ribbon-clip-right
                            |  through create top-end ribbon and common class use "ribbon".
                      div(class="col-span-4 xl:col-span-6 sm:col-span-12")
                        .ribbon-vertical-right-wrapper.border.border-1.vertical-rp-space
                          .ribbon.ribbon-bookmark.ribbon-vertical-right.ribbon-secondary
                            i.icon-signal
                          p
                            | Ribbon designs use the class of 
                            b ribbon-vertical-right & ribbon-bookmark
                            |  through create top-end ribbon and common class use "ribbon".
                      div(class="col-span-4 xl:col-span-6 sm:col-span-12")
                        .ribbon-wrapper.border.border-1.alert-light-light
                          .ribbon.ribbon-warning.ribbon-bookmark.ribbon-right SAVE 20%
                          p
                            | Ribbon designs use the class of 
                            b ribbon-right & ribbon-bookmark
                            |  through create top-end ribbon and common class use "ribbon".
                      div(class="col-span-4 xl:col-span-6 sm:col-span-12")
                        .ribbon-wrapper-bottom.border.border-1.clip-bp-space
                          .ribbon.ribbon-success.ribbon-clip-bottom-right Cashback 10%
                          p
                            | Ribbon designs use the class of 
                            b ribbon-clip-bottom-right
                            |  through create bottom-end ribbon and common class use "ribbon".
                      div(class="col-span-4 xl:col-span-6 sm:col-span-12")
                        .ribbon-vertical-right-wrapper.border.border-1.vertical-rp-space.alert-light-light
                          .ribbon.ribbon-danger.ribbon-vertical-right
                            i.fa.fa-taxi
                          p
                            | Ribbon designs use the class of 
                            b ribbon-vertical-right
                            |  through create top-end ribbon and common class use "ribbon".
            //- Animation ribbons
            .grid.grid-cols-12.gap-4
              div(class="col-span-12")
                .card
                  .card-header
                    h5 Animated Ribbons
                    p.f-m-light.mt-1
                      | Use class of 
                      code [smooth-animate / vertical-left-animate ] 
                      | through create ribbons and all ribbon animations are available.
                  .card-body
                    .grid.grid-cols-12.gap-4
                      div(class="col-span-4 lg:col-span-6 sm:col-span-12")
                        .vertical-ribbon-animate
                          .ribbon-vertical-right-wrapper.border.border-1.vertical-rp-space
                            .ribbon.ribbon-vertical-right.ribbon-secondary.ribbon-bottom-arrow
                                span 10% OFF
                            p
                              | Ribbon designs use the class of 
                              b ribbon-vertical-right-wrapper & ribbon-bottom-arrow
                              |  through create top-start ribbon and common class use "ribbon".
                      div(class="col-span-4 lg:col-span-6 sm:col-span-12")
                        .animated-ribbon.ribbon-wrapper.smooth-animate.border.border-1.alert-light-light
                          p.mb-0
                            | Ribbon designs use the class of 
                            b animated-ribbon & smooth-animate
                            |  through create bottom-end ribbon and common class use "ribbon".
                          .box
                            .ribbon
                              i.back
                              i.front
                                span Upcoming
                          .box-svg
                            svg#ribbon.ribbon-svg(width='300' height='60')
                      div(class="col-span-4 lg:col-span-6 sm:col-span-12")
                        .ribbon-wrapper.smooth-animate.border.border-1
                          p
                            | Ribbon designs use the class of 
                            b smooth-animate
                            |  through create top-start ribbon and common class use "ribbon".
                          a.media-image(href='#!')
                            span.label.label-new
                              | Hot
                      div(class="col-span-4 lg:col-span-6 sm:col-span-12")
                        .vertical-left-animate
                          .ribbon-wrapper.border.border-1.alert-light-light
                            .ribbon.ribbon-success.ribbon-bookmark 
                              span Latest
                              i.fa.fa-bolt
                            p
                              | Ribbon designs use the class of 
                              b ribbon-bookmark & vertical-left-animate
                              |  through create top-start ribbon and common class use "ribbon".
                      div(class="col-span-4 lg:col-span-6 sm:col-span-12")
                        .triangular-ribbon
                          .ribbon-wrapper.border.border-1
                            .ribbon.triangular-ribbon-box
                              div
                                svg 
                                  use(href='../assets/svg/icon-sprite.svg#pricing')
                            p
                              | Ribbon designs use the class of 
                              b triangular-ribbon-box
                              |  through create top-start ribbon and common class use "ribbon".
                      div(class="col-span-4 lg:col-span-6 sm:col-span-12")
                        .vertical-ribbon-animate.relative
                          .ribbon-vertical-right-wrapper.border.border-1.vertical-rp-space.alert-light-light
                            .ribbon.ribbon-bookmark.ribbon-vertical-right.ribbon-warning
                              div
                                i.fa.fa-bolt
                                span FlashSale
                            p
                              | Ribbon designs use the class of 
                              b ribbon-vertical-right & ribbon-bookmark
                              |  through create top-end ribbon and common class use "ribbon".
                      
          // Container-fluid Ends
        include ../../components/footer
    include ../../components/footer-files
