- var page_Title = 'Basic Card';
- var prism                 = true;
- var clipboard             = true;
- var customcard            = true;
- var height_equal          = true;
- var theme_customizer      = true;
- var sidebar               = true;
- var slick                 = true;
- var header_slider         = true;
- var scrollbar             = 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
                    | Basic 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 Basic Card
          // Container-fluid starts
          .container
            .grid.grid-cols-12.card-gap
              div(class="col-span-6 xl:col-span-12")
                .card
                  .card-header
                    h5 Basic Card
                    p.f-m-light.mt-1
                      | This is a simple basic card using anywhere.
                    .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
                    p.mb-0
                      | Tabs have long been used to show alternative views of the same group of information tabs in software. Known as
                      b “module tabs”
                      |  , these are still used today in web sites. For instance, airline companies such as Ryanair, easyJet and AirMalta use module tabs to enable the user to switch between bookings for flights, hotels and car hire.
                    .code-box-copy 
                      button.code-box-copy__btn.btn-clipboard(data-clipboard-target='#example-head', title='Copy')
                        i.icofont.icofont-copy-alt
                      pre.custom-scrollbar
                        code.language-html#example-head
                          |&lt;div class="card-body"&gt;
                          |  &lt;p class="mb-0"&gt;Tabs have long been used to show alternative views of the same group of information tabs in software. Known as&lt;b&gt;“module tabs”&lt;/b&gt; , these are still used today in web sites. For instance, airline companies such as Ryanair, easyJet and AirMalta use module tabs to enable the user to switch between bookings for flights, hotels and car hire.&lt;/p&gt;
                          |&lt;/div&gt;
              div(class="col-span-6 xl:col-span-12")
                .card(class="!rounded-none")
                  .card-header
                    h5 Flat Card
                    p.f-m-light.mt-1
                      | For flat cards, make the
                      code  rounded-none
                      |  used class.
                    .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
                    p.mb-0
                      | A navigation bar is a particularly important feature because it allows visitors to quickly and easily find
                      b  important pages on your website
                      |  , like your blog, product pages, pricing, contact info, and documentation. This improves the chances of visitors browsing your site longer, which can boost your page views and reduce your bounce rate.
                    .code-box-copy
                      button.code-box-copy__btn.btn-clipboard(data-clipboard-target='#example-head1', title='Copy')
                        i.icofont.icofont-copy-alt
                      pre.custom-scrollbar
                        code.language-html#example-head1
                          |&lt;div class="card-body"&gt;
                          |  &lt;p class="mb-0"&gt;A navigation bar is a particularly important feature because it allows visitors to quickly and easily find&lt;b&gt;important pages on your website&lt;/b&gt;,like your blog, product pages, pricing, contact info, and documentation. This improves the chances of visitors browsing your site longer, which can boost your page views and reduce your bounce rate.&lt;/p&gt;
                          |&lt;/div&gt;
              div(class="col-span-6 xl:col-span-12")
                .card.shadow-none.custom-border
                  .card-header
                    h5 Not using Shadow Card
                    p.f-m-light.mt-1
                      | Use
                      code  shadow-none 
                      | &
                      code  border
                      |  class through shadow removes.
                    .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
                    .flex-space.flex-wrap.items-center(class="[@media(max-width:576px)]:justify-center")
                      img.tab-img(src="../assets/images/avtar/3.jpg", alt="profile") 
                      p 
                        strong Visit Us: 
                        | 	2600 Hollywood Blvd,Florida, United States-	33020
                        br
                        strong Mail Us:
                        | contact@us@gmail.com
                        br
                        strong Contact Number: 
                        | (954) 357-7760
                    .code-box-copy
                      button.code-box-copy__btn.btn-clipboard(data-clipboard-target='#example-head2', title='Copy')
                        i.icofont.icofont-copy-alt
                      pre.custom-scrollbar
                        code.language-html#example-head2
                          |&lt;div class="card-body"&gt;
                          |  &lt;div class="flex-space flex-wrap align-items-center"&gt;
                          |    &lt;img class="tab-img" src="../assets/images/avtar/3.jpg" alt="profile"&gt;
                          |    &lt;p&gt;
                          |      &lt;strong&gt;Visit Us:&lt;/strong&gt;2600 Hollywood Blvd,Florida, United States-	33020
                          |      &lt;br&gt;
                          |      &lt;strong&gt;Mail Us:&lt;/strong&gt;contact@us@gmail.com
                          |      &lt;br&gt;
                          |      &lt;strong&gt;Contact Number:&lt;/strong&gt;(954) 357-7760
                          |    &lt;/p&gt;
                          |  &lt;/div&gt;
                          |&lt;/div&gt;
              div(class="col-span-6 xl:col-span-12")
                .card
                  .card-header
                    h5
                      i.icofont.icofont-library.me-2
                      |  Icon In Heading
                    p.f-m-light.mt-1
                      | Use any icons for heading. 
                      code [font-awesome/ico-font/feather]
                      | .
                    .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
                    .flex.gap-3.items-center.list-behavior-1
                      .shrink-0
                        img.tab-img.max-w-full(src="../assets/images/blog/img.png", class="[@media(max-width:1999px)]:h-[86px] [@media(max-width:992px)]:h-[64px]" alt="home") 
                      .grow.ms-0
                        p.mb-xl-0.mb-sm-4(class="[@media(max-width:1199px)]:line-clamp-[3]")
                          | We provide end to end digital solutions, right from designing your website/application development: Domain, Web Hosting, Email Hosting Registration, Search Engine Optimization and other Internet Marketing, Renewal of Services timely and effectively.
                    .code-box-copy
                      button.code-box-copy__btn.btn-clipboard(data-clipboard-target='#example-head3', title='Copy')
                        i.icofont.icofont-copy-alt
                      pre.custom-scrollbar
                        code.language-html#example-head3
                          |&lt;div class="card-body"&gt;
                          |  &lt;div class="flex gap-3 align-items-center list-behavior-1"&gt;
                          |    &lt;div class="shrink-0"&gt;&lt;img class="tab-img max-w-full.h-auto" src="../assets/images/blog/img.png" alt="home"&gt;&lt;/div&gt;
                          |    &lt;div class="grow ms-0"&gt;
                          |      &lt;p class="mb-xl-0 mb-sm-4"&gt;We provide end to end digital solutions, right from designing your website/application development: Domain, Web Hosting, Email Hosting Registration, Search Engine Optimization and other Internet Marketing, Renewal of Services timely and effectively.&lt;/p&gt;
                          |    &lt;/div&gt;
                          |  &lt;/div&gt;
                          |&lt;/div&gt;
              .col-span-12
                .card.basic-dark-card
                  .card-header.bg-dark
                    h5.light-white Dark Color Card
                    p.mt-1
                      | Use 
                      code bg-dark 
                      | color for dark background card.
                    .card-header-right.dark-color-header
                      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.bg-dark
                    .flex.items-center.gap-3.pills-blogger(class="[@media(max-width:576px)]:justify-center [@media(max-width:576px)]:flex-wrap")
                      .blog-wrapper 
                          img.blog-img(src="../assets/images/dashboard-2/headphones.png", alt="head-phone")
                      .blog-content(class="w-[calc(100%_-_100px_-_12px)]")
                        p.light-white
                          b.fw-bold Smart headphones
                          |   — also called smart earbuds or hearable — are high-tech in-ear devices that do more than transmit audio. These headphones are usually wireless, and they can sync up with your phone, tablet, computer or other Bluetooth-enabled device. The main appeal of hearables is convenience, as they allow you to complete common tasks without directly accessing your phone or computer. Smart wireless headphones sync up to other devices using Bluetooth technology, and many of their features rely on data from your smartphone or computer.
                    .code-box-copy
                      button.code-box-copy__btn.btn-clipboard(data-clipboard-target='#example-head4', title='Copy')
                        i.icofont.icofont-copy-alt
                      pre.custom-scrollbar
                        code.language-html#example-head4
                          |&lt;div class="card-body bg-dark"&gt;
                          |  &lt;div class="flex align-items-center gap-3 pills-blogger"&gt; 
                          |    &lt;div class="blog-wrapper"&gt;
                          |      &lt;img class="blog-img" src="../assets/images/dashboard-2/headphones.png" alt="head-phone"&gt;
                          |    &lt;/div&gt;
                          |    &lt;div class="blog-content"&gt; 
                          |      &lt;p class="light-white"&gt;
                          |        &lt;b class="fw-bold"&gt;Smart headphones&lt;/b&gt;—also called smart earbuds or hearable — are high-tech in-ear devices that do more than transmit audio. These headphones are usually wireless, and they can sync up with your phone, tablet, computer or other Bluetooth-enabled device. The main appeal of hearables is convenience, as they allow you to complete common tasks without directly accessing your phone or computer. Smart wireless headphones sync up to other devices using Bluetooth technology, and many of their features rely on data from your smartphone or computer.
                          |      &lt;/p&gt;
                          |    &lt;/div&gt;
                          |  &lt;/div&gt;
                          |&lt;/div&gt;
                  .card-footer.bg-dark
                    h6.mb-0.light-white Card Footer
              div(class="col-span-4 xl:col-span-6 sm:col-span-12")
                .card
                  .card-header.bg-info
                    h5.txt-light 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 xl:col-span-6 sm:col-span-12")
                .card
                  .card-header
                    h5 Info Color Body
                  .card-body.bg-info
                    h6.pb-2.txt-light UX Designer 
                    p.mb-0.txt-light
                      | 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 xl: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.txt-light Cuba Theme
          // Container-fluid Ends
        include ../../components/footer
    include ../../components/footer-files      
