@travlrcom/uikit

<!DOCTYPE html> <html lang="en"> <head> <base href="/"> <meta charset="utf-8"/> <meta name="theme-color" content="#006272"/> <meta name="viewport" content="width=device-width, initial-scale=1.0"/> <meta name="robots" content="index, follow"> <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> <link rel="canonical" href=""> <link rel="manifest" href="manifest.json"> <title>Home - Travlr UI Kit</title> <meta name="description" content="Travlr Meta Description">  <meta property="og:title" content="Travlr Facebook Title"> <meta property="og:description" content="Travlr Facebook Description"> <meta property="og:type" content="website" /> <meta property="og:url" content="Travlr Facebook Url"> <meta property="og:image" content="Travlr Facebook Image"> <meta property="fb:app_id" content="FACEBOOK_APP_ID" /> <meta property="og:site_name" content="Travlr">  <meta name="twitter:card" content="summary" /> <meta name="twitter:site" content="Travlr Twitter Account" /> <meta name="twitter:title" content="Travlr Twitter Title"> <meta name="twitter:description" content="Travlr Twitter Description"> <meta property="twitter:image" content="Travlr Twitter Image">  <link rel="shortcut icon" href="">  <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Montserrat:400,600,700">  <link href="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/9.13.1/styles/color-brewer.min.css" rel="stylesheet"/>  </head> <body class="travlr-ui"> <div id="app">  <%= require('html-loader!./../components/header.html') %>   <main class="t-main-content">  <section class="t-section-extra-large t-color-white t-background-tertiary"> <div class="t-container"> <div class="t-columns"> <div class="t-col-12"> <h1 class="t-heading-1">Documentations</h1> </div> </div> </div> </section>  <div class="t-container">  <section class="t-section-small"> <h2 class="t-heading-2 t-m-b-5 t-color-grey-darkest">Colour Pallete</h2> <p class="t-label-text"> Colour Pallete are prestyled elements that are ready to be iplemented. Easily override default styles and customize them further. </p> <div class="t-columns t-columns-with-gap t-m-t-32"> <div class="t-col-3 t-col-tab-6 t-col-mobile-12"> <a href="./theme-colours.html" class="t-display-table t-w-100 t-box t-box-with-shadow t-color-grey-darkest"><span class="t-display-table-cell t-v-align-middle t-icon icon-check t-p-r-16"></span>Theme Colour</a> </div> </div> </section>  <div class="t-separator t-m-t-0 t-m-b-0"></div>  <section class="t-section-small"> <h2 class="t-heading-2 t-m-b-5 t-color-grey-darkest">Typography</h2> <p class="t-label-text"> Typography are prestyled elements that are ready to be iplemented. Easily override default styles and customize them further. </p> <div class="t-columns t-columns-with-gap t-m-t-32"> <div class="t-col-3 t-col-tab-6 t-col-mobile-12"> <a href="./hierarchy.html" class="t-display-table t-w-100 t-box t-box-with-shadow t-color-grey-darkest"><span class="t-display-table-cell t-v-align-middle t-icon icon-check t-p-r-16"></span>Hierarchy</a> </div> </div> </section>  <div class="t-separator t-m-t-0 t-m-b-0"></div>  <section class="t-section-small"> <h2 class="t-heading-2 t-m-b-5 t-color-grey-darkest">Assets</h2> <p class="t-label-text"> Assets are prestyled elements that are ready to be iplemented. Easily override default styles and customize them further. </p> <div class="t-columns t-columns-with-gap t-m-t-32"> <div class="t-col-3 t-col-tab-6 t-col-mobile-12"> <a href="./ui-icons.html" class="t-display-table t-w-100 t-box t-box-with-shadow t-color-grey-darkest"><span class="t-display-table-cell t-v-align-middle t-icon icon-check t-p-r-16"></span>UI Icon</a> </div> <div class="t-col-3 t-col-tab-6 t-col-mobile-12"> <a href="./content-icons.html" class="t-display-table t-w-100 t-box t-box-with-shadow t-color-grey-darkest"><span class="t-display-table-cell t-v-align-middle t-icon icon-check t-p-r-16"></span>Content Icons</a> </div> <div class="t-col-3 t-col-tab-6 t-col-mobile-12"> <a href="./brands-icons.html" class="t-display-table t-w-100 t-box t-box-with-shadow t-color-grey-darkest"><span class="t-display-table-cell t-v-align-middle t-icon icon-check t-p-r-16"></span>Brands Icons</a> </div> <div class="t-col-3 t-col-tab-6 t-col-mobile-12"> <a href="./loading-spinners.html" class="t-display-table t-w-100 t-box t-box-with-shadow t-color-grey-darkest"><span class="t-display-table-cell t-v-align-middle t-icon icon-check t-p-r-16"></span>Loading Spinner</a> </div> </div> </section>  <div class="t-separator t-m-t-0 t-m-b-0"></div>  <section class="t-section-small"> <h2 class="t-heading-2 t-m-b-5 t-color-grey-darkest">Elements</h2> <p class="t-label-text"> Elements are prestyled elements that are ready to be iplemented. Easily override default styles and customize them further. </p> <div class="t-columns t-columns-with-gap t-m-t-32"> <div class="t-col-3 t-col-tab-6 t-col-mobile-12"> <a href="./button.html" class="t-display-table t-w-100 t-box t-box-with-shadow t-color-grey-darkest"><span class="t-display-table-cell t-v-align-middle t-icon icon-check t-p-r-16"></span>Button</a> </div> <div class="t-col-3 t-col-tab-6 t-col-mobile-12"> <a href="./radio-button.html" class="t-display-table t-w-100 t-box t-box-with-shadow t-color-grey-darkest"><span class="t-display-table-cell t-v-align-middle t-icon icon-check t-p-r-16"></span>Radio Button</a> </div> <div class="t-col-3 t-col-tab-6 t-col-mobile-12"> <a href="./checkbox.html" class="t-display-table t-w-100 t-box t-box-with-shadow t-color-grey-darkest"><span class="t-display-table-cell t-v-align-middle t-icon icon-check t-p-r-16"></span>Checkbox</a> </div> <div class="t-col-3 t-col-tab-6 t-col-mobile-12"> <a href="./toggle-button.html" class="t-display-table t-w-100 t-box t-box-with-shadow t-color-grey-darkest"><span class="t-display-table-cell t-v-align-middle t-icon icon-check t-p-r-16"></span>Toggle Button</a> </div> <div class="t-col-3 t-col-tab-6 t-col-mobile-12"> <a href="./text-input.html" class="t-display-table t-w-100 t-box t-box-with-shadow t-color-grey-darkest"><span class="t-display-table-cell t-v-align-middle t-icon icon-check t-p-r-16"></span>Text Input</a> </div> <div class="t-col-3 t-col-tab-6 t-col-mobile-12"> <a href="./selection-input.html" class="t-display-table t-w-100 t-box t-box-with-shadow t-color-grey-darkest"><span class="t-display-table-cell t-v-align-middle t-icon icon-check t-p-r-16"></span>Selection Input</a> </div> <div class="t-col-3 t-col-tab-6 t-col-mobile-12"> <a href="./badge.html" class="t-display-table t-w-100 t-box t-box-with-shadow t-color-grey-darkest"><span class="t-display-table-cell t-v-align-middle t-icon icon-check t-p-r-16"></span>Badge</a> </div> <div class="t-col-3 t-col-tab-6 t-col-mobile-12"> <a href="./tags.html" class="t-display-table t-w-100 t-box t-box-with-shadow t-color-grey-darkest"><span class="t-display-table-cell t-v-align-middle t-icon icon-check t-p-r-16"></span>Tags</a> </div> <div class="t-col-3 t-col-tab-6 t-col-mobile-12"> <a href="./image.html" class="t-display-table t-w-100 t-box t-box-with-shadow t-color-grey-darkest"><span class="t-display-table-cell t-v-align-middle t-icon icon-check t-p-r-16"></span>Image</a> </div> </div> </section>  <div class="t-separator t-m-t-0 t-m-b-0"></div>  <section class="t-section-small"> <h2 class="t-heading-2 t-m-b-5 t-color-grey-darkest">Components</h2> <p class="t-label-text"> Components are prestyled elements that are ready to be iplemented. Easily override default styles and customize them further. </p> <div class="t-columns t-columns-with-gap t-m-t-32"> <div class="t-col-3 t-col-tab-6 t-col-mobile-12"> <a href="./dropdown.html" class="t-display-table t-w-100 t-box t-box-with-shadow t-color-grey-darkest"><span class="t-display-table-cell t-v-align-middle t-icon icon-check t-p-r-16"></span>Dropdown</a> </div> <div class="t-col-3 t-col-tab-6 t-col-mobile-12"> <a href="./date-picker.html" class="t-display-table t-w-100 t-box t-box-with-shadow t-color-grey-darkest"><span class="t-display-table-cell t-v-align-middle t-icon icon-check t-p-r-16"></span>Date Picker</a> </div> <div class="t-col-3 t-col-tab-6 t-col-mobile-12"> <a href="./number-picker.html" class="t-display-table t-w-100 t-box t-box-with-shadow t-color-grey-darkest"><span class="t-display-table-cell t-v-align-middle t-icon icon-check t-p-r-16"></span>Number Picker</a> </div> <div class="t-col-3 t-col-tab-6 t-col-mobile-12"> <a href="./slider.html" class="t-display-table t-w-100 t-box t-box-with-shadow t-color-grey-darkest"><span class="t-display-table-cell t-v-align-middle t-icon icon-check t-p-r-16"></span>Slider</a> </div> <div class="t-col-3 t-col-tab-6 t-col-mobile-12"> <a href="./alert.html" class="t-display-table t-w-100 t-box t-box-with-shadow t-color-grey-darkest"><span class="t-display-table-cell t-v-align-middle t-icon icon-check t-p-r-16"></span>Alert</a> </div> <div class="t-col-3 t-col-tab-6 t-col-mobile-12"> <a href="./notification.html" class="t-display-table t-w-100 t-box t-box-with-shadow t-color-grey-darkest"><span class="t-display-table-cell t-v-align-middle t-icon icon-check t-p-r-16"></span>Notification</a> </div> <div class="t-col-3 t-col-tab-6 t-col-mobile-12"> <a href="./message.html" class="t-display-table t-w-100 t-box t-box-with-shadow t-color-grey-darkest"><span class="t-display-table-cell t-v-align-middle t-icon icon-check t-p-r-16"></span>Message</a> </div> <div class="t-col-3 t-col-tab-6 t-col-mobile-12"> <a href="./tooltip.html" class="t-display-table t-w-100 t-box t-box-with-shadow t-color-grey-darkest"><span class="t-display-table-cell t-v-align-middle t-icon icon-check t-p-r-16"></span>Tooltip</a> </div> <div class="t-col-3 t-col-tab-6 t-col-mobile-12"> <a href="./modal.html" class="t-display-table t-w-100 t-box t-box-with-shadow t-color-grey-darkest"><span class="t-display-table-cell t-v-align-middle t-icon icon-check t-p-r-16"></span>Modal</a> </div> <div class="t-col-3 t-col-tab-6 t-col-mobile-12"> <a href="./cards.html" class="t-display-table t-w-100 t-box t-box-with-shadow t-color-grey-darkest"><span class="t-display-table-cell t-v-align-middle t-icon icon-check t-p-r-16"></span>Cards</a> </div> <div class="t-col-3 t-col-tab-6 t-col-mobile-12"> <a href="./panel.html" class="t-display-table t-w-100 t-box t-box-with-shadow t-color-grey-darkest"><span class="t-display-table-cell t-v-align-middle t-icon icon-check t-p-r-16"></span>Panel</a> </div> <div class="t-col-3 t-col-tab-6 t-col-mobile-12"> <a href="./tabs.html" class="t-display-table t-w-100 t-box t-box-with-shadow t-color-grey-darkest"><span class="t-display-table-cell t-v-align-middle t-icon icon-check t-p-r-16"></span>Tabs</a> </div> <div class="t-col-3 t-col-tab-6 t-col-mobile-12"> <a href="./breadcrumb.html" class="t-display-table t-w-100 t-box t-box-with-shadow t-color-grey-darkest"><span class="t-display-table-cell t-v-align-middle t-icon icon-check t-p-r-16"></span>Breadcrumb</a> </div> <div class="t-col-3 t-col-tab-6 t-col-mobile-12"> <a href="./steps.html" class="t-display-table t-w-100 t-box t-box-with-shadow t-color-grey-darkest"><span class="t-display-table-cell t-v-align-middle t-icon icon-check t-p-r-16"></span>Steps</a> </div> <div class="t-col-3 t-col-tab-6 t-col-mobile-12"> <a href="./pagination.html" class="t-display-table t-w-100 t-box t-box-with-shadow t-color-grey-darkest"><span class="t-display-table-cell t-v-align-middle t-icon icon-check t-p-r-16"></span>Pagination</a> </div> </div> </section>  <div class="t-separator t-m-t-0 t-m-b-0"></div>  <section class="t-section-small"> <h2 class="t-heading-2 t-m-b-5 t-color-grey-darkest">Layout</h2> <p class="t-label-text"> Layout are prestyled elements that are ready to be iplemented. Easily override default styles and customize them further. </p> <div class="t-columns t-columns-with-gap t-m-t-32"> <div class="t-col-3 t-col-tab-6 t-col-mobile-12"> <a href="./grid.html" class="t-display-table t-w-100 t-box t-box-with-shadow t-color-grey-darkest"><span class="t-display-table-cell t-v-align-middle t-icon icon-check t-p-r-16"></span>Grid</a> </div> <div class="t-col-3 t-col-tab-6 t-col-mobile-12"> <a href="./navbar.html" class="t-display-table t-w-100 t-box t-box-with-shadow t-color-grey-darkest"><span class="t-display-table-cell t-v-align-middle t-icon icon-check t-p-r-16"></span>Navbar</a> </div> <div class="t-col-3 t-col-tab-6 t-col-mobile-12"> <a href="./hero.html" class="t-display-table t-w-100 t-box t-box-with-shadow t-color-grey-darkest"><span class="t-display-table-cell t-v-align-middle t-icon icon-check t-p-r-16"></span>Hero</a> </div> <div class="t-col-3 t-col-tab-6 t-col-mobile-12"> <a href="./carousel.html" class="t-display-table t-w-100 t-box t-box-with-shadow t-color-grey-darkest"><span class="t-display-table-cell t-v-align-middle t-icon icon-check t-p-r-16"></span>Carousel</a> </div> <div class="t-col-3 t-col-tab-6 t-col-mobile-12"> <a href="./image-slideshow.html" class="t-display-table t-w-100 t-box t-box-with-shadow t-color-grey-darkest"><span class="t-display-table-cell t-v-align-middle t-icon icon-check t-p-r-16"></span>Image Slideshow</a> </div> </div> </section>  </div> </main>   <%= require('html-loader!./../components/footer.html') %>  </div> </body> </html>