@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>Image - TRAVLR UI Kit</title> <meta name="description" content="TRAVLR UI Kit A simple and clean framework making front-end web development fast & easy. Fully responsive and filled with cool stuff.">  <meta property="og:title" content="TRAVLR UI Kit"> <meta property="og:description" content="TRAVLR UI Kit A simple and clean framework making front-end web development fast & easy. Fully responsive and filled with cool stuff."> <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 UI Kit=">  <meta name="twitter:card" content="summary" /> <meta name="twitter:site" content="Travlr Twitter Account" /> <meta name="twitter:title" content="TRAVLR UI Kit"> <meta name="twitter:description" content="TRAVLR UI Kit A simple and clean framework making front-end web development fast & easy. Fully responsive and filled with cool stuff."> <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-small"> <div class="t-container"> <div class="t-columns t-columns-with-gap"> <div class="t-col-12"> <ul class="t-breadcrumb"> <li class="t-breadcrumb-item active"> <a href="/">Home</a> </li> <li class="t-breadcrumb-item active"> <a href="/documentations.html">Documentations</a> </li> <li class="t-breadcrumb-item disabled"> <a href="#">Image</a> </li> </ul> </div> </div> </div> </section>   <section class="t-p-b-32"> <div class="t-container"> <div class="t-columns t-columns-with-gap">  <%= require('html-loader!./../components/sidebar-documentation.html') %>   <div class="t-col-8 t-col-mobile-12"> <div class="t-box t-box-with-shadow"> <h2 class="t-heading-4 t-color-grey-darkest">Image</h2> <p class="t-body-text t-m-t-32 t-m-b-32"> TRAVLR UI Kit uses Image font icons which are composed of some 250+ icons. Easily style icons using border color classes, background color classes and size classes. Highlight icons using the <span class="t-label-code">.t-image</span> class. </p> <div class="t-panel t-primary-box-shadow t-no-margin"> <div class="t-panel-header t-p-t-0 t-background-grey-lightest"> <div class="t-panel-header-title"> Example </div> </div> <div class="t-panel-body"> <div class="t-columns t-columns-with-gap"> <div class="t-col-10"> <pre> <code class="xml hljs" id="badge-1"> <div class="t-image-avatar"></div> <div class="t-image-rounded">1</div> <div class="t-image-thumb">1</div> </code> </pre> </div> <div class="t-col-2 t-text-align-right"> <button data-clipboard-action="copy" data-clipboard-target="#badge-1" class="copyText t-btn t-btn-tertiary t-btn-small t-hidden-mobile">Copy</button> </div> </div> </div> </div> <div class="t-m-t-32 t-color-grey-darkest"> <span class="t-m-r-32"> <img src="" class=""> </span> <span class="t-m-r-32"> Text <sup class="t-image t-image-circle"> 1 </sup> </span> <span> <span class="t-icon icon-cart"></span> <sup class="t-image t-image-circle t-image-hang-top-icon"> 1 </sup> </span> </div> <div class="t-m-t-32 t-color-grey-darkest"> </div> <div class="t-separator t-m-t-32 t-m-b-32"></div> <h2 class="t-heading-4 t-color-grey-darkest">Badge Colour</h2> <p class="t-body-text t-m-t-32 t-m-b-32"> Add color classes in combination with the feature icon class to draw attention to an icon. </p> <div class="t-panel t-primary-box-shadow t-no-margin"> <div class="t-panel-header t-p-t-0 t-background-grey-lightest"> <div class="t-panel-header-title"> Example </div> </div> <div class="t-panel-body"> <div class="t-columns t-columns-with-gap"> <div class="t-col-10"> <pre> <code class="xml hljs" id="badge-2"> <sup class="t-image t-image-hang-top-text">New</sup> <sup class="t-image t-image-hang-top-text t-image-warning">New</sup> <sup class="t-image t-image-circle t-image-danger">1</sup> <sup class="t-image t-image-circle t-image-hang-top-icon t-image-success">1</sup> </code> </pre> </div> <div class="t-col-2 t-text-align-right"> <button data-clipboard-action="copy" data-clipboard-target="#badge-2" class="copyText t-btn t-btn-tertiary t-btn-small t-hidden-mobile">Copy</button> </div> </div> </div> </div> <div class="t-m-t-32 t-color-grey-darkest"> <span class="t-m-r-32"> Text <sup class="t-image t-image-hang-top-text"> new </sup> </span> <span class="t-m-r-32"> Text <sup class="t-image t-image-hang-top-text t-image-warning"> new </sup> </span> <span class="t-m-r-32"> Text <sup class="t-image t-image-circle t-image-danger"> 1 </sup> </span> <span> <span class="t-icon icon-cart"></span> <sup class="t-image t-image-circle t-image-hang-top-icon t-image-success"> 1 </sup> </span> </div> </div> <%= require('html-loader!./../components/footer-documentation.html') %> </div> </div>  </div> </div> </section>  </main>   <%= require('html-loader!./../components/footer.html') %>  </div>  <%= require('html-loader!./../components/footer-script.html') %>  </body> </html>