@travlrcom/uikit
Version:
TRAVLR UiKit
387 lines (344 loc) • 19.2 kB
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>Brands Icons - 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.">
<!-- Facebook -->
<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=">
<!-- Twitter -->
<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">
<!-- Favicon -->
<link rel="shortcut icon" href="">
<!-- Fonts -->
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Montserrat:400,600,700">
<!-- Vendors -->
<link href="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/9.13.1/styles/color-brewer.min.css" rel="stylesheet"/>
<!-- Google Tag Manager -->
</head>
<body class="travlr-ui">
<div id="app">
<!-- core nav top -->
<%= require('html-loader!./../components/header.html') %>
<!-- core nav top end -->
<!-- Begin Main Content -->
<main class="t-main-content">
<!-- section hero main -->
<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="#">Brands Icons</a>
</li>
</ul>
</div>
</div>
</div>
</section>
<!-- section hero main end -->
<!-- Begin Getting Started -->
<section class="t-p-b-32">
<div class="t-container">
<div class="t-columns t-columns-with-gap">
<!-- Begin Left Description -->
<%= require('html-loader!./../components/sidebar-documentation.html') %>
<!-- End Left Description -->
<!-- Begin Right Description -->
<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">Brands Icons</h2>
<p class="t-body-text t-m-t-32 t-m-b-32">
TRAVLR UI Kit uses Brands Icons 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-icon</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="brandIcons-1">
<span class="t-icon icon-facebook"></span>
</code>
</pre>
</div>
<div class="t-col-2 t-text-align-right">
<button data-clipboard-action="copy" data-clipboard-target="#brandIcons-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-icon icon-facebook"></span>
</div>
<div class="t-separator t-m-t-32 t-m-b-32"></div>
<h2 class="t-heading-4 t-color-grey-darkest">Icon 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. <span class="t-label-code">.icon-color-primary</span>
</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="brandIcons-2">
<span class="t-icon icon-love t-color-primary"></span>
<span class="t-icon icon-love t-color-secondary"></span>
<span class="t-icon icon-love t-color-tertiary"></span>
</code>
</pre>
</div>
<div class="t-col-2 t-text-align-right">
<button data-clipboard-action="copy" data-clipboard-target="#brandIcons-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-icon icon-facebook t-color-primary t-m-r-16"></span>
<span class="t-icon icon-facebook t-color-secondary t-m-r-16"></span>
<span class="t-icon icon-facebook t-color-tertiary "></span>
</div>
<div class="t-separator t-m-t-32 t-m-b-32"></div>
<h2 class="t-heading-4 t-color-grey-darkest">Icon Size</h2>
<p class="t-body-text t-m-t-32 t-m-b-32">
To alter size use one of the four existing size classes: <span class="t-label-code">.icon-small</span> , <span class="t-label-code">.icon-medium</span>
</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="brandIcons-3">
<span class="t-icon icon-facebook icon-small"></span>
<span class="t-icon icon-facebook"></span>
<span class="t-icon icon-facebook icon-large"></span>
</code>
</pre>
</div>
<div class="t-col-2 t-text-align-right">
<button data-clipboard-action="copy" data-clipboard-target="#brandIcons-3" 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-icon icon-facebook icon-small t-m-r-16"></span>
<span class="t-icon icon-facebook t-m-r-16"></span>
<span class="t-icon icon-facebook icon-large"></span>
</div>
<div class="t-separator t-m-t-32 t-m-b-32"></div>
<h2 class="t-heading-4 t-color-grey-darkest">Icon Type</h2>
<p class="t-body-text t-m-t-32 t-m-b-32">
To alter size use one of the four existing size classes: <span class="t-label-code">.t-icon-is-spinning</span> , <span class="t-label-code">.t-icon-rotate-90</span> , <span class="t-label-code">.t-icon-rotate-180</span> , <span class="t-label-code">.t-icon-rotate-270</span> , <span class="t-label-code">.t-icon-flip-y</span> , <span class="t-label-code">.t-icon-flip-x</span>
</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="uiIcons-3">
<span class="t-icon icon-facebook t-icon-is-spinning"></span>
<span class="t-icon icon-facebook t-icon-rotate-90"></span>
<span class="t-icon icon-facebook t-icon-rotate-180"></span>
<span class="t-icon icon-facebook t-icon-rotate-270"></span>
<span class="t-icon icon-facebook t-icon-flip-y"></span>
<span class="t-icon icon-facebook t-icon-flip-x"></span>
</code>
</pre>
</div>
<div class="t-col-2 t-text-align-right">
<button data-clipboard-action="copy" data-clipboard-target="#uiIcons-3" 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-icon icon-facebook t-icon-is-spinning t-m-r-16"></span>
<span class="t-icon icon-facebook t-icon-rotate-90 t-m-r-16"></span>
<span class="t-icon icon-facebook t-icon-rotate-180 t-m-r-16"></span>
<span class="t-icon icon-facebook t-icon-rotate-270 t-m-r-16"></span>
<span class="t-icon icon-facebook t-icon-flip-y t-m-r-16"></span>
<span class="t-icon icon-facebook t-icon-flip-x"></span>
</div>
<div class="t-separator t-m-t-32 t-m-b-32"></div>
<h2 class="t-heading-4 t-color-grey-darkest">Brands Icons List</h2>
<p class="t-body-text t-m-t-32 t-m-b-32">
Rollover any icon to see icon class name.
</p>
<div class="t-columns t-columns-with-gap t-m-t-32 t-color-grey-darkest">
<div class="t-col-2 t-col-mobile-3 t-text-align-center t-m-b-16">
<div class="t-box t-box-with-shadow">
<span class="t-tooltip" tooltip="icon-facebook" flow="down">
<i class="t-icon icon-facebook"></i>
</span>
</div>
</div>
<div class="t-col-2 t-col-mobile-3 t-text-align-center t-m-b-16">
<div class="t-box t-box-with-shadow">
<span class="t-tooltip" tooltip="icon-facebook-square" flow="down">
<i class="t-icon icon-facebook-square"></i>
</span>
</div>
</div>
<div class="t-col-2 t-col-mobile-3 t-text-align-center t-m-b-16">
<div class="t-box t-box-with-shadow">
<span class="t-tooltip" tooltip="icon-google" flow="down">
<i class="t-icon icon-google"></i>
</span>
</div>
</div>
<div class="t-col-2 t-col-mobile-3 t-text-align-center t-m-b-16">
<div class="t-box t-box-with-shadow">
<span class="t-tooltip" tooltip="icon-google-play" flow="down">
<i class="t-icon icon-google-play"></i>
</span>
</div>
</div>
<div class="t-col-2 t-col-mobile-3 t-text-align-center t-m-b-16">
<div class="t-box t-box-with-shadow">
<span class="t-tooltip" tooltip="icon-google-plus" flow="down">
<i class="t-icon icon-google-plus"></i>
</span>
</div>
</div>
<div class="t-col-2 t-col-mobile-3 t-text-align-center t-m-b-16">
<div class="t-box t-box-with-shadow">
<span class="t-tooltip" tooltip="icon-instagram" flow="down">
<i class="t-icon icon-instagram"></i>
</span>
</div>
</div>
<div class="t-col-2 t-col-mobile-3 t-text-align-center t-m-b-16">
<div class="t-box t-box-with-shadow">
<span class="t-tooltip" tooltip="icon-linkedin" flow="down">
<i class="t-icon icon-linkedin"></i>
</span>
</div>
</div>
<div class="t-col-2 t-col-mobile-3 t-text-align-center t-m-b-16">
<div class="t-box t-box-with-shadow">
<span class="t-tooltip" tooltip="icon-linkedin-square" flow="down">
<i class="t-icon icon-linkedin-square"></i>
</span>
</div>
</div>
<div class="t-col-2 t-col-mobile-3 t-text-align-center t-m-b-16">
<div class="t-box t-box-with-shadow">
<span class="t-tooltip" tooltip="icon-pinterest" flow="down">
<i class="t-icon icon-pinterest"></i>
</span>
</div>
</div>
<div class="t-col-2 t-col-mobile-3 t-text-align-center t-m-b-16">
<div class="t-box t-box-with-shadow">
<span class="t-tooltip" tooltip="icon-pinterest-circle" flow="down">
<i class="t-icon icon-pinterest-circle"></i>
</span>
</div>
</div>
<div class="t-col-2 t-col-mobile-3 t-text-align-center t-m-b-16">
<div class="t-box t-box-with-shadow">
<span class="t-tooltip" tooltip="icon-twitter" flow="down">
<i class="t-icon icon-twitter"></i>
</span>
</div>
</div>
<div class="t-col-2 t-col-mobile-3 t-text-align-center t-m-b-16">
<div class="t-box t-box-with-shadow">
<span class="t-tooltip" tooltip="icon-youtube" flow="down">
<i class="t-icon icon-youtube"></i>
</span>
</div>
</div>
<div class="t-col-2 t-col-mobile-3 t-text-align-center t-m-b-16">
<div class="t-box t-box-with-shadow">
<span class="t-tooltip" tooltip="icon-amex" flow="down">
<i class="t-icon icon-card-amex"></i>
</span>
</div>
</div>
<div class="t-col-2 t-col-mobile-3 t-text-align-center t-m-b-16">
<div class="t-box t-box-with-shadow">
<span class="t-tooltip" tooltip="icon-mastercard" flow="down">
<i class="t-icon icon-card-mastercard"></i>
</span>
</div>
</div>
<div class="t-col-2 t-col-mobile-3 t-text-align-center t-m-b-16">
<div class="t-box t-box-with-shadow">
<span class="t-tooltip" tooltip="icon-paypal" flow="down">
<i class="t-icon icon-card-paypal"></i>
</span>
</div>
</div>
<div class="t-col-2 t-col-mobile-3 t-text-align-center t-m-b-16">
<div class="t-box t-box-with-shadow">
<span class="t-tooltip" tooltip="icon-visa" flow="down">
<i class="t-icon icon-card-visa"></i>
</span>
</div>
</div>
</div>
<%= require('html-loader!./../components/footer-documentation.html') %>
</div>
</div>
<!-- End Right Description -->
</div>
</div>
</section>
<!-- End Getting Started -->
</main>
<!-- End Main Content -->
<!-- core nav bottom -->
<%= require('html-loader!./../components/footer.html') %>
<!-- core nav bottom -->
</div>
<!-- core nav bottom script -->
<%= require('html-loader!./../components/footer-script.html') %>
<!-- core nav bottom script -->
</body>
</html>