- var theme_customizer = true; - var counter = 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-fluid .page-title .row .col-6 h4 | Lists .col-6 ol.breadcrumb li.breadcrumb-item a(href='index.html') svg.stroke-icon use(href='../assets/svg/icon-sprite.svg#stroke-home') li.breadcrumb-item Ui Kits li.breadcrumb-item.active Lists // Container-fluid starts .container-fluid .row .col-xxl-4.col-md-6 .card .card-header h4 Default Lists p.f-m-light.mt-1 | Use the code .list-group | define the list of items. and used code .list-group-item | to indicate the current content. .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 Design & Development li.list-group-item i.icofont.icofont-arrow-right | E-Commerce li.list-group-item i.icofont.icofont-arrow-right | SEO .col-xxl-4.col-md-6 .card .card-header h4 Active Lists p.f-m-light.mt-1 | Use code .active | to a code .list-group-item | to indicate the current active. .card-body ul.list-group li.list-group-item.active.bg-warning-light(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 .col-xxl-4.col-md-12 .card .card-header h4 Flush Lists p.f-m-light.mt-1 | Use code .list-group-flush | to remove some borders and rounded corners to render list group items. .card-body ul.list-group.list-group-flush li.list-group-item i.icofont.icofont-arrow-right | PRODUCT li.list-group-item i.icofont.icofont-arrow-right | PRODUCT DETAILS li.list-group-item i.icofont.icofont-arrow-right | CART li.list-group-item i.icofont.icofont-arrow-right | CHECKOUT .col-xxl-6.col-sm-12.box-col-12 .card.height-equal .card-header h4 Contextual classes p.f-m-light.mt-1 | Use contextual classes to style list items with a stateful background and color. code .list-light-* | and code txt-* | . .card-body .list-group a.list-group-item.list-group-item-action.list-light-primary(href='#') This is Primary bg you can use em.txt-primary.fw-bold .list-light-primary | class. a.list-group-item.list-group-item-action.list-light-secondary(href='#') This is Secondary bg you can use em.txt-secondary.fw-bold .list-light-secondary | class. a.list-group-item.list-group-item-action.list-light-success(href='#') This is Success bg you can use em.txt-success.fw-bold .list-light-success | class. a.list-group-item.list-group-item-action.list-light-danger(href='#') This is Danger bg you can use em.txt-danger.fw-bold .list-light-danger | class. a.list-group-item.list-group-item-action.list-light-warning(href='#') This is Warning bg you can use em.txt-warning.fw-bold .list-light-warning | class. a.list-group-item.list-group-item-action.list-light-info(href='#') This is Info bg you can use em.txt-info.fw-bold .list-light-info | class. a.list-group-item.list-group-item-action.list-light-white(href='#') This is White bg you can use em.txt-white.fw-bold .list-light-white | class. a.list-group-item.list-group-item-action.list-light-dark(href='#') This is White bg you can use em.txt-white.fw-bold .list-light-dark | class. .col-xxl-6.col-12.box-col-12 .card.height-equal .card-header h4 Horizontal Lists p.f-m-light.mt-1 | Use code .list-group-horizontal | to change the layout of list group items from vertical to horizontal across all breakpoints. code .list-group-horizontal-[sm/md/lg/xl/xxl] | . .card-body .horizontal-list-wrapper.dark-list ul.fw-bold.list-group.list-group-horizontal-sm.pb-2 li.list-group-item.border-left-primary Product li.list-group-item Product details li.list-group-item Pricing li.list-group-item Payment details li.list-group-item Checkout li.list-group-item Mega options ul.fw-bold.list-group.list-group-horizontal-md.pb-2 li.list-group-item.border-left-secondary Basic table li.list-group-item Sizing table li.list-group-item Border table li.list-group-item Basic inputs li.list-group-item Form validations ul.fw-bold.list-group.list-group-horizontal-lg.pb-2 li.list-group-item.border-left-warning Flat style li.list-group-item Edge style li.list-group-item Button group li.list-group-item Rating li.list-group-item Crypto ul.fw-bold.list-group.list-group-horizontal-xl.pb-2 li.list-group-item.border-left-success Blog li.list-group-item Blog details li.list-group-item Blog single li.list-group-item Order history ul.fw-bold.list-group.list-group-horizontal-xxl li.list-group-item.border-left-info Gallery grid li.list-group-item Gallery desc li.list-group-item Masonry Desc .col-md-12 .card .card-header h4 Custom Content Lists p.f-m-light.mt-1 | Use the code .list-group-item | through make custom design of all lists. .card-body .list-group.main-lists-content a.list-group-item.list-group-item-action.active.bg-primary(href='#' aria-current='true') .d-flex.w-100.justify-content-between.align-items-center .list-wrapper img.list-img(src="../assets/images/user/1.jpg", alt="profile") .list-content h6 Molly Boake p MollyBoake@rhyta.com small 5 days ago p.mb-1 Next step is to choose a tone of voice for your content type. From casual to convincing, pick one from 20+ tones in the dropdown.Why did we say “snag eyeballs” instead of “get attention?” Why do we say “brick-and-mortar words” instead of “concrete words?” Because, in your email subject lines, it’s better to use words that people can picture. small.text-black 20K Followers a.list-group-item.list-group-item-action.list-hover-primary(href='#') .d-flex.w-100.justify-content-between.align-items-center .list-wrapper img.list-img(src="../assets/images/user/3.png", alt="profile") .list-content h6 Gabrielle Fahey p GabrielleFahey@dayrep.com small.text-muted 10 days ago p.mb-1 Your aim with this blog is to advertise yourself and your services in blog design. That means it's vital to create content about just that: blog design. Anything else on your page may act as a distraction to your potential customers, and you don't want that! small.text-muted 100 Followers a.list-group-item.list-group-item-action.list-hover-primary(href='#') .d-flex.w-100.justify-content-between.align-items-center .list-wrapper img.list-img(src="../assets/images/user/2.jpg", alt="profile") .list-content h6 Lucinda Moseley p LucindaMoseley@teleworm.us small.text-muted 3 days ago p.mb-1 People who are looking to hire a web designer may not know what to look out for. This will give you a chance to prove your trustworthiness by providing potential customers with advice and will let you sell your services by highlighting their best qualities. small.text-muted 23M Followers .col-xxl-4.col-md-6 .card .card-header h4 Lists With Checkbox p.f-m-light.mt-1 | Use the code .form-check-input | to check your checkbox. .card-body.dark-list ul.list-group li.list-group-item input#firstCheckbox.form-check-input.me-1.checkbox-primary.active(type='checkbox' value='') label.form-check-label.txt-primary.mb-0(for='firstCheckbox') Auto Start li.list-group-item input#secondCheckbox.form-check-input.me-1.checkbox-secondary(type='checkbox' value='') label.form-check-label.txt-secondary.mb-0(for='secondCheckbox') Auto Update li.list-group-item input#thirdCheckbox.form-check-input.me-1.checkbox-success(type='checkbox' value='') label.form-check-.txt-success.mb-0(for='thirdCheckbox') Don't check auth key li.list-group-item input#thirdCheckbox.form-check-input.me-1.checkbox-warning(type='checkbox' value='') label.form-check-label.txt-warning.mb-0(for='thirdCheckbox') Success all .col-xxl-4.col-md-6 .card .card-header h4 Lists With Radios p.f-m-light.mt-1 | Use the code .form-check-input | to check your radio buttons. .card-body ul.list-group li.list-group-item input#firstRadio.form-check-input.me-1.active.checkbox-danger(type='radio' name='listGroupRadio' value='' checked='') label.form-check-label.mb-0(for='firstRadio') Meditations li.list-group-item input#secondRadio.form-check-input.me-1.checkbox-primary(type='radio' name='listGroupRadio' value='') label.form-check-label.mb-0(for='secondRadio') Read a book li.list-group-item input#thirdRadio.form-check-input.me-1.checkbox-success(type='radio' name='listGroupRadio' value='') label.form-check-label.mb-0(for='thirdRadio') Learn to code li.list-group-item input#thirdRadio.form-check-input.me-1.checkbox-info(type='radio' name='listGroupRadio' value='') label.form-check-label.mb-0(for='FourRadio') Drink more water .col-xxl-4.col-12 .card .card-header h4 Lists With Numbers p.f-m-light.mt-1 | Use the code .list-group-numbered | to ordered wise print numbers. .card-body ol.list-group.list-group-numbered li.list-group-item.txt-primary.fw-bold known for delivery of useful and usable solutions li.list-group-item.txt-danger.fw-bold Solve your problem with us li.list-group-item.txt-success.fw-bold Certified Professionals li.list-group-item.txt-warning.fw-bold Growth-Driven .col-sm-12.col-xl-12 .card .card-header h4 JavaScript Behavior p.f-m-light.mt-1 | Use the tab JavaScript plugin—include it individually or through the compiled code bootstrap.js | file to extend our list group to create table panes of local content. .card-body .row .col-sm-4 #list-tab.list-group(role='tablist') a#list-home-list.list-group-item.list-group-item-action.bg-primary.active(data-bs-toggle='list', href='#list-home', role='tab', aria-controls='list-home') Home a#list-profile-list.list-group-item.list-group-item-action.list-hover-primary(data-bs-toggle='list', href='#list-profile', role='tab', aria-controls='list-profile') Profile a#list-messages-list.list-group-item.list-group-item-action.list-hover-primary(data-bs-toggle='list', href='#list-messages', role='tab', aria-controls='list-messages') Contact Us a#list-settings-list.list-group-item.list-group-item-action.list-hover-primary(data-bs-toggle='list', href='#list-settings', role='tab', aria-controls='list-settings') Settings .col-sm-8 #nav-tabContent.tab-content #list-home.tab-pane.fade.show.active(role='tabpanel', aria-labelledby='list-home-list') .d-flex.mb-xl-4.list-behavior-1 .flex-shrink-0 img.tab-img.img-fluid(src="../assets/images/blog/img.png", alt="home") .flex-grow-1 p.mb-xl-0.mb-sm-4 | 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. .d-xl-flex.list-behavior-2 .flex-grow-1 p.mb-0 | When someone visits your homepage, your design should inspire them to stay. Therefore, your value proposition should be established on the homepage for visitors to select to stay on your website.Building trust, expressing value, and guiding visitors to the next step all depend on a page's design. .flex-shrink-0 img.tab-img.img-fluid(src="../assets/images/blog/blog.jpg", alt="home") #list-profile.tab-pane.fade.dark-list(role='tabpanel', aria-labelledby='list-profile-list') p.mb-0 .flex-space.flex-wrap.align-items-center.list-light-dark 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 #list-messages.tab-pane.fade(role='tabpanel', aria-labelledby='list-messages-list') p.pt-3 | Us Technology offers web & mobile development solutions for all industry verticals.Include a short form using fields that'll help your business understand who's contacting them. br 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 #list-settings.tab-pane.fade(role='tabpanel', aria-labelledby='list-settings-list') p strong Available pages in Theme: br | --> Typography: br | Typography is the art of arranging letters and text in a way that makes the copy legible, clear, and visually appealing to the reader. br | --> Tooltip: br | A tooltip is a brief, informative message that appears when a user interacts with an element in a graphical user interface (GUI). .col-xxl-4.col-md-6 .card .card-header h4 Numbered & Badge Lists p.f-m-light.mt-1 | Use the code .list-group-numbered | modifier class to numbered list group items.Numbers are generated via CSS for better placement inside list group items. .card-body ol.list-group.list-group-numbered li.list-group-item.d-flex.justify-content-between.align-items-start.flex-wrap .ms-2.me-auto | Stella Nowland span.badge.bg-warning.rounded-pill.p-2 Freelance li.list-group-item.d-flex.justify-content-between.align-items-start.flex-wrap .ms-2.me-auto | Lola Stanford span.badge.bg-danger.text-white.rounded-pill.p-2 Issue li.list-group-item.d-flex.justify-content-between.align-items-start.flex-wrap .ms-2.me-auto | Caitlin Coungeau span.badge.bg-primary.text-white.rounded-pill.p-2 Social li.list-group-item.d-flex.justify-content-between.align-items-start.flex-wrap .ms-2.me-auto | Graciela W. McClaran span.badge.bg-danger.text-white.rounded-pill.p-2 Issue .col-xxl-4.col-md-6 .card .card-header h4 Disabled Lists p.f-m-light.mt-1 | Use code .disabled | to a code .list-group-item | to make it appear disabled. .card-body .list-group a.list-group-item.list-group-item-action.list-hover-primary.active(href='javascript:void(0)') img.rounded-circle(src='../assets/images/user/1.jpg', alt='user') | Teresa J. Mosteller a.list-group-item.list-group-item-action.list-hover-secondary(href='javascript:void(0)') img.rounded-circle(src='../assets/images/user/3.png', alt='user') | Gloria D. Acheson a.list-group-item.list-group-item-action.disabled(href='javascript:void(0)') img.rounded-circle(src='../assets/images/user/2.jpg', alt='user') | Sharon C. Obrien a.list-group-item.list-group-item-action.disabled(href='javascript:void(0)') img.rounded-circle(src='../assets/images/user/5.jpg', alt='user') | Bryan A. Owens .col-xxl-4 .card .card-header h4 Scrollable Lists p.f-m-light.mt-1 | Use the property code overflow:auto | through scrollable lists. .card-body .list-group.main-lists-content.scrollbar-wrapper a.list-group-item.list-group-item-action.active.list-hover-primary(href='#' aria-current='true') .list-wrapper.gap-0 img.list-img(src="../assets/images/user/9.jpg", alt="profile") .list-content h6 Molly Boake p MollyBoake@rhyta.com small 5 days ago a.list-group-item.list-group-item-action.list-hover-primary(href='#') .list-wrapper.gap-0 img.list-img(src="../assets/images/user/10.jpg", alt="profile") .list-content h6 Gabrielle Fahey p GabrielleFahey@dayrep.com small.text-muted 10 days ago a.list-group-item.list-group-item-action.list-hover-primary(href='#') .list-wrapper.gap-0 img.list-img(src="../assets/images/user/2.jpg", alt="profile") .list-content h6 Lucinda Moseley p LucindaMoseley@teleworm.us small.text-muted 3 days ago a.list-group-item.list-group-item-action.list-hover-primary(href='#') .list-wrapper.gap-0 img.list-img(src="../assets/images/user/12.png", alt="profile") .list-content h6 Francis K. Henriques p FrancisKHenriques@teleworm.us small.text-muted 2 days ago a.list-group-item.list-group-item-action.list-hover-primary(href='#') .list-wrapper.gap-0 img.list-img(src="../assets/images/user/14.png", alt="profile") .list-content h6 Jose A. Seay p JoseASeay@rhyta.com small.text-muted 15 days ago a.list-group-item.list-group-item-action.list-hover-primary(href='#') .list-wrapper.gap-0 img.list-img(src="../assets/images/user/3.jpg", alt="profile") .list-content h6 Phil F. Cunningham p PhilFCunningham@dayrep.com small.text-muted 6 days ago a.list-group-item.list-group-item-action.list-hover-primary(href='#') .list-wrapper.gap-0 img.list-img(src="../assets/images/user/7.jpg", alt="profile") .list-content h6 Richard E. Johnson p RichardEJohnson@teleworm.us small.text-muted 20 days ago a.list-group-item.list-group-item-action.list-hover-primary(href='#') .list-wrapper.gap-0 img.list-img(src="../assets/images/user/2.png", alt="profile") .list-content h6 Lawrence L. Nash p LawrenceLNash@jourrapide.com small.text-muted 8 days ago // Container-fluid Ends include ../../components/footer include ../../components/footer-files