UNPKG

uix-kit

Version:

A free web kits for fast web design and development, compatible with Bootstrap v5.

155 lines (102 loc) 4.41 kB
<!DOCTYPE html> <html lang="@@{website_lang}" dir="@@{website_dirLTR}"> <head> <meta charset="@@{website_charset}" /> <title>Content Placeholder Animated - @@{website_title}</title> @@include('./src/components/_global/include-header.html') </head> <body class="page"> @@include('./src/components/_global/include-loader.html') @@include('./src/components/_global/include-toggle-trigger.html') <div class="uix-wrapper"> <!-- Header Area ============================================= --> <header class="uix-header__container"> <div class="uix-header"> <div class="container"> @@include('./src/components/_global/include-brand.html') @@include('./src/components/_global/include-menu.html') </div> <!-- .container end --> <div class="uix-clearfix"></div> </div> </header> <div class="uix-header__placeholder js-uix-header__placeholder-autoheight"></div> <main id="uix-maincontent"> <!-- Content ====================================================== --> <section class="uix-spacing--s uix-spacing--no-bottom"> <div class="container"> <div class="row"> <div class="col-12"> <h3>Content Placeholder Animated</h3> <p>These placeholders provide good UX, it gives users a sense of what to expect where on the page when the loading finishes.</p> <hr> </div> </div> <!-- .row end --> </div> <!-- .container end --> </section> <!-- Content ====================================================== --> <section class="uix-spacing--s"> <div class="container uix-t-c"> <div class="row"> <div class="col-12"> <div class="uix-content-placeholder"> <ul> <li> <div class="uix-content-placeholder__view"> <ul> <li> <div class="uix-content-placeholder__textSlot"> <div class="uix-content-placeholder__line--first uix-content-placeholder__line"></div> <div class="uix-content-placeholder__line--second uix-content-placeholder__line"></div> </div> <div class="uix-content-placeholder__thumbSlot"></div> </li> </ul> </div> </li> </ul> <ul> <div class="uix-content-placeholder__view"> <ul> <li> <div class="uix-content-placeholder__thumbSlot"></div> <div class="uix-content-placeholder__textSlot"> <div class="uix-content-placeholder__line--first uix-content-placeholder__line"></div> <div class="uix-content-placeholder__line--second uix-content-placeholder__line"></div> </div> </li> <li> <div class="uix-content-placeholder__thumbSlot"></div> <div class="uix-content-placeholder__textSlot"> <div class="uix-content-placeholder__line--first uix-content-placeholder__line"></div> <div class="uix-content-placeholder__line--second uix-content-placeholder__line"></div> </div> </li> <li> <div class="uix-content-placeholder__thumbSlot"></div> <div class="uix-content-placeholder__textSlot"> <div class="uix-content-placeholder__line--first uix-content-placeholder__line"></div> <div class="uix-content-placeholder__line--second uix-content-placeholder__line"></div> </div> </li> </ul> </div> </ul> </div> <!-- /.uix-content-placeholder --> </div> </div> <!-- .row end --> </div> <!-- .container end --> </section> </main> @@include('./src/components/_global/include-copyright.html') </div> <!-- .uix-wrapper end --> @@include('./src/components/_global/include-footer.html')