@travlrcom/uikit
Version:
TRAVLR UiKit
602 lines (565 loc) • 31.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>Contribute - Travlr UI Kit</title>
<meta name="description" content="Travlr Meta Description">
<!-- Facebook -->
<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">
<!-- Twitter -->
<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">
<!-- 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 -->
<header class="t-navbar-top t-background-white t-position-fixed">
<div class="t-container t-clearfix">
<div class="t-navbar-top-left t-float-left t-display-table">
<div class="t-navbar-top-left-logo t-display-table-cell t-v-align-middle t-p-r-16">
<a href="/">
<img
src="./../../src/assets/images/statics/travlr-uikit-logo.svg"
alt="TRAVLR Logo"
title="TRAVLR Logo"
class="t-navbar-top-left-logo-image">
</a>
</div>
<nav class="t-navbar-top-left-menus t-display-table-cell t-v-align-middle t-hidden-mobile">
<ul class="t-navbar-top-left-menus-list t-no-margin t-clearfix">
<li class="t-navbar-top-left-menus-list-item t-float-left">
<a
href="/"
class="t-navbar-top-left-menus-list-item-link t-color-grey-darkest t-text-callout"
title="Get Started">
Get Started
</a>
</li>
<li class="t-navbar-top-left-menus-list-item t-float-left">
<a
href="/documentations.html/"
class="t-navbar-top-left-menus-list-item-link t-color-grey-darkest t-text-callout"
title="Documentations">
Documentations
</a>
<ul class="t-navbar-top-left-menus-list-item-child t-background-white t-position-absolute t-primary-box-shadow">
<li class="t-navbar-top-left-menus-list-item-child-item">
<a
href="/documentations/colour-pallete.html/"
class="t-navbar-top-left-menus-list-item-child-item-link t-color-grey-darkest t-display-block t-body-text"
title="Colour Pallete">
Colour Pallete
<i class="t-icon icon-right-small"></i>
</a>
<ul class="t-navbar-top-left-menus-list-item-child-item-grandchild t-background-white t-position-absolute t-primary-box-shadow">
<li class="t-navbar-top-left-menus-list-item-child-item-grandchild-item">
<a
href="/documentations/colour-pallete/theme-colours.html/"
class="t-navbar-top-left-menus-list-item-child-item-grandchild-item-link t-color-grey-darkest t-display-block t-body-text"
title="Theme Colours">
Theme Colours
</a>
</li>
<li class="t-navbar-top-left-menus-list-item-child-item-grandchild-item">
<a
href="/documentations/colour-pallete/greyscale.html/"
class="t-navbar-top-left-menus-list-item-child-item-grandchild-item-link t-color-grey-darkest t-display-block t-body-text"
title="Greyscale">
Greyscale
</a>
</li>
<li class="t-navbar-top-left-menus-list-item-child-item-grandchild-item">
<a
href="/documentations/colour-pallete/alerts.html/"
class="t-navbar-top-left-menus-list-item-child-item-grandchild-item-link t-color-grey-darkest t-display-block t-body-text"
title="Alerts">
Alerts
</a>
</li>
</ul>
</li>
<li class="t-navbar-top-left-menus-list-item-child-item">
<a
href="/documentations/typography.html/"
class="t-navbar-top-left-menus-list-item-child-item-link t-color-grey-darkest t-display-block t-body-text"
title="Typography">
Typography
<i class="t-icon icon-right-small"></i>
</a>
<ul class="t-navbar-top-left-menus-list-item-child-item-grandchild t-background-white t-position-absolute t-primary-box-shadow">
<li class="t-navbar-top-left-menus-list-item-child-item-grandchild-item">
<a
href="/documentations/typography/typeface.html"
class="t-navbar-top-left-menus-list-item-child-item-grandchild-item-link t-color-grey-darkest t-display-block t-body-text"
title="Typeface">
Typeface
</a>
</li>
<li class="t-navbar-top-left-menus-list-item-child-item-grandchild-item">
<a
href="/documentations/typography/hierarchy.html"
class="t-navbar-top-left-menus-list-item-child-item-grandchild-item-link t-color-grey-darkest t-display-block t-body-text"
title="Hierarchy">
Hierarchy
</a>
</li>
</ul>
</li>
<li class="t-navbar-top-left-menus-list-item-child-item">
<a
href="/documentations/assets.html/"
class="t-navbar-top-left-menus-list-item-child-item-link t-color-grey-darkest t-display-block t-body-text"
title="News & Articles">
Assets
<i class="t-icon icon-right-small"></i>
</a>
<ul class="t-navbar-top-left-menus-list-item-child-item-grandchild t-background-white t-position-absolute t-primary-box-shadow">
<li class="t-navbar-top-left-menus-list-item-child-item-grandchild-item">
<a
href="/documentations/assets/ui-icons.html"
class="t-navbar-top-left-menus-list-item-child-item-grandchild-item-link t-color-grey-darkest t-display-block t-body-text"
title="UI Icons">
UI Icons
</a>
</li>
<li class="t-navbar-top-left-menus-list-item-child-item-grandchild-item">
<a
href="/documentations/assets/content-icons.html"
class="t-navbar-top-left-menus-list-item-child-item-grandchild-item-link t-color-grey-darkest t-display-block t-body-text"
title="Content Icons">
Content Icons
</a>
</li>
<li class="t-navbar-top-left-menus-list-item-child-item-grandchild-item">
<a
href="/documentations/assets/menu-icons.html"
class="t-navbar-top-left-menus-list-item-child-item-grandchild-item-link t-color-grey-darkest t-display-block t-body-text"
title="Menu Icons">
Menu Icons
</a>
</li>
<li class="t-navbar-top-left-menus-list-item-child-item-grandchild-item">
<a
href="/documentations/assets/social-icons.html"
class="t-navbar-top-left-menus-list-item-child-item-grandchild-item-link t-color-grey-darkest t-display-block t-body-text"
title="Social Icons">
Social Icons
</a>
</li>
<li class="t-navbar-top-left-menus-list-item-child-item-grandchild-item">
<a
href="/documentations/assets/loading-spinners.html"
class="t-navbar-top-left-menus-list-item-child-item-grandchild-item-link t-color-grey-darkest t-display-block t-body-text"
title="Loading Spinners">
Loading Spinners
</a>
</li>
<li class="t-navbar-top-left-menus-list-item-child-item-grandchild-item">
<a
href="/documentations/assets/branding.html"
class="t-navbar-top-left-menus-list-item-child-item-grandchild-item-link t-color-grey-darkest t-display-block t-body-text"
title="Branding">
Branding
</a>
</li>
</ul>
</li>
<li class="t-navbar-top-left-menus-list-item-child-item">
<a
href="/documentations/elements.html/"
class="t-navbar-top-left-menus-list-item-child-item-link t-color-grey-darkest t-display-block t-body-text"
title="Top Users">
Elements
<i class="t-icon icon-right-small"></i>
</a>
<ul class="t-navbar-top-left-menus-list-item-child-item-grandchild t-background-white t-position-absolute t-primary-box-shadow">
<li class="t-navbar-top-left-menus-list-item-child-item-grandchild-item">
<a
href="/documentations/elements/button.html"
class="t-navbar-top-left-menus-list-item-child-item-grandchild-item-link t-color-grey-darkest t-display-block t-body-text"
title="Button">
Button
</a>
</li>
<li class="t-navbar-top-left-menus-list-item-child-item-grandchild-item">
<a
href="/documentations/elements/radio-button.html"
class="t-navbar-top-left-menus-list-item-child-item-grandchild-item-link t-color-grey-darkest t-display-block t-body-text"
title="Radio button">
Radio button
</a>
</li>
<li class="t-navbar-top-left-menus-list-item-child-item-grandchild-item">
<a
href="/documentations/elements/checkbox.html"
class="t-navbar-top-left-menus-list-item-child-item-grandchild-item-link t-color-grey-darkest t-display-block t-body-text"
title="Checkbox">
Checkbox
</a>
</li>
<li class="t-navbar-top-left-menus-list-item-child-item-grandchild-item">
<a
href="/documentations/elements/toggle-button.html"
class="t-navbar-top-left-menus-list-item-child-item-grandchild-item-link t-color-grey-darkest t-display-block t-body-text"
title="Toggle button">
Toggle button
</a>
</li>
<li class="t-navbar-top-left-menus-list-item-child-item-grandchild-item">
<a
href="/documentations/elements/text-input.html"
class="t-navbar-top-left-menus-list-item-child-item-grandchild-item-link t-color-grey-darkest t-display-block t-body-text"
title="Text Input">
Text Input
</a>
</li>
<li class="t-navbar-top-left-menus-list-item-child-item-grandchild-item">
<a
href="/documentations/elements/selection-input.html"
class="t-navbar-top-left-menus-list-item-child-item-grandchild-item-link t-color-grey-darkest t-display-block t-body-text"
title="Selection Input">
Selection Input
</a>
</li>
<li class="t-navbar-top-left-menus-list-item-child-item-grandchild-item">
<a
href="/documentations/elements/badge.html"
class="t-navbar-top-left-menus-list-item-child-item-grandchild-item-link t-color-grey-darkest t-display-block t-body-text"
title="Badge">
Badge
</a>
</li>
<li class="t-navbar-top-left-menus-list-item-child-item-grandchild-item">
<a
href="/documentations/elements/tags.html"
class="t-navbar-top-left-menus-list-item-child-item-grandchild-item-link t-color-grey-darkest t-display-block t-body-text"
title="Tags">
Tags
</a>
</li>
<li class="t-navbar-top-left-menus-list-item-child-item-grandchild-item">
<a
href="/documentations/elements/tags.html"
class="t-navbar-top-left-menus-list-item-child-item-grandchild-item-link t-color-grey-darkest t-display-block t-body-text"
title="Tags">
Tags
</a>
</li>
<li class="t-navbar-top-left-menus-list-item-child-item-grandchild-item">
<a
href="/documentations/elements/file-uploader.html"
class="t-navbar-top-left-menus-list-item-child-item-grandchild-item-link t-color-grey-darkest t-display-block t-body-text"
title="File uploader">
File uploader
</a>
</li>
<li class="t-navbar-top-left-menus-list-item-child-item-grandchild-item">
<a
href="/documentations/elements/image.html"
class="t-navbar-top-left-menus-list-item-child-item-grandchild-item-link t-color-grey-darkest t-display-block t-body-text"
title="Image">
Image
</a>
</li>
</ul>
</li>
<li class="t-navbar-top-left-menus-list-item-child-item">
<a
href="/documentations/components.html/"
class="t-navbar-top-left-menus-list-item-child-item-link t-color-grey-darkest t-display-block t-body-text"
title="Top Users">
Components
<i class="t-icon icon-right-small"></i>
</a>
<ul class="t-navbar-top-left-menus-list-item-child-item-grandchild t-background-white t-position-absolute t-primary-box-shadow">
<li class="t-navbar-top-left-menus-list-item-child-item-grandchild-item">
<a
href="/documentationscomponents/dropdown.html"
class="t-navbar-top-left-menus-list-item-child-item-grandchild-item-link t-color-grey-darkest t-display-block t-body-text"
title="Dropdown">
Dropdown
</a>
</li>
<li class="t-navbar-top-left-menus-list-item-child-item-grandchild-item">
<a
href="/documentationscomponents/date-picker.html"
class="t-navbar-top-left-menus-list-item-child-item-grandchild-item-link t-color-grey-darkest t-display-block t-body-text"
title="Date Picker">
Date Picker
</a>
</li>
<li class="t-navbar-top-left-menus-list-item-child-item-grandchild-item">
<a
href="/documentationscomponents/number-picker.html"
class="t-navbar-top-left-menus-list-item-child-item-grandchild-item-link t-color-grey-darkest t-display-block t-body-text"
title="Number picker">
Number picker
</a>
</li>
<li class="t-navbar-top-left-menus-list-item-child-item-grandchild-item">
<a
href="/documentationscomponents/slider.html"
class="t-navbar-top-left-menus-list-item-child-item-grandchild-item-link t-color-grey-darkest t-display-block t-body-text"
title="Slider">
Slider
</a>
</li>
<li class="t-navbar-top-left-menus-list-item-child-item-grandchild-item">
<a
href="/documentationscomponents/alert.html"
class="t-navbar-top-left-menus-list-item-child-item-grandchild-item-link t-color-grey-darkest t-display-block t-body-text"
title="Alert">
Alert
</a>
</li>
<li class="t-navbar-top-left-menus-list-item-child-item-grandchild-item">
<a
href="/documentationscomponents/notification.html"
class="t-navbar-top-left-menus-list-item-child-item-grandchild-item-link t-color-grey-darkest t-display-block t-body-text"
title="Notification">
Notification
</a>
</li>
<li class="t-navbar-top-left-menus-list-item-child-item-grandchild-item">
<a
href="/documentationscomponents/message.html"
class="t-navbar-top-left-menus-list-item-child-item-grandchild-item-link t-color-grey-darkest t-display-block t-body-text"
title="Message">
Message
</a>
</li>
<li class="t-navbar-top-left-menus-list-item-child-item-grandchild-item">
<a
href="/documentationscomponents/tooltip.html"
class="t-navbar-top-left-menus-list-item-child-item-grandchild-item-link t-color-grey-darkest t-display-block t-body-text"
title="Tooltip">
Tooltip
</a>
</li>
<li class="t-navbar-top-left-menus-list-item-child-item-grandchild-item">
<a
href="/documentationscomponents/modal.html"
class="t-navbar-top-left-menus-list-item-child-item-grandchild-item-link t-color-grey-darkest t-display-block t-body-text"
title="Modal">
Modal
</a>
</li>
<li class="t-navbar-top-left-menus-list-item-child-item-grandchild-item">
<a
href="/documentationscomponents/cards.html"
class="t-navbar-top-left-menus-list-item-child-item-grandchild-item-link t-color-grey-darkest t-display-block t-body-text"
title="Cards">
Cards
</a>
</li>
<li class="t-navbar-top-left-menus-list-item-child-item-grandchild-item">
<a
href="/documentationscomponents/panel.html"
class="t-navbar-top-left-menus-list-item-child-item-grandchild-item-link t-color-grey-darkest t-display-block t-body-text"
title="Panel">
Panel
</a>
</li>
<li class="t-navbar-top-left-menus-list-item-child-item-grandchild-item">
<a
href="/documentationscomponents/tabs.html"
class="t-navbar-top-left-menus-list-item-child-item-grandchild-item-link t-color-grey-darkest t-display-block t-body-text"
title="Tabs">
Tabs
</a>
</li>
<li class="t-navbar-top-left-menus-list-item-child-item-grandchild-item">
<a
href="/documentationscomponents/breadcrumb.html"
class="t-navbar-top-left-menus-list-item-child-item-grandchild-item-link t-color-grey-darkest t-display-block t-body-text"
title="Breadcrumb">
Breadcrumb
</a>
</li>
<li class="t-navbar-top-left-menus-list-item-child-item-grandchild-item">
<a
href="/documentationscomponents/steps.html"
class="t-navbar-top-left-menus-list-item-child-item-grandchild-item-link t-color-grey-darkest t-display-block t-body-text"
title="Steps">
Steps
</a>
</li>
<li class="t-navbar-top-left-menus-list-item-child-item-grandchild-item">
<a
href="/documentationscomponents/pagination.html"
class="t-navbar-top-left-menus-list-item-child-item-grandchild-item-link t-color-grey-darkest t-display-block t-body-text"
title="Pagination">
Pagination
</a>
</li>
</ul>
</li>
<li class="t-navbar-top-left-menus-list-item-child-item">
<a
href="/documentations/grid.html/"
class="t-navbar-top-left-menus-list-item-child-item-link t-color-grey-darkest t-display-block t-body-text"
title="Typography">
Grid
</a>
</li>
<li class="t-navbar-top-left-menus-list-item-child-item">
<a
href="/documentations/layouts.html/"
class="t-navbar-top-left-menus-list-item-child-item-link t-color-grey-darkest t-display-block t-body-text"
title="Typography">
Layouts
<i class="t-icon icon-right-small"></i>
</a>
<ul class="t-navbar-top-left-menus-list-item-child-item-grandchild t-background-white t-position-absolute t-primary-box-shadow">
<li class="t-navbar-top-left-menus-list-item-child-item-grandchild-item">
<a
href="/documentations/layouts/navbar.html"
class="t-navbar-top-left-menus-list-item-child-item-grandchild-item-link t-color-grey-darkest t-display-block t-body-text"
title="Navbar">
Navbar
</a>
</li>
<li class="t-navbar-top-left-menus-list-item-child-item-grandchild-item">
<a
href="/documentations/layouts/hero.html"
class="t-navbar-top-left-menus-list-item-child-item-grandchild-item-link t-color-grey-darkest t-display-block t-body-text"
title="Hero">
Hero
</a>
</li>
<li class="t-navbar-top-left-menus-list-item-child-item-grandchild-item">
<a
href="/documentations/layouts/carousel.html"
class="t-navbar-top-left-menus-list-item-child-item-grandchild-item-link t-color-grey-darkest t-display-block t-body-text"
title="Carousel">
Carousel
</a>
</li>
<li class="t-navbar-top-left-menus-list-item-child-item-grandchild-item">
<a
href="/documentations/layouts/image-slideshow.html"
class="t-navbar-top-left-menus-list-item-child-item-grandchild-item-link t-color-grey-darkest t-display-block t-body-text"
title="Image Slideshow">
Image Slideshow
</a>
</li>
</ul>
</li>
</ul>
</li>
<li class="t-navbar-top-left-menus-list-item t-float-left">
<a
href="/issues.html/"
class="t-navbar-top-left-menus-list-item-link t-color-grey-darkest t-text-callout"
title="Issues">
Issues
</a>
</li>
<li class="t-navbar-top-left-menus-list-item t-float-left">
<a
href="/contribute.html/"
class="t-navbar-top-left-menus-list-item-link t-color-grey-darkest t-text-callout"
title="Contribute">
Contribute
</a>
</li>
</ul>
</nav>
</div>
<div class="t-navbar-top-right t-float-right t-display-table">
<nav class="t-navbar-top-right-auth-container t-display-table-cell t-v-align-middle">
<ul class="t-navbar-top-right-menus-list t-clearfix t-no-margin t-display-table t-p-l-20">
<li class="t-navbar-top-right-menus-list-item t-display-table-cell t-hidden-mobile">
<a
href="http://"
class="t-btn t-btn-small t-btn-tertiary"
title="Download v1.0.0">Download v1.0.0
</a>
</li>
</ul>
</nav>
</div>
</div>
</header>
<!-- core nav top end -->
<!-- Begin Main Content -->
<main class="t-main-content">
<!-- section hero main -->
<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">Contribute</h1>
</div>
</div>
</div>
</section>
<!-- section hero main end -->
<div class="t-container">
<!-- Begin Getting Started -->
<section class="t-section-small">
<h2 class="t-heading-2 t-m-b-5 t-color-grey-darkest">Getting Started</h2>
<p class="t-label-text">
TRAVLR UI Kit is easy to use and offers 20 useful components for quick layout creation and 8 useful add-on plugins.
</p>
<p class="t-body-text t-m-t-32 t-m-b-32">
To get started simply include the necessary resource files and start creating. TRAVLR UI Kit has no requires any dependencies.
</p>
<div class="t-panel t-primary-box-shadow t-no-margin">
<div class="t-panel-header t-p-t-0">
<div class="t-panel-header-title">
CSS
</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="gettingStarted">
<link rel="stylesheet" href="travlr-ui.css">
</code>
</pre>
</div>
<div class="t-col-2 t-text-align-right">
<button data-clipboard-action="copy" data-clipboard-target="#gettingStarted" class="copyText t-btn t-btn-tertiary t-btn-small t-hidden-mobile">Copy to clipboard</button>
</div>
</div>
</div>
</div>
</section>
<!-- End Getting Started -->
</div>
</main>
<!-- End Main Content -->
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/9.13.1/highlight.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/clipboard.js/2.0.4/clipboard.min.js"></script>
<script>
hljs.initHighlightingOnLoad();
new ClipboardJS('.copyText');
</script>
</body>
</html>