Skip to content

Instantly share code, notes, and snippets.

@koyanloshe

koyanloshe/Components.html

Last active August 23, 2022 04:50
Show Gist options
  • Save koyanloshe/92089e1710fefd709c4ff9823a2c6156 to your computer and use it in GitHub Desktop.
Save koyanloshe/92089e1710fefd709c4ff9823a2c6156 to your computer and use it in GitHub Desktop.
Download ZIP
Design system
Raw
Components.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport"
content="width=device-width, initial-scale=1.0, maximum-scale=1.0, viewport-fit=cover">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Component list</title>
<!-- webapp meta -->
<!-- <link rel="manifest" href="manifest.json"> -->
<!-- <link rel="apple-touch-startup-image" href="./launch.png">-->
<!-- <meta name="apple-mobile-web-app-capable" content="yes">-->
<!-- <meta name="apple-mobile-web-app-status-bar-style" content="black">-->
<!-- <link rel="icon" href="img/icon.png" type="image/png">-->
<!-- <link rel="icon" sizes="192x192" href="img/icon.png">-->
<!-- <link rel="apple-touch-icon" href="img/icon.png">-->
<!-- <link rel="apple-touch-icon" href="img/icon.png">-->
<!-- <link rel="apple-touch-icon" sizes="76x76" href="img/icon-76.png">-->
<!-- <link rel="apple-touch-icon" sizes="120x120" href="img/icon-120.png">-->
<!-- <link rel="apple-touch-icon" sizes="152x152" href="img/icon-152.png">-->
<!-- SEO related meta-->
<meta name="description"
content="This is a design system that unifies the design process and style across all Kotak Securities websites">
<meta name="keywords" content="Design, system, design system, kotak securities, kotak bank">
<meta name="robots" content="index/follow">
<link rel="shortcut icon" href="favicon.ico">
<!-- Schema meta-->
<meta itemprop="name" content="A Design System">
<meta itemprop="description"
content="This is a design system that unifies the design process and style across all Kotak Securities websites">
<meta itemprop="image" content="http://staging.alokshenoy.com/Kotak/Design-System/img/logo-icon.png">
<!-- OG meta-->
<meta property="og:title" content="The Design System">
<meta property="og:image" content="http://staging.alokshenoy.com/Kotak/Design-System/img/logo-icon.png">
<meta property="og:description"
content="This is a design system that unifies the design process and style across all Kotak Securities websites">
<!-- Browser meta-->
<meta name="theme-color" content="#fff">
<meta name="msapplication-navbutton-color" content="#fff">
<link rel="stylesheet" href="style.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/prism/1.17.1/themes/prism-tomorrow.min.css" defer/>
<!--[if (lt IE 9)]>
<script src="https://polyfill.io/v3/polyfill.min.js?features=es5%2Ces6%2Cdocument.querySelector%2Cdocument.getElementsByClassName%2Cdocument.currentScript%2Cdocument.head%2Cdocument%2Cfetch%2Cdocument.visibilityState%2ClocalStorage%2CIntersectionObserver%2CIntersectionObserverEntry%2CJSON"></script>
<![endif]-->
<style>
code[class*=language-],
pre[class*=language-],
code>span {
font-size: 0.9em;
}
code>span:first-child {
margin-left: -0.8em;
}
:not(pre)>code[class*=language-],
pre[class*=language-] {
background-color: transparent;
filter: brightness(0.8);
}
</style>
<script src="https://cdnjs.cloudflare.com/ajax/libs/prism/1.17.1/prism.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/prism/1.17.1/plugins/autoloader/prism-autoloader.min.js">
</script>
<script
src="https://cdnjs.cloudflare.com/ajax/libs/prism/1.17.1/plugins/normalize-whitespace/prism-normalize-whitespace.min.js">
</script>
</head>
<body>
<nav>
<div class="container-fluid navbar-fixed-top bg-white" id="nav-bar">
<div class="row">
<div class="col-xl-offset-0 col-xl-2 col-md-offset-0 col-md-2 col-sm-4 col-xm-4 col-xs-10">
<a href="index.html" aria-label="home-page">
<svg width="100%" height="100%" viewBox="0 0 593 125" version="1.1"
xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"
xml:space="preserve" xmlns:serif="http://www.serif.com/"
style="fill-rule:evenodd;clip-rule:evenodd;stroke-linejoin:round;stroke-miterlimit:1.41421;">
<style>
.blue {
fill: #003974;
}
.red {
fill: #ed1d24;
}
@media (prefers-color-scheme: dark) {
.blue {
fill: #ffffff;
}
.red {
fill: #ffffff;
}
}
</style>
<g>
<path
d="M12.812,62.462c0,-26.85 25.31,-48.618 56.53,-48.618c31.22,0 56.527,21.768 56.527,48.618c0,26.85 -25.307,48.616 -56.527,48.616c-31.22,0 -56.53,-21.766 -56.53,-48.616"
style="fill:#003974;fill-rule:nonzero;"></path>
<path d="M61.479,29.571l13.131,-4.34l0.067,70.997l-13.246,4.439l0.048,-71.096Z"
style="fill:#ed1d24;fill-rule:nonzero;"></path>
<path
d="M111.851,67.473c-1.23,10.162 -6.925,20.416 -19.365,20.437c-7.263,0.013 -12.937,-4.958 -16.862,-11.045l0,-7.044c4.916,2.442 9.509,5.06 15.082,5.14c6.871,0.103 13.078,-2.54 15.646,-7.488l5.499,0Zm-41.579,6.377c-5.707,6.877 -11.221,13.906 -21.554,13.906c-14.593,0 -21.514,-14.109 -21.514,-25.907c0,-11.337 5.411,-24.756 19.626,-24.756c6.165,0 12.106,3.774 15.642,7.764l-0.009,9.622c-2.956,-1.988 -9.579,-3.941 -13.905,-4.015c-9.012,-0.15 -16.964,3.759 -16.823,12.655c0.095,6.129 6.162,10.295 12.202,10.295c9.253,0 14.854,-8.449 19.539,-14.864c1.309,-1.678 4.993,-6.606 5.567,-7.395c5.201,-7.269 11.222,-13.905 21.555,-13.905c12.17,0 19.002,9.809 20.938,19.911l-5.49,0c-2.209,-3.273 -6.46,-5.279 -10.65,-5.279c-9.562,0 -15.276,8.799 -20.058,15.276c0,0 -3.718,5.07 -5.066,6.692"
style="fill:#fff;fill-rule:nonzero;"></path>
</g>
<g>
<path class="red"
d="M195.835,89.654c12.721,0 22.405,-7.395 22.405,-20.111c0,-12.793 -9.684,-20.189 -22.405,-20.189c-12.717,0 -22.406,7.396 -22.406,20.189c0,12.716 9.689,20.111 22.406,20.111m0,-9.315c-6.14,0 -8.652,-5.1 -8.652,-10.796c0,-5.768 2.512,-10.871 8.652,-10.871c6.137,0 8.651,5.103 8.651,10.871c0,5.696 -2.514,10.796 -8.651,10.796"
style="fill-rule:nonzero;"></path>
<path class="red"
d="M218.02,59.929l7.613,0l0,15.675c0,9.165 2.886,14.416 14.792,14.416c3.326,0 5.839,-0.439 8.351,-0.74l-0.441,-8.651c-1.331,0.221 -2.736,0.522 -4.065,0.522c-4.219,0 -5.326,-2.371 -5.326,-7.027l0,-14.195l9.319,0l0,-9.32l-9.319,0l-0.008,-13.322l-13.079,4.67l0,8.652l-7.837,0l0,9.32Z"
style="fill-rule:nonzero;"></path>
<path class="red"
d="M295.838,89.135l13.311,0l0,-19.08l0.147,0l10.648,19.08l16.12,0l-14.494,-20.851l13.386,-17.673l-14.57,0l-11.09,16.193l-0.147,0l0,-29.469l-13.311,4.612l0,47.188Z"
style="fill-rule:nonzero;"></path>
<path class="red"
d="M138.994,88.65l13.31,0l0,-19.08l0.148,0l10.646,19.08l16.119,0l-14.492,-20.851l13.384,-17.673l-14.567,0l-11.09,16.193l-0.148,0l0,-29.469l-13.31,4.393l0,47.407Z"
style="fill-rule:nonzero;"></path>
<path class="red"
d="M291.115,89.24c-0.599,-3.068 -0.749,-6.137 -0.749,-9.204l0,-14.518c0,-11.897 -8.606,-16.164 -18.561,-16.164c-5.763,0 -10.775,0.821 -15.565,2.768l0.223,9.129c3.743,-2.095 8.084,-2.919 12.424,-2.919c4.865,0 8.833,1.423 8.906,6.734c-1.722,-0.297 -4.116,-0.52 -6.286,-0.52c-7.185,0 -20.131,1.42 -20.131,13.317c0,8.46 6.884,12.274 14.594,12.274c5.537,0 9.278,-2.168 12.347,-7.034l0.15,0c0,2.023 0.221,4.045 0.296,6.137l12.352,0Zm-27.168,-12.345c0,-3.746 3.594,-5.165 8.159,-5.165c2.021,0 3.965,0.148 5.687,0.223c0,4.563 -3.217,9.207 -8.306,9.207c-3.145,0 -5.54,-1.575 -5.54,-4.265"
style="fill-rule:nonzero;"></path>
</g>
<g>
<path class="blue"
d="M362.647,83.997c2.288,1.454 4.965,2.288 8.591,2.288c4.801,0 8.758,-2.458 8.758,-7.975c0,-7.648 -17.848,-8.593 -17.848,-18.803c0,-6.245 5.464,-10.153 12.326,-10.153c1.898,0 4.962,0.28 7.64,1.284l-0.613,3.515c-1.726,-0.952 -4.458,-1.451 -7.082,-1.451c-4.018,0 -8.425,1.672 -8.425,6.695c0,7.809 17.85,7.864 17.85,19.248c0,7.859 -6.748,10.987 -12.772,10.987c-3.794,0 -6.752,-0.781 -8.814,-1.674l0.389,-3.961Z"
style="fill-rule:nonzero;"></path>
<path class="blue"
d="M410.285,88.066c-2.454,1.008 -5.636,1.566 -8.255,1.566c-9.427,0 -12.944,-6.361 -12.944,-14.895c0,-8.701 4.799,-14.896 11.995,-14.896c8.034,0 11.323,6.47 11.323,14.115l0,1.784l-19.468,0c0,6.022 3.237,10.878 9.374,10.878c2.562,0 6.3,-1.057 7.975,-2.118l0,3.566Zm-1.728,-15.339c0,-4.961 -2.01,-9.871 -7.255,-9.871c-5.186,0 -8.366,5.185 -8.366,9.871l15.621,0Z"
style="fill-rule:nonzero;"></path>
<path class="blue"
d="M437.617,64.306c-1.895,-0.836 -4.183,-1.451 -6.081,-1.451c-6.861,0 -10.709,4.965 -10.709,11.882c0,6.471 3.903,11.883 10.318,11.883c2.233,0 4.297,-0.503 6.417,-1.286l0.334,3.294c-2.399,0.837 -4.63,1.001 -7.309,1.001c-9.147,0 -13.611,-6.97 -13.611,-14.892c0,-8.76 5.636,-14.895 14.059,-14.895c3.403,0 5.858,0.782 6.861,1.117l-0.279,3.347Z"
style="fill-rule:nonzero;"></path>
<path class="blue"
d="M466.066,82.265c0,2.178 0,4.411 0.221,6.695l-3.403,0l0,-5.076l-0.11,0c-1.17,2.569 -3.292,5.748 -9.206,5.748c-7.027,0 -9.703,-4.684 -9.703,-10.935l0,-18.188l3.513,0l0,17.298c0,5.355 1.897,8.811 6.75,8.811c6.415,0 8.421,-5.633 8.421,-10.374l0,-15.735l3.517,0l0,21.756Z"
style="fill-rule:nonzero;"></path>
<path class="blue"
d="M474.876,66.873c0,-3.129 0,-4.3 -0.221,-6.362l3.513,0l0,5.466l0.111,0c1.284,-3.181 3.682,-6.135 7.31,-6.135c0.834,0 1.839,0.166 2.452,0.334l0,3.681c-0.724,-0.223 -1.673,-0.334 -2.566,-0.334c-5.579,0 -7.086,6.251 -7.086,11.382l0,14.059l-3.513,0l0,-22.091Z"
style="fill-rule:nonzero;"></path>
<path class="blue"
d="M496.967,52.926l-3.513,0l0,-4.684l3.513,0l0,4.684Zm-3.515,7.585l3.511,0l0,28.453l-3.511,0l0,-28.453Z"
style="fill-rule:nonzero;"></path>
<path class="blue"
d="M518.107,63.525l-6.472,0l0,18.405c0,2.57 0.949,4.69 3.794,4.69c1.337,0 2.233,-0.284 3.235,-0.668l0.223,2.897c-0.839,0.336 -2.565,0.78 -4.295,0.78c-6.249,0 -6.474,-4.295 -6.474,-9.479l0,-16.625l-5.576,0l0,-3.016l5.576,0l0,-6.857l3.517,-1.23l0,8.087l6.472,0l0,3.016Z"
style="fill-rule:nonzero;"></path>
<path class="blue"
d="M527.921,52.926l-3.513,0l0,-4.684l3.513,0l0,4.684Zm-3.513,7.585l3.513,0l0,28.453l-3.513,0l0,-28.453Z"
style="fill-rule:nonzero;"></path>
<path class="blue"
d="M555.869,88.066c-2.454,1.008 -5.636,1.566 -8.255,1.566c-9.428,0 -12.943,-6.361 -12.943,-14.895c0,-8.701 4.798,-14.896 11.994,-14.896c8.034,0 11.322,6.47 11.322,14.115l0,1.784l-19.467,0c0,6.022 3.237,10.878 9.374,10.878c2.564,0 6.3,-1.057 7.975,-2.118l0,3.566Zm-1.73,-15.339c0,-4.961 -2.008,-9.871 -7.253,-9.871c-5.186,0 -8.366,5.185 -8.366,9.871l15.619,0Z"
style="fill-rule:nonzero;"></path>
<path class="blue"
d="M562.505,84.833c2.118,1.06 4.687,1.787 7.417,1.787c3.349,0 6.306,-1.84 6.306,-5.077c0,-6.754 -13.666,-5.689 -13.666,-13.944c0,-5.638 4.572,-7.757 9.257,-7.757c1.507,0 4.52,0.334 7.031,1.285l-0.336,3.069c-1.842,-0.838 -4.351,-1.341 -6.3,-1.341c-3.628,0 -6.141,1.114 -6.141,4.744c0,5.3 14.005,4.627 14.005,13.944c0,6.02 -5.635,8.086 -9.931,8.086c-2.734,0 -5.468,-0.334 -7.976,-1.34l0.334,-3.456Z"
style="fill-rule:nonzero;"></path>
</g>
</svg>
</a>
</div>
<div class="col-xl-8 col-md-10 col-sm-8 col-xm-8 col-xs-2" data-menu>
</div>
</div>
<div class="row">
<div class="col-sm-12 pad-lr-zero" data-progress-indicator></div>
</div>
</div>
</nav>
<main class="pad-env-r-zero">
<div class="container-fluid">
<div class="row">
<div class="col-sm-2 col-xm-2 col-xs-8">
<aside class="fixed is-menu bg-white">
<ul class="list--basic">
<li class="tc-ter-4 fw-light text-left bg-ter-2-onhover" href="#snackbar">
<a href="#colors" aria-label="colors" class="width100">
<p class="mar-zero text-left fw-med">
Colors
</p>
</a>
</li>
<li class="tc-ter-4 fw-light text-left bg-ter-2-onhover pad-l-xs">
<a href="#primary-colors" aria-label="primary colors" class="width100">
<p class="mar-zero text-left">
Primary color palette
</p>
</a>
</li>
<li class="tc-ter-4 fw-light text-left bg-ter-2-onhover pad-l-xs">
<a href="#secondary-colors" aria-label="secondary colors" class="width100">
<p class="mar-zero text-left">
Secondary color palette
</p>
</a>
</li>
<li class="tc-ter-4 fw-light text-left bg-ter-2-onhover pad-l-xs">
<a href="#tertiary-colors" aria-label="tertiary colors" class="width100">
<p class="mar-zero text-left">
Tertiary color palette
</p>
</a>
</li>
<li class="tc-ter-4 fw-light text-left bg-ter-2-onhover pad-l-xs">
<a href="#alternative-colors" aria-label="alternative colors" class="width100">
<p class="mar-zero text-left">
Alternative color palette
</p>
</a>
</li>
<li class="tc-ter-4 fw-light text-left bg-ter-2-onhover pad-l-xs">
<a href="#fallback-colors" aria-label="fallback colors" class="width100">
<p class="mar-zero text-left">
Fallback color palette
</p>
</a>
</li>
<li class="tc-ter-4 fw-light text-left bg-ter-2-onhover pad-l-xs">
<a href="#gradient-colors" aria-label="gradient colors" class="width100">
<p class="mar-zero text-left">
Gradient color palette
</p>
</a>
</li>
<!-- <hr class="br-ter-2">-->
<li class="tc-ter-4 fw-light text-left bg-ter-2-onhover">
<a href="#typography" aria-label="typography" class="width100">
<p class="mar-zero text-left fw-med">
Typography
</p>
</a>
</li>
<!-- <hr class="br-ter-2">-->
<li class="tc-ter-4 fw-light text-left bg-ter-2-onhover">
<a href="#components" aria-label="components" class="width100">
<p class="mar-zero text-left fw-med">
Components
</p>
</a>
</li>
<li class="tc-ter-4 fw-light text-left bg-ter-2-onhover pad-l-xs">
<a href="#buttons" aria-label="buttons" class="width100">
<p class="mar-zero text-left">
Buttons
</p>
</a>
</li>
<li class="tc-ter-4 fw-light text-left bg-ter-2-onhover pad-l-xs">
<a href="#lists" aria-label="lists" class="width100">
<p class="mar-zero text-left">
Lists
</p>
</a>
</li>
<li class="tc-ter-4 fw-light text-left bg-ter-2-onhover pad-l-xs">
<a href="#text-blocks" aria-label="text blocks" class="width100">
<p class="mar-zero text-left">
Text Blocks
</p>
</a>
</li>
<li class="tc-ter-4 fw-light text-left bg-ter-2-onhover pad-l-xs">
<a href="#cards" aria-label="cards" class="width100">
<p class="mar-zero text-left">
Cards
</p>
</a>
</li>
<li class="tc-ter-4 fw-light text-left bg-ter-2-onhover pad-l-xs">
<a href="#forms" aria-label="forms" class="width100">
<p class="mar-zero text-left">
Forms & Input types
</p>
</a>
</li>
<li class="tc-ter-4 fw-light text-left bg-ter-2-onhover pad-l-xs">
<a href="#popups" aria-label="popups" class="width100">
<p class="mar-zero text-left">
Popups
</p>
</a>
</li>
<li class="tc-ter-4 fw-light text-left bg-ter-2-onhover pad-l-xs">
<a href="#image-decoration" aria-label="image decoration" class="width100">
<p class="mar-zero text-left">
Image Decoration
</p>
</a>
</li>
<li class="tc-ter-4 fw-light text-left bg-ter-2-onhover pad-l-xs">
<a href="#snackbar" aria-label="snackbar" class="width100">
<p class="mar-zero text-left">
Snack-bar
</p>
</a>
</li>
</ul>
</aside>
</div>
<div class="col-sm-offset-2 col-sm-10 col-xm-offset-2 col-xm-10 col-xs-12">
<!-- Colors -->
<div class="container-fluid pad-t-sm" id="colors">
<div class="row">
<div class="col-sm-12">
<h2 class="tc-ter-4">
Colors
</h2>
</div>
</div>
<hr class="mar-t-zero mar-b-sm br-ter-4">
<div class="row">
<div class="col-sm-12" id="primary-colors">
<h3 class="tc-ter-4 pad-b-xs">
Primary color palette
</h3>
</div>
</div>
<div class="row">
<div class="col-xl-2 col-sm-2 col-xm-3 col-xs-6">
<div class="card bs-3 bg-pr-1 mar-b-xs" data-equalizer="colors">
<p class="tc-white xmd pad-t-xsm pad-r-xsm pad-b-xsm pad-l-xsm">
Primary <br>Color <br>1
</p>
<p class="tc-white xxs pad-t-xsm pad-r-xsm pad-b-xsm pad-l-xsm">
R243
<br>G112
<br>B50
<br>
<br>#F37032
<br>.bg-pr-1
</p>
</div>
</div>
<div class="col-xl-2 col-sm-2 col-xm-3 col-xs-6">
<div class="card bs-3 bg-pr-2 mar-b-xs" data-equalizer="colors">
<p class="tc-white xmd pad-t-xsm pad-r-xsm pad-b-xsm pad-l-xsm">
Primary <br>Color <br>2
</p>
<p class="tc-white xxs pad-t-xsm pad-r-xsm pad-b-xsm pad-l-xsm">
R241
<br>G90
<br>B34
<br>
<br>#F15A22
<br>.bg-pr-2
</p>
</div>
</div>
<div class="col-xl-2 col-sm-2 col-xm-3 col-xs-6">
<div class="card bs-3 bg-pr-3 mar-b-xs" data-equalizer="colors">
<p class="tc-white xmd pad-t-xsm pad-r-xsm pad-b-xsm pad-l-xsm">
Primary <br>Color <br>3
</p>
<p class="tc-white xxs pad-t-xsm pad-r-xsm pad-b-xsm pad-l-xsm">
R239
<br>G65
<br>B35
<br>
<br>#EF4123
<br>.bg-pr-3
</p>
</div>
</div>
<div class="col-xl-2 col-sm-2 col-xm-3 col-xs-6">
<div class="card bs-3 bg-pr-4 mar-b-xs" data-equalizer="colors">
<p class="tc-white xmd pad-t-xsm pad-r-xsm pad-b-xsm pad-l-xsm">
Primary <br>Color <br>4
</p>
<p class="tc-white xxs pad-t-xsm pad-r-xsm pad-b-xsm pad-l-xsm">
R237
<br>G28
<br>B36
<br>
<br>#ED1C24
<br>.bg-pr-4
</p>
</div>
</div>
<div class="col-xl-2 col-sm-2 col-xm-3 col-xs-6">
<div class="card bs-3 bg-pr-5 mar-b-xs" data-equalizer="colors">
<p class="tc-white xmd pad-t-xsm pad-r-xsm pad-b-xsm pad-l-xsm">
Primary <br>Color <br>5
</p>
<p class="tc-white xxs pad-t-xsm pad-r-xsm pad-b-xsm pad-l-xsm">
R197
<br>G20
<br>B37
<br>
<br>#C41425
<br>.bg-pr-5
</p>
</div>
</div>
</div>
<div class="row">
<div class="col-sm-12" id="secondary-colors">
<h3 class="tc-ter-4 pad-t-sm pad-b-xs">
Secondary color palette
</h3>
</div>
</div>
<div class="row">
<div class="col-xl-2 col-sm-2 col-xm-3 col-xs-6">
<div class="card bs-3 bg-sc-1 mar-b-xs" data-equalizer="colors">
<p class="tc-sc-3 xmd pad-t-xsm pad-r-xsm pad-b-xsm pad-l-xsm">
Secondary <br>Color <br>1
</p>
<p class="tc-sc-3 xxs pad-t-xsm pad-r-xsm pad-b-xsm pad-l-xsm">
R179
<br>G229
<br>B255
<br>
<br>#B3E5FF
<br>.bg-sc-1
</p>
</div>
</div>
<div class="col-xl-2 col-sm-2 col-xm-3 col-xs-6">
<div class="card bs-3 bg-sc-2 mar-b-xs" data-equalizer="colors">
<p class="tc-white xmd pad-t-xsm pad-r-xsm pad-b-xsm pad-l-xsm">
Secondary <br>Color <br>2
</p>
<p class="tc-white xxs pad-t-xsm pad-r-xsm pad-b-xsm pad-l-xsm">
R83
<br>G183
<br>B232
<br>
<br>#53B7E8
<br>.bg-sc-2
</p>
</div>
</div>
<div class="col-xl-2 col-sm-2 col-xm-3 col-xs-6">
<div class="card bs-3 bg-sc-3 mar-b-xs" data-equalizer="colors">
<p class="tc-white xmd pad-t-xsm pad-r-xsm pad-b-xsm pad-l-xsm">
Secondary <br>Color <br>3
</p>
<p class="tc-white xxs pad-t-xsm pad-r-xsm pad-b-xsm pad-l-xsm">
R72
<br>G124
<br>B182
<br>
<br>#487CB6
<br>.bg-sc-3
</p>
</div>
</div>
<div class="col-xl-2 col-sm-2 col-xm-3 col-xs-6">
<div class="card bs-3 bg-sc-4 mar-b-xs" data-equalizer="colors">
<p class="tc-white xmd pad-t-xsm pad-r-xsm pad-b-xsm pad-l-xsm">
Secondary <br>Color <br>4
</p>
<p class="tc-white xxs pad-t-xsm pad-r-xsm pad-b-xsm pad-l-xsm">
R11
<br>G77
<br>B136
<br>
<br>#0B4D88
<br>.bg-sc-4
</p>
</div>
</div>
<div class="col-xl-2 col-sm-2 col-xm-3 col-xs-6">
<div class="card bs-3 bg-sc-5 mar-b-xs" data-equalizer="colors">
<p class="tc-white xmd pad-t-xsm pad-r-xsm pad-b-xsm pad-l-xsm">
Secondary <br>Color <br>5
</p>
<p class="tc-white xxs pad-t-xsm pad-r-xsm pad-b-xsm pad-l-xsm">
R0
<br>G51
<br>B102
<br>
<br>#003366
<br>.bg-sc-5
</p>
</div>
</div>
</div>
<div class="row">
<div class="col-sm-12" id="tertiary-colors">
<h3 class="tc-ter-4 pad-t-sm pad-b-xs">
Tertiary color palette
</h3>
</div>
</div>
<div class="row">
<div class="col-xl-2 col-sm-2 col-xm-3 col-xs-6">
<div class="card bs-3 bg-ter-1 mar-b-xs override-dark" data-equalizer="colors">
<p class="tc-ter-4 xmd pad-t-xsm pad-r-xsm pad-b-xsm pad-l-xsm">
Tertiary <br>Color <br>1
</p>
<p class="tc-ter-4 xxs pad-t-xsm pad-r-xsm pad-b-xsm pad-l-xsm">
R250
<br>G250
<br>B250
<br>
<br>#FAFAFA
<br>.bg-ter-1
</p>
</div>
</div>
<div class="col-xl-2 col-sm-2 col-xm-3 col-xs-6">
<div class="card bs-3 bg-ter-2 mar-b-xs override-dark" data-equalizer="colors">
<p class="tc-ter-4 xmd pad-t-xsm pad-r-xsm pad-b-xsm pad-l-xsm">
Tertiary <br>Color <br>2
</p>
<p class="tc-ter-4 xxs pad-t-xsm pad-r-xsm pad-b-xsm pad-l-xsm">
R191
<br>G191
<br>B191
<br>
<br>#EEEEEE
<br>.bg-ter-2
</p>
</div>
</div>
<div class="col-xl-2 col-sm-2 col-xm-3 col-xs-6">
<div class="card bs-3 bg-ter-3 mar-b-xs" data-equalizer="colors">
<p class="tc-white xmd pad-t-xsm pad-r-xsm pad-b-xsm pad-l-xsm">
Tertiary <br>Color <br>3
</p>
<p class="tc-white xxs pad-t-xsm pad-r-xsm pad-b-xsm pad-l-xsm">
R141
<br>G141
<br>B141
<br>
<br>#8D8D8D
<br>.bg-ter-3
</p>
</div>
</div>
<div class="col-xl-2 col-sm-2 col-xm-3 col-xs-6">
<div class="card bs-3 bg-ter-4 mar-b-xs" data-equalizer="colors">
<p class="tc-white xmd pad-t-xsm pad-r-xsm pad-b-xsm pad-l-xsm">
Tertiary <br>Color <br>4
</p>
<p class="tc-white xxs pad-t-xsm pad-r-xsm pad-b-xsm pad-l-xsm">
R68
<br>G70
<br>B74
<br>
<br>#44464A
<br>.bg-ter-4
</p>
</div>
</div>
<div class="col-xl-2 col-sm-2 col-xm-3 col-xs-6">
<div class="card bs-3 bg-ter-4 mar-b-xs" data-equalizer="colors">
<p class="tc-white xmd pad-t-xsm pad-r-xsm pad-b-xsm pad-l-xsm">
Tertiary <br>Color <br>5
</p>
<p class="tc-white xxs pad-t-xsm pad-r-xsm pad-b-xsm pad-l-xsm">
R26
<br>G26
<br>B26
<br>
<br>#1A1A1A
<br>.bg-ter-5
</p>
</div>
</div>
</div>
<div class="row">
<div class="col-sm-12" id="alternative-colors">
<h3 class="tc-ter-4 pad-t-sm pad-b-xs">
Alternative color palette
</h3>
</div>
</div>
<div class="row">
<div class="col-xl-2 col-sm-2 col-xm-3 col-xs-6">
<div class="card bs-3 bg-alt-1 mar-b-xs" data-equalizer="colors">
<p class="tc-white xmd pad-t-xsm pad-r-xsm pad-b-xsm pad-l-xsm">
Alternative <br>Color <br>1
</p>
<p class="tc-white xxs pad-t-xsm pad-r-xsm pad-b-xsm pad-l-xsm">
R91
<br>G206
<br>B139
<br>
<br>#5BCE8B
<br>.bg-alt-1
</p>
</div>
</div>
<div class="col-xl-2 col-sm-2 col-xm-3 col-xs-6">
<div class="card bs-3 bg-alt-2 mar-b-xs" data-equalizer="colors">
<p class="tc-ter-4 xmd pad-t-xsm pad-r-xsm pad-b-xsm pad-l-xsm">
Alternative <br>Color <br>2
</p>
<p class="tc-ter-4 xxs pad-t-xsm pad-r-xsm pad-b-xsm pad-l-xsm">
R255
<br>G211
<br>B102
<br>
<br>#FFD366
<br>.bg-alt-2
</p>
</div>
</div>
<div class="col-xl-2 col-sm-2 col-xm-3 col-xs-6">
<div class="card bs-3 bg-alt-3 mar-b-xs" data-equalizer="colors">
<p class="tc-white xmd pad-t-xsm pad-r-xsm pad-b-xsm pad-l-xsm">
Alternative <br>Color <br>3
</p>
<p class="tc-white xxs pad-t-xsm pad-r-xsm pad-b-xsm pad-l-xsm">
R101
<br>G102
<br>B145
<br>
<br>#656691
<br>.bg-alt-3
</p>
</div>
</div>
<div class="col-xl-2 col-sm-2 col-xm-3 col-xs-6">
<div class="card bs-3 bg-alt-4 mar-b-xs" data-equalizer="colors">
<p class="tc-ter-4 xmd pad-t-xsm pad-r-xsm pad-b-xsm pad-l-xsm">
Alternative <br>Color <br>4
</p>
<p class="tc-ter-4 xxs pad-t-xsm pad-r-xsm pad-b-xsm pad-l-xsm">
R210
<br>G212
<br>B222
<br>
<br>#D2D4DE
<br>.bg-alt-4
</p>
</div>
</div>
</div>
<div class="row">
<div class="col-sm-12" id="fallback-colors">
<h3 class="tc-ter-4 pad-t-sm pad-b-xs">
Fallback color palette
</h3>
</div>
</div>
<div class="row">
<div class="col-xl-2 col-sm-2 col-xm-3 col-xs-6">
<div class="card bs-3 bg-fb-1 mar-b-xs" data-equalizer="colors">
<p class="tc-ter-4 xmd pad-t-xsm pad-r-xsm pad-b-xsm pad-l-xsm">
Fallback <br>Color <br>1
</p>
<p class="tc-ter-4 xxs pad-t-xsm pad-r-xsm pad-b-xsm pad-l-xsm">
R210
<br>G222
<br>B38
<br>
<br>#C1CD23
<br>.bg-fb-1
</p>
</div>
</div>
<div class="col-xl-2 col-sm-2 col-xm-3 col-xs-6">
<div class="card bs-3 bg-fb-2 mar-b-xs" data-equalizer="colors">
<p class="tc-ter-4 xmd pad-t-xsm pad-r-xsm pad-b-xsm pad-l-xsm">
Fallback <br>Color <br>2
</p>
<p class="tc-ter-4 xxs pad-t-xsm pad-r-xsm pad-b-xsm pad-l-xsm">
R253
<br>G187
<br>B48
<br>
<br>#FFCC33
<br>.bg-fb-2
</p>
</div>
</div>
<div class="col-xl-2 col-sm-2 col-xm-3 col-xs-6">
<div class="card bs-3 bg-fb-3 mar-b-xs" data-equalizer="colors">
<p class="tc-white xmd pad-t-xsm pad-r-xsm pad-b-xsm pad-l-xsm">
Fallback <br>Color <br>3
</p>
<p class="tc-white xxs pad-t-xsm pad-r-xsm pad-b-xsm pad-l-xsm">
R130
<br>G119
<br>B45
<br>
<br>#82772D
<br>.bg-fb-3
</p>
</div>
</div>
<div class="col-xl-2 col-sm-2 col-xm-3 col-xs-6">
<div class="card bs-3 bg-fb-4 mar-b-xs" data-equalizer="colors">
<p class="tc-white xmd pad-t-xsm pad-r-xsm pad-b-xsm pad-l-xsm">
Fallback <br>Color <br>4
</p>
<p class="tc-white xxs pad-t-xsm pad-r-xsm pad-b-xsm pad-l-xsm">
R0
<br>G85
<br>B104
<br>
<br>#005568
<br>.bg-fb-4
</p>
</div>
</div>
</div>
<div class="row">
<div class="col-sm-12" id="gradient-colors">
<h3 class="tc-ter-4 pad-t-sm pad-b-xs">
Gradient color palette
</h3>
</div>
</div>
<div class="row">
<div class="col-xl-2 col-sm-2 col-xm-3 col-xs-6">
<div class="card bs-3 bg-gr-1 mar-b-xs" data-equalizer="colors">
<p class="tc-white xmd pad-t-xsm pad-r-xsm pad-b-xsm pad-l-xsm">
Gradient 1
</p>
<p class="tc-white xxs pad-t-xsm pad-r-xsm pad-b-xsm pad-l-xsm">
-45 degrees
<br>Secondary
<br>Color 2
<br>to
<br>Color 4
<br>.bg-gr-1
</p>
</div>
</div>
<div class="col-xl-2 col-sm-2 col-xm-3 col-xs-6">
<div class="card bs-3 bg-gr-2 mar-b-xs" data-equalizer="colors">
<p class="tc-white xmd pad-t-xsm pad-r-xsm pad-b-xsm pad-l-xsm">
Gradient 2
</p>
<p class="tc-white xxs pad-t-xsm pad-r-xsm pad-b-xsm pad-l-xsm">
-45 degrees
<br>Primary
<br>Color 4
<br>to
<br>Color 5
<br>.bg-gr-2
</p>
</div>
</div>
<div class="col-xl-2 col-sm-2 col-xm-3 col-xs-6">
<div class="card bs-3 bg-gr-3 mar-b-xs" data-equalizer="colors">
<p class="tc-white xmd pad-t-xsm pad-r-xsm pad-b-xsm pad-l-xsm">
Gradient 3
</p>
<p class="tc-white xxs pad-t-xsm pad-r-xsm pad-b-xsm pad-l-xsm">
-45 degrees
<br>Primary
<br>Color 2
<br>to
<br>Color 4
<br>.bg-gr-3
</p>
</div>
</div>
<div class="col-xl-2 col-sm-2 col-xm-3 col-xs-6">
<div class="card bs-3 bg-gr-4 mar-b-xs" data-equalizer="colors">
<p class="tc-white xmd pad-t-xsm pad-r-xsm pad-b-xsm pad-l-xsm">
Gradient 4
</p>
<p class="tc-white xxs pad-t-xsm pad-r-xsm pad-b-xsm pad-l-xsm">
-45 degrees
<br>Primary
<br>Color 1
<br>to
<br>Color 4
<br>.bg-gr-4
</p>
</div>
</div>
</div>
<div class="row">
<div class="col-sm-12" id="dark-colors">
<h3 class="tc-ter-4 pad-t-sm pad-b-xs">
Dark color palette
</h3>
</div>
</div>
<div class="row">
<div class="col-xl-2 col-sm-2 col-xm-3 col-xs-6">
<div class="card bs-3 bg-dark-1 mar-b-xs" data-equalizer="colors">
<p class="tc-white xmd pad-t-xsm pad-r-xsm pad-b-xsm pad-l-xsm">
Dark<br>Color<br>1
</p>
<p class="tc-white xxs pad-t-xsm pad-r-xsm pad-b-xsm pad-l-xsm">
R130
<br>G119
<br>B45
<br>
<br>#82772D
<br>.bg-dark-1
</p>
</div>
</div>
<div class="col-xl-2 col-sm-2 col-xm-3 col-xs-6">
<div class="card bs-3 bg-dark-2 mar-b-xs" data-equalizer="colors">
<p class="tc-white xmd pad-t-xsm pad-r-xsm pad-b-xsm pad-l-xsm">
Dark<br>Color<br>2
</p>
<p class="tc-white xxs pad-t-xsm pad-r-xsm pad-b-xsm pad-l-xsm">
R130
<br>G119
<br>B45
<br>
<br>#82772D
<br>.bg-dark-2
</p>
</div>
</div>
<div class="col-xl-2 col-sm-2 col-xm-3 col-xs-6">
<div class="card bs-3 bg-dark-3 mar-b-xs" data-equalizer="colors">
<p class="tc-white xmd pad-t-xsm pad-r-xsm pad-b-xsm pad-l-xsm">
Dark<br>Color<br>3
</p>
<p class="tc-white xxs pad-t-xsm pad-r-xsm pad-b-xsm pad-l-xsm">
R130
<br>G119
<br>B45
<br>
<br>#82772D
<br>.bg-dark-3
</p>
</div>
</div>
</div>
</div>
<!-- Typography -->
<div class="container-fluid pad-t-sm" id="typography">
<div class="row">
<div class="col-sm-12">
<h2 class="tc-ter-4">
Typography
</h2>
</div>
</div>
<hr class="mar-t-zero mar-b-sm br-ter-4">
<div class="row">
<div class="col-sm-6">
<h3 class="tc-ter-4">
Recommended Hierarchy
</h3>
<p class="tc-ter-4 pad-b-sm">
A clean, crisp typeface with a few weights & good visual hierarchy
The brand logo uses Frutiger. It isn't desirable to use a premium font on the web.
It
adds
considerably to the load time and has compatibility issues on some browsers. A web
font
which is a
close visual match is Google's very own Roboto. It is well handled across devices
and
can be used in
e-mailers without much tinkering! Those who are type lovers know how that's an
achievement in itself.
</p>
<h3 class="tc-ter-4">Font weights</h3>
<p class="tc-ter-4 pad-b-sm">
We have identified that Light, Regular and Medium are ideal font weights. The lower
font
weights
are pleasing to the eye. The heavier font weights convey messages loud and clear.
This
distinction
will remain the basis of its use.
Line height for all headings is 120% the height of the typeface. For body text the
line-height is 140%
ie. closer to the value of pi. This makes the text appear "just right".
</p>
</div>
<div class="col-sm-offset-1 col-sm-5 pad-b-sm">
<h1 class="tc-ter-4">
Heading h1
</h1>
<h2 class="tc-sc-4">
Heading h2
</h2>
<h3 class="tc-ter-4">
Heading h3
</h3>
<h4 class="tc-ter-3 text-uppercase fw-med">
Heading h4
</h4>
<h5 class="tc-ter-4">
Heading h5
</h5>
<h6 class="tc-ter-4">
Heading h6
</h6>
<p class=" tc-ter-4">
Paragraph p
</p>
<p class="xmd tc-ter-4">
Paragraph p.xmd
</p>
<p class="xsm tc-ter-3">
Paragraph p.xsm
</p>
<p class="xxs tc-ter-3">
Paragraph p.xxs
</p>
</div>
</div>
</div>
<!-- Components -->
<div class="container-fluid pad-t-sm" id="components">
<div class="row">
<div class="col-sm-12">
<h2 class="tc-ter-4">
Components
</h2>
</div>
</div>
<hr class="mar-t-zero mar-b-sm br-ter-4">
<!-- Buttons -->
<div class="row" id="buttons" data-selectable>
<div class="col-sm-4 pad-t-sm">
<h3 class="tc-ter-4">
Buttons
</h3>
<p class="tc-ter-4 text-left">
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor
incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud
exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
</p>
</div>
<div class="col-sm-offset-1 col-sm-3 pad-b-sm pad-mobile-lr-zero">
<div class="disp-tab width100">
<div class="disp-tab-cell text-center pad-t-lg pad-b-lg">
<!-- Fill Button -->
<div data-name="Fill Button">
<a href="#" aria-label="">
<button class="btn-fill mar-l-xs mar-r-xs fw-regular bg-sc-4 tc-white"
aria-label="Button name">
Button name
</button>
</a>
</div>
<!-- Outline Button -->
<div data-name="Outline Button">
<a href="#" aria-label="">
<button
class="btn-outline bg-sc-4-onhover br-sc-4 tc-sc-4 tc-white-onhover mar-l-xs mar-r-xs fw-regular"
aria-label="Button name here">
A Regular CTA
</button>
</a>
</div>
<!-- Text Button -->
<div data-name="Text Button">
<a href="#" aria-label="">
<button class="btn-text bg-ter-1-onhover tc-sc-4 fw-regular"
aria-label="Button name">
Button name
</button>
</a>
</div>
<!-- Button with Loader -->
<div data-name="Button with Loader">
<a href="#" aria-label="">
<button
class="btn-fill with-white-loader mar-l-xs mar-r-xs fw-regular bg-sc-4 tc-white"
aria-label="Button name">
Button name
</button>
</a>
</div>
<!-- Button with right icon -->
<div data-name="Button with Right Icon">
<a href="#" aria-label="">
<button
class="btn-fill--right-icon mar-l-xs mar-r-xs fw-regular bg-sc-4 tc-white"
aria-label="Button name">
Button name<i class="fas fa-heart pad-l-xsm"></i>
</button>
</a>
</div>
<!-- Button with left icon -->
<div data-name="Button with Left Icon">
<a href="#" aria-label="">
<button
class="btn-fill--left-icon mar-l-xs mar-r-xs fw-regular bg-sc-4 tc-white"
aria-label="Button name">
<i class="fas fa-heart pad-r-xsm"></i>Button name
</button>
</a>
</div>
<!-- Icon Button -->
<div data-name="Icon Right">
<a href="#" aria-label="">
<button class="btn-text--only-icon mar-l-xs mar-r-xs fw-regular"
aria-label="Button name">
<span class="fa-stack fa-2x mar-zero">
<i class="fas fa-circle fa-stack-2x tc-ter-2-onhover"></i>
<i class="fas fa-heart fa-stack-1x tc-ter-4"></i>
</span>
</button>
</a>
</div>
<!-- FAB Button -->
<div data-name="Floating Action Button">
<a href="#" aria-label="">
<button class="btn-fill--fab mar-l-xs mar-r-xs fw-regular"
aria-label="Button name">
<span class="fa-stack fa-2x mar-zero">
<i class="fas fa-circle fa-stack-2x tc-sc-4"></i>
<i class="fas fa-heart fa-stack-1x tc-white"></i>
</span>
</button>
</a>
</div>
<!-- Chips basic -->
<div data-name="Basic Chip">
<a href="#" aria-label="">
<button
class="btn-fill--chip mar-l-xs mar-r-xs fw-regular bg-ter-2 tc-ter-4"
aria-label="Button name">
Button name
</button>
</a>
</div>
<!-- Chips with left icon -->
<div data-name="Chip with Left Icon">
<a href="#" aria-label="">
<button
class="btn-fill--chip-left-icon mar-l-xs mar-r-xs fw-regular bg-ter-2 tc-ter-4"
aria-label="Button name">
<i class="fas fa-heart pad-r-xsm"></i>Button name
</button>
</a>
</div>
<!-- Multi Button -->
<div data-name="Multi Button">
<div class="button-group">
<button
class="btn-outline fw-regular br-sc-4 bg-sc-4-onhover tc-sc-4 tc-white-onhover mar-b-zero selected"
aria-label="Button name">
Buy
</button>
<button
class="btn-outline fw-regular br-sc-4 bg-sc-4-onhover tc-sc-4 tc-white-onhover mar-b-zero"
aria-label="Button name">
Sell
</button>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="row">
<div class="col-sm-12 mar-b-xs">
<p class="mar-b-zero text-uppercase xsm tc-ter-4">View Code</p>
<div class="width100" data-code="Buttons"></div>
</div>
</div>
<hr class="mar-t-zero mar-b-sm br-ter-4">
<!-- Lists -->
<div class="row" id="lists" data-selectable>
<div class="col-sm-4 pad-t-sm">
<h3 class="tc-ter-4">
Lists
</h3>
<p class="tc-ter-4 text-left">
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor
incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud
exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
</p>
</div>
<div class="col-sm-offset-1 col-sm-3 pad-b-sm pad-mobile-lr-zero">
<div class="disp-tab width100">
<div class="disp-tab-cell text-center pad-t-lg pad-b-lg">
<!-- Basic List -->
<div data-name="Basic List">
<ul class="list--basic">
<li class="tc-ter-4 fw-light text-left bg-ter-1-onhover">
<p class="mar-zero text-left">Menu item</p>
</li>
<li class="tc-ter-4 fw-light text-left bg-ter-1-onhover">
<p class="mar-zero text-left">Menu item</p>
</li>
<li class="tc-ter-4 fw-light text-left bg-ter-1-onhover">
<p class="mar-zero text-left">Menu item</p>
</li>
</ul>
</div>
<!-- List-with-right-icon -->
<div data-name="List with right icons">
<ul class="list--right-icon">
<li class="tc-ter-4 fw-light text-left bg-ter-1-onhover">
<p class="mar-zero disp-inline text-left">Menu item</p>
<p class="mar-zero disp-inline f-right">
<i class="far fa-wifi"></i>
</p>
</li>
<li class="tc-ter-4 fw-light text-left bg-ter-1-onhover">
<p class="mar-zero disp-inline text-left">Menu item</p>
<p class="mar-zero disp-inline f-right">
<i class="fab fa-bluetooth-b"></i>
</p>
</li>
<li class="tc-ter-4 fw-light text-left bg-ter-1-onhover">
<p class="mar-zero disp-inline text-left">Menu item</p>
<p class="mar-zero disp-inline f-right">
<i class="far fa-heart"></i>
</p>
</li>
</ul>
</div>
<!-- List-with-left-icon -->
<div data-name="List with left icons">
<ul class="list--left-icon">
<li class="tc-ter-4 fw-light text-left bg-ter-1-onhover">
<p class="mar-zero disp-inline f-left">
<i class="far fa-wifi pad-r-xs"></i>
</p>
<p class="mar-zero disp-inline text-left">Menu item</p>
</li>
<li class="tc-ter-4 fw-light text-left bg-ter-1-onhover">
<p class="mar-zero disp-inline f-left">
<i class="fab fa-bluetooth-b pad-r-xs"></i>
</p>
<p class="mar-zero disp-inline text-left">Menu item</p>
</li>
<li class="tc-ter-4 fw-light text-left bg-ter-1-onhover">
<p class="mar-zero disp-inline f-left">
<i class="far fa-heart pad-r-xs"></i>
</p>
<p class="mar-zero disp-inline text-left">Menu item</p>
</li>
</ul>
</div>
<!-- Multi-line List-with-activated-icon -->
</div>
</div>
</div>
</div>
<div class="row">
<div class="col-sm-12 mar-b-xs">
<p class="mar-b-zero text-uppercase xsm tc-ter-4">View Code</p>
<div class="width100" data-code="Lists"></div>
</div>
</div>
<hr class="mar-t-zero mar-b-sm br-ter-4">
<!-- Text blocks -->
<div class="row" id="text-blocks" data-selectable>
<div class="col-sm-4 pad-t-sm">
<h3 class="tc-ter-4">
Text blocks
</h3>
<p class="tc-ter-4 text-left">
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor
incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud
exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
</p>
</div>
<div class="col-sm-offset-1 col-sm-4 pad-b-sm ">
<div class="disp-tab width100">
<div class="disp-tab-cell text-center pad-t-lg pad-b-md">
<!-- Text center with heading text with buttons -->
<div data-name="Centered heading & text with CTAs">
<div class="col-sm-12 pad-lr-zero">
<!-- change col-sm-12 above to suit case -->
<h3 class="tc-ter-4 mar-b-xxs text-center">
Title goes here
</h3>
<p class="tc-ter-4 mar-zero text-center">
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do
eiusmod
tempor incididunt ut
labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud
exercitation ullamco laboris
nisi ut aliquip ex ea commodo consequat.
</p>
<div class="mar-t-xs mar-b-sm disp-tab text-center width100">
<a href="#" aria-label="" class="disp-tab-cell">
<button
class="btn-outline bg-sc-4-onhover br-sc-4 tc-sc-4 tc-white-onhover mar-r-xsm fw-regular"
aria-label="Button name here">
A Regular CTA
</button>
</a>
<a href="#" aria-label="" class="disp-tab-cell">
<button class="btn-fill mar-l-xsm fw-regular bg-sc-4 tc-white"
aria-label="Button name">
Button name
</button>
</a>
</div>
</div>
</div>
<!-- Text left with heading text with buttons -->
<div data-name="Left aligned heading & text with CTAs">
<div class="col-sm-12 pad-lr-zero">
<!-- change col-sm-12 above to suit case -->
<h3 class="tc-ter-4 mar-b-xxs text-left">
Title goes here
</h3>
<p class="tc-ter-4 mar-zero text-left">
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do
eiusmod
tempor incididunt ut
labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud
exercitation ullamco laboris
nisi ut aliquip ex ea commodo consequat.
</p>
<div class="mar-t-xs mar-b-sm disp-tab f-left ">
<a href="#" aria-label="" class="disp-tab-cell">
<button
class="btn-outline bg-sc-4-onhover br-sc-4 tc-sc-4 tc-white-onhover mar-r-xsm fw-regular"
aria-label="Button name here">
A Regular CTA
</button>
</a>
<a href="#" aria-label="" class="disp-tab-cell">
<button class="btn-fill mar-l-xsm fw-regular bg-sc-4 tc-white"
aria-label="Button name">
Button name
</button>
</a>
</div>
</div>
</div>
<!-- Text right with heading text with buttons -->
<div data-name="Right aligned heading & text with CTAs">
<div class="col-sm-12 pad-lr-zero">
<!-- change col-sm-12 above to suit case -->
<h3 class="tc-ter-4 mar-b-xxs text-right">
Title goes here
</h3>
<p class="tc-ter-4 mar-zero text-right">
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do
eiusmod
tempor incididunt ut
labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud
exercitation ullamco laboris
nisi ut aliquip ex ea commodo consequat.
</p>
<div class="mar-t-xs mar-b-sm disp-tab f-right">
<a href="#" aria-label="" class="disp-tab-cell">
<button
class="btn-outline bg-sc-4-onhover br-sc-4 tc-sc-4 tc-white-onhover mar-r-xsm fw-regular"
aria-label="Button name here">
A Regular CTA
</button>
</a>
<a href="#" aria-label="" class="disp-tab-cell">
<button class="btn-fill mar-l-xsm fw-regular bg-sc-4 tc-white"
aria-label="Button name">
Button name
</button>
</a>
</div>
</div>
</div>
<!-- Text with heading text with buttons and an icon -->
<div data-name="Icon, Heading & text with CTAs">
<div class="col-sm-12 pad-lr-zero">
<!-- change col-sm-12 above to suit case -->
<h2 class="mar-zero text-center">
<span class="fa-stack fa-2x">
<i class="fas fa-circle fa-stack-2x tc-sc-4"></i>
<i class="fas fa-flag fa-stack-1x tc-white"></i>
</span>
</h2>
<h3 class="tc-ter-4 mar-b-xxs text-center">
Title goes here
</h3>
<p class="tc-ter-4 mar-zero text-center">
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do
eiusmod
tempor incididunt ut
labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud
exercitation ullamco laboris
nisi ut aliquip ex ea commodo consequat.
</p>
<div class="mar-t-xs mar-b-sm text-center">
<a href="#" aria-label="">
<button
class="btn-fill mar-l-xs mar-r-xs fw-regular bg-sc-4 tc-white"
aria-label="Button name">
Button name
</button>
</a>
</div>
</div>
</div>
<!-- Accordion -->
<div data-name="Checkbox Accordion">
<div class="accordion">
<ul class="list--left-icon">
<li
class="tc-ter-4 fw-light text-left bg-ter-1-onhover accordion-item">
<input type="checkbox" class="accordion-checkbox">
<span class="accordion-caret"><i
class="fas fa-angle-down tc-ter-4"></i></span>
<h3 class="mar-b-xxs">Accordion Heading</h3>
<div class="accordion-text">
<p class="tc-ter-4 mar-zero pad-t-xs">
Lorem ipsum dolor sit amet, consectetur adipiscing elit,
sed
do eiusmod tempor incididunt
ut
labore et dolore magna aliqua. Ut enim ad minim veniam,
quis
nostrud exercitation ullamco
laboris
nisi ut aliquip ex ea commodo consequat.</p>
</div>
</li>
<li
class="tc-ter-4 fw-light text-left bg-ter-1-onhover accordion-item">
<input type="checkbox" class="accordion-checkbox">
<span class="accordion-caret"><i
class="fas fa-angle-down tc-ter-4"></i></span>
<h3 class="mar-b-xxs">Accordion Heading</h3>
<div class="accordion-text">
<p class="tc-ter-4 mar-zero pad-t-xs">
Lorem ipsum dolor sit amet, consectetur adipiscing elit,
sed
do eiusmod tempor incididunt
ut
labore et dolore magna aliqua. Ut enim ad minim veniam,
quis
nostrud exercitation ullamco
laboris
nisi ut aliquip ex ea commodo consequat.</p>
</div>
</li>
<li class="tc-ter-4 fw-light text-left accordion-item">
<input type="checkbox" class="accordion-checkbox">
<span class="accordion-caret"><i
class="fas fa-angle-down tc-ter-4"></i></span>
<h3 class="mar-b-xxs">Accordion Heading</h3>
<div class="accordion-text">
<p class="tc-ter-4 mar-zero pad-t-xs">
Lorem ipsum dolor sit amet, consectetur adipiscing elit,
sed
do eiusmod tempor incididunt
ut
labore et dolore magna aliqua. Ut enim ad minim veniam,
quis
nostrud exercitation ullamco
laboris
nisi ut aliquip ex ea commodo consequat.</p>
</div>
</li>
</ul>
</div>
</div>
<div data-name="Radio Accordion">
<div class="accordion">
<ul class="list--left-icon">
<li
class="tc-ter-4 fw-light text-left bg-ter-1-onhover accordion-item">
<input type="radio" class="accordion-radio"
name="accordion-radio" checked>
<span class="accordion-caret"><i
class="fas fa-angle-down tc-ter-4"></i></span>
<h3 class="mar-b-xxs">Accordion Heading</h3>
<div class="accordion-text">
<p class="tc-ter-4 mar-zero pad-t-xs">
Lorem ipsum dolor sit amet, consectetur adipiscing elit,
sed
do eiusmod tempor incididunt
ut
labore et dolore magna aliqua. Ut enim ad minim veniam,
quis
nostrud exercitation ullamco
laboris
nisi ut aliquip ex ea commodo consequat.</p>
</div>
</li>
<li
class="tc-ter-4 fw-light text-left bg-ter-1-onhover accordion-item">
<input type="radio" class="accordion-radio"
name="accordion-radio">
<span class="accordion-caret"><i
class="fas fa-angle-down tc-ter-4"></i></span>
<h3 class="mar-b-xxs">Accordion Heading</h3>
<div class="accordion-text">
<p class="tc-ter-4 mar-zero pad-t-xs">
Lorem ipsum dolor sit amet, consectetur adipiscing elit,
sed
do eiusmod tempor incididunt
ut
labore et dolore magna aliqua. Ut enim ad minim veniam,
quis
nostrud exercitation ullamco
laboris
nisi ut aliquip ex ea commodo consequat.</p>
</div>
</li>
<li
class="tc-ter-4 fw-light text-left bg-ter-1-onhover accordion-item">
<input type="radio" class="accordion-radio"
name="accordion-radio">
<span class="accordion-caret"><i
class="fas fa-angle-down tc-ter-4"></i></span>
<h3 class="mar-b-xxs">Accordion Heading</h3>
<div class="accordion-text">
<p class="tc-ter-4 mar-zero pad-t-xs">
Lorem ipsum dolor sit amet, consectetur adipiscing elit,
sed
do eiusmod tempor incididunt
ut
labore et dolore magna aliqua. Ut enim ad minim veniam,
quis
nostrud exercitation ullamco
laboris
nisi ut aliquip ex ea commodo consequat.</p>
</div>
</li>
</ul>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="row">
<div class="col-sm-12 mar-b-xs">
<p class="mar-b-zero text-uppercase xsm tc-ter-4">View Code</p>
<div class="width100" data-code="Text blocks"></div>
</div>
</div>
<hr class="mar-t-zero mar-b-sm br-ter-4">
<!-- Cards -->
<div class="row" id="cards" data-selectable>
<div class="col-sm-4 pad-t-sm">
<h3 class="tc-ter-4">
Cards
</h3>
<p class="tc-ter-4 text-left">
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor
incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud
exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
</p>
</div>
<div class="col-lg-offset-2 col-lg-8 col-sm-offset-1 col-sm-10 col-xm-offset-0
col-xm-12 pad-b-sm">
<div class="disp-tab width100 mar-t-lg mar-b-lg">
<div class="disp-tab-cell">
<!-- Scrip Card -->
<div data-Name="Scrip Card">
<div class="card--for-scrip">
<div class="container-fluid pad-l-xxs pad-r-xxs">
<div class="row-no-gutters">
<div class="card--for-scrip-left col-sm-5 col-xm-5">
<div
class="card--for-scrip-top-row container-fluid pad-lr-zero">
<div class="card--for-scrip-title">
<div class="card--for-scrip-badge bg-ter-2">
<p class="tc-ter-3 xxs">NSE</p>
</div>
<div class="card--for-scrip-name">
<h4 class="tc-ter-4 fw-regular">ULTRACEMCO
21FEB2019</h4>
</div>
</div>
<div class="card--for-scrip-subtext">
<p class="tc-ter-3 xsm fw-regular">CE 10,800.00</p>
</div>
</div>
<div
class="card--for-scrip-bottom-row container-fluid pad-lr-zero">
<div class="card--for-scrip-badge-array row-no-gutters">
<div class="card--for-scrip-tags br-alt-1"
onclick="alert('You clicked the Buy tag')">
<p class="tc-alt-1 xsm text-uppercase">buy</p>
</div>
<div class="card--for-scrip-tags br-ter-3"
onclick="alert('You clicked the GTD tag')">
<p class="tc-ter-3 xsm text-uppercase">gtd</p>
</div>
<div class="card--for-scrip-tags br-alt-3"
onclick="alert('You clicked the TSLO tag')">
<p class="tc-alt-3 xsm text-uppercase">tslo</p>
</div>
<div class="card--for-scrip-tags br-alt-2 bg-alt-2"
onclick="alert('You clicked the Equity tag')">
<p class="tc-ter-4 xsm text-uppercase">equity
</p>
</div>
<div class="card--for-scrip-tags br-sc-4"
onclick="alert('You clicked the Super Multiple tag')">
<p class="tc-sc-4 xsm text-uppercase">Super
Multiple</p>
</div>
<div class="card--for-scrip-tags br-sc-3"
onclick="alert('You clicked the Pending tag')">
<p class="tc-sc-3 xsm text-uppercase">Pending
</p>
</div>
</div>
</div>
</div>
<hr class="mobile br-ter-2 mar-t-xxs mar-b-xmd
card--for-scrip-separator mobile--hide-in-landscape">
<div
class="card--for-scrip-right col-sm-7 col-xm-7 pad-lr-zero">
<div
class="card--for-scrip-top-row container-fluid pad-lr-zero">
<div class="row-no-gutters">
<div class="col-sm-4 col-xm-4 col-xs-6 pad-lr-zero">
<p
class="tc-ter-3 text-right xsm text-uppercase mar-zero fw-regular text-left-mobile">
Traded Qty.</p>
<p
class="tc-ter-4 text-right fw-regular text-left-mobile">
10,000</p>
</div>
<div class="col-sm-4 col-xm-4 col-xs-6 pad-lr-zero">
<p
class="tc-ter-3 text-right xsm text-uppercase mar-zero fw-regular text-left-mobile">
Avg. Price</p>
<p
class="tc-ter-4 text-right fw-regular text-left-mobile">
4,349.98</p>
</div>
<div class="col-sm-4 col-xm-4 col-xs-6 pad-lr-zero">
<p
class="tc-ter-3 text-right xsm text-uppercase mar-zero fw-regular text-left-mobile">
LTP</p>
<p
class="tc-alt-1 text-right fw-regular text-left-mobile">
14,350</p>
</div>
<div class="col-sm-4 col-xm-4 col-xs-6 pad-lr-zero">
<p
class="tc-ter-3 text-right xsm text-uppercase mar-zero fw-regular text-left-mobile">
Traded Value</p>
<p
class="tc-ter-4 text-right fw-regular text-left-mobile">
10,000</p>
</div>
<div class="col-sm-4 col-xm-4 col-xs-6 pad-lr-zero">
<p
class="tc-ter-3 text-right xsm text-uppercase mar-zero fw-regular text-left-mobile">
Traded Value</p>
<p
class="tc-ter-4 text-right fw-regular text-left-mobile">
10,000</p>
</div>
<div class="col-sm-4 col-xm-4 col-xs-6 pad-lr-zero">
<p
class="tc-ter-3 text-right xsm text-uppercase mar-zero fw-regular text-left-mobile">
Realized P&L</p>
<p
class="tc-ter-4 text-right fw-regular text-left-mobile">
10,010</p>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="card--for-scrip-action-list bg-white invisible">
<div class="width100 pad-t-xxs pad-r-xxs pad-b-xxs pad-l-xxs ">
<div class="button-group">
<button
class="btn-outline fw-regular br-sc-4 bg-sc-4-onhover tc-sc-4 tc-white-onhover mar-b-zero selected"
aria-label="Button name">
Buy
</button>
<button
class="btn-outline fw-regular br-sc-4 bg-sc-4-onhover tc-sc-4 tc-white-onhover mar-b-zero"
aria-label="Button name">
Sell
</button>
</div>
</div>
<hr class="tc-ter-2 mar-t-xxs mar-b-xxs">
<div class="width100 pad-b-xxs">
<p
class="tc-ter-4 mar-zero pad-t-xsm pad-r-xxs pad-b-xsm pad-l-xxs xmd">
<span class="fa-stack fa-2x xmd mar-zero">
<i class="fas fa-circle fa-stack-2x tc-white ts-2"></i>
<i class="fas fa-chart-area fa-stack-1x tc-sc-3"></i>
</span>
Charts
</p>
<p
class="tc-ter-4 mar-zero pad-t-xsm pad-r-xxs pad-b-xsm pad-l-xxs xmd">
<span class="fa-stack fa-2x xmd mar-zero">
<i class="fas fa-circle fa-stack-2x tc-white ts-2"></i>
<i
class="fas fa-signal fa-stack-1x tc-sc-3 rotate-minus-90"></i>
</span>
Market Depth
</p>
<p
class="tc-ter-4 mar-zero pad-t-xsm pad-r-xxs pad-b-xsm pad-l-xxs xmd">
<span class="fa-stack fa-2x xmd mar-zero">
<i class="fas fa-circle fa-stack-2x tc-white ts-2"></i>
<i class="fas fa-info fa-stack-1x tc-sc-3"></i>
</span>
Stock Info
</p>
<hr class="tc-ter-2 mar-t-xxs mar-b-xxs">
<p
class="tc-ter-4 mar-zero pad-t-xsm pad-r-xxs pad-b-xsm pad-l-xxs xmd">
<span class="fa-stack fa-2x xmd mar-zero">
<i class="fas fa-circle fa-stack-2x tc-white ts-2"></i>
<i class="fas fa-info fa-stack-1x tc-pr-4"></i>
</span>
Delete
</p>
</div>
</div>
</div>
</div>
<!-- Basic Card -->
<div data-name="Basic Card">
<div class="card-basic mar-b-xs">
<div class="card-image br-sc-5">
<img loading="lazy" data-src="./img/1.svg" alt="1.svg"
title="1.svg">
</div>
<div class="card-body pad-t-xs pad-r-xs pad-b-xs pad-l-xs">
<h3 class="tc-ter-4 mar-b-xxs">
Title goes here
</h3>
<p class="tc-ter-4 mar-zero">
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do
eiusmod tempor incididunt ut
labore et dolore magna aliqua. Ut enim ad minim veniam, quis
nostrud
exercitation ullamco laboris
nisi ut aliquip ex ea commodo consequat.
</p>
</div>
<div class="card-footer pad-t-xxs pad-r-xxs pad-b-xxs pad-l-xxs">
<div class="card-footer-buttons">
<a href="#" aria-label="">
<button class="btn-text bg-ter-1-onhover tc-sc-4 fw-regular"
aria-label="Button name">
Button name
</button>
</a>
<a href="#" aria-label="">
<button class="btn-text bg-ter-1-onhover tc-sc-4 fw-regular"
aria-label="Button name">
Button name
</button>
</a>
</div>
<div class="card-footer-icons">
<a href="#">
<button class="btn-text--only-icon fw-regular"
aria-label="Button name">
<span class="fa-stack fa-2x mar-zero xmd">
<i
class="fas fa-circle fa-stack-2x tc-ter-2-onhover"></i>
<i class="far fa-heart fa-stack-1x tc-ter-4"></i>
</span>
</button>
</a>
<a href="#">
<button class="btn-text--only-icon fw-regular"
aria-label="Button name">
<span class="fa-stack fa-2x mar-zero xmd">
<i
class="fas fa-circle fa-stack-2x tc-ter-2-onhover"></i>
<i class="far fa-bookmark fa-stack-1x tc-ter-4"></i>
</span>
</button>
</a>
</div>
</div>
</div>
</div>
<!-- Basic Card with text only -->
<div data-name="Card with text only">
<div class="card--with-text-only mar-b-xs">
<div class="card-image br-sc-5">
<img loading="lazy" data-src="./img/1.svg" alt="1.svg"
title="1.svg">
</div>
<div class="card-body pad-t-xs pad-r-xs pad-b-xs pad-l-xs">
<h3 class="tc-ter-4 mar-b-xxs">
Title goes here
</h3>
<p class="tc-ter-4 mar-zero">
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do
eiusmod tempor incididunt ut
labore et dolore magna aliqua. Ut enim ad minim veniam, quis
nostrud
exercitation ullamco laboris
nisi ut aliquip ex ea commodo consequat.
</p>
</div>
</div>
</div>
<!-- Basic Card without image -->
<div data-name="Card without image">
<div class="card--without-image mar-b-xs">
<div class="card-body pad-t-xs pad-r-xs pad-b-xs pad-l-xs">
<h3 class="tc-ter-4 mar-b-xxs">
Title goes here
</h3>
<p class="tc-ter-4 mar-zero">
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do
eiusmod tempor incididunt ut
labore et dolore magna aliqua. Ut enim ad minim veniam, quis
nostrud
exercitation ullamco laboris
nisi ut aliquip ex ea commodo consequat.
</p>
</div>
<div class="card-footer pad-t-xxs pad-r-xxs pad-b-xxs pad-l-xxs">
<div class="card-footer-buttons">
<a href="#" aria-label="">
<button class="btn-text bg-ter-1-onhover tc-sc-4 fw-regular"
aria-label="Button name">
Button name
</button>
</a>
<a href="#" aria-label="">
<button class="btn-text bg-ter-1-onhover tc-sc-4 fw-regular"
aria-label="Button name">
Button name
</button>
</a>
</div>
<div class="card-footer-icons">
<a href="#" aria-label="">
<button class="btn-text--only-icon fw-regular"
aria-label="Button name">
<span class="fa-stack fa-2x mar-zero xmd">
<i
class="fas fa-circle fa-stack-2x tc-ter-2-onhover"></i>
<i class="far fa-heart fa-stack-1x tc-ter-4"></i>
</span>
</button>
</a>
<a href="#" aria-label="">
<button class="btn-text--only-icon fw-regular"
aria-label="Button name">
<span class="fa-stack fa-2x mar-zero xmd">
<i
class="fas fa-circle fa-stack-2x tc-ter-2-onhover"></i>
<i class="far fa-bookmark fa-stack-1x tc-ter-4"></i>
</span>
</button>
</a>
</div>
</div>
</div>
</div>
<!-- Basic Card with only buttons -->
<div data-name="Card with buttons only">
<div class="card--with-only-buttons mar-b-xs">
<div class="card-image br-sc-5">
<img loading="lazy" data-src="./img/1.svg" alt="1.svg"
title="1.svg">
</div>
<div class="card-body pad-t-xs pad-r-xs pad-b-xs pad-l-xs">
<h3 class="tc-ter-4 mar-b-xxs">
Title goes here
</h3>
<p class="tc-ter-4 mar-zero">
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do
eiusmod tempor incididunt ut
labore et dolore magna aliqua. Ut enim ad minim veniam, quis
nostrud
exercitation ullamco laboris
nisi ut aliquip ex ea commodo consequat.
</p>
</div>
<div class="card-footer pad-t-xxs pad-r-xxs pad-b-xxs pad-l-xxs">
<div class="card-footer-buttons">
<a href="#" aria-label="">
<button class="btn-text bg-ter-1-onhover tc-sc-4 fw-regular"
aria-label="Button name">
Button name
</button>
</a>
<a href="#" aria-label="">
<button class="btn-text bg-ter-1-onhover tc-sc-4 fw-regular"
aria-label="Button name">
Button name
</button>
</a>
</div>
</div>
</div>
</div>
<!-- Basic Card with only icons -->
<div data-name="Card with icons only">
<div class="card--with-only-icons mar-b-xs">
<div class="card-image br-sc-5">
<img loading="lazy" data-src="./img/1.svg" alt="1.svg"
title="1.svg">
</div>
<div class="card-body pad-t-xs pad-r-xs pad-b-xs pad-l-xs">
<h3 class="tc-ter-4 mar-b-xxs">
Title goes here
</h3>
<p class="tc-ter-4 mar-zero">
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do
eiusmod tempor incididunt ut
labore et dolore magna aliqua. Ut enim ad minim veniam, quis
nostrud
exercitation ullamco laboris
nisi ut aliquip ex ea commodo consequat.
</p>
</div>
<div class="card-footer pad-t-xxs pad-r-xxs pad-b-xxs pad-l-xxs">
<div class="card-footer-buttons">
<a href="#" aria-label="" class="invisible">
<button class="btn-text bg-ter-1-onhover tc-sc-4 fw-regular"
aria-label="Button name">
Button name
</button>
</a>
<a href="#" aria-label="" class="invisible">
<button class="btn-text bg-ter-1-onhover tc-sc-4 fw-regular"
aria-label="Button name">
Button name
</button>
</a>
</div>
<div class="card-footer-icons">
<a href="#" aria-label="">
<button class="btn-text--only-icon fw-regular"
aria-label="Button name">
<span class="fa-stack fa-2x mar-zero xmd">
<i
class="fas fa-circle fa-stack-2x tc-ter-2-onhover"></i>
<i class="far fa-heart fa-stack-1x tc-ter-4"></i>
</span>
</button>
</a>
<a href="#" aria-label="">
<button class="btn-text--only-icon fw-regular"
aria-label="Button name">
<span class="fa-stack fa-2x mar-zero xmd">
<i
class="fas fa-circle fa-stack-2x tc-ter-2-onhover"></i>
<i class="far fa-bookmark fa-stack-1x tc-ter-4"></i>
</span>
</button>
</a>
</div>
</div>
</div>
</div>
<!-- Basic course card -->
<div data-name="Course Card">
<div class="card--for-courses mar-b-xs" data-score="4.5" data-reviews="150"
data-hours="22" data-chapters="20">
<div class="card-accent br-sc-5 bg-sc-5"></div>
<div class="card-image br-sc-5">
<img loading="lazy" data-src="./img/1.svg" alt="1.svg"
title="1.svg">
</div>
<div
class="card-body--with-click has-values-to-set pad-t-xs pad-r-xs pad-b-xs pad-l-xs">
<h3 class="tc-ter-4 mar-b-xxs">
Title goes here
</h3>
<p class="tc-ter-4 mar-b-xs">
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do
eiusmod tempor incididunt ut
labore et dolore magna aliqua. Ut enim ad minim veniam, quis
nostrud
exercitation ullamco laboris
nisi ut aliquip ex ea commodo consequat.
</p>
<p class="xsm mar-b-xxs tc-ter-3" data-render-score
data-render-reviews>
<span class="pad-r-xsm">
<i class="fas fa-star tc-alt-2"></i>
<i class="fas fa-star tc-alt-2"></i>
<i class="fas fa-star tc-alt-2"></i>
<i class="fas fa-star-half-alt tc-alt-2"></i>
<i class="far fa-star tc-alt-2"></i>
</span> ~ (~)
</p>
<p class="xsm mar-b-xxs tc-ter-3" data-render-hours>
<span class="pad-r-xsm">
<i class="far fa-clock tc-alt-2"></i>
</span> ~
</p>
<p class="xsm mar-zero tc-ter-3" data-render-chapters>
<span class="pad-r-xsm">
<i class="fas fa-th tc-alt-2"></i>
</span> ~
</p>
</div>
<div
class="card-body--on-click closed pad-t-xs pad-r-xs pad-b-xs pad-l-xs">
<p class="tc-ter-4 mar-zero">
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do
eiusmod tempor incididunt ut
labore et dolore magna aliqua. Ut enim ad minim veniam, quis
nostrud
exercitation ullamco laboris
nisi ut aliquip ex ea commodo consequat.
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do
eiusmod tempor incididunt ut
labore et dolore magna aliqua. Ut enim ad minim veniam, quis
nostrud
exercitation ullamco laboris
nisi ut aliquip ex ea commodo consequat.
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do
eiusmod tempor incididunt ut
labore et dolore magna aliqua. Ut enim ad minim veniam, quis
nostrud
exercitation ullamco laboris
nisi ut aliquip ex ea commodo consequat.
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do
eiusmod tempor incididunt ut
labore et dolore magna aliqua. Ut enim ad minim veniam, quis
nostrud
exercitation ullamco laboris
nisi ut aliquip ex ea commodo consequat.
</p>
</div>
<div class="card-footer pad-t-xxs pad-r-xxs pad-b-xxs pad-l-xxs">
<div class="card-footer-buttons">
<a href="#" aria-label="">
<button class="btn-text bg-ter-1-onhover tc-sc-4 fw-regular"
aria-label="Button name">
Button name
</button>
</a>
<a href="#" aria-label="">
<button class="btn-text bg-ter-1-onhover tc-sc-4 fw-regular"
aria-label="Button name">
Button name
</button>
</a>
</div>
<div class="card-footer-icons">
<a href="#" aria-label="">
<button class="btn-text--only-icon fw-regular"
aria-label="Button name">
<span class="fa-stack fa-2x mar-zero xmd">
<i
class="fas fa-circle fa-stack-2x tc-ter-2-onhover"></i>
<i class="far fa-heart fa-stack-1x tc-ter-4"></i>
</span>
</button>
</a>
<a href="#" aria-label="">
<button class="btn-text--only-icon fw-regular"
aria-label="Button name">
<span class="fa-stack fa-2x mar-zero xmd">
<i
class="fas fa-circle fa-stack-2x tc-ter-2-onhover"></i>
<i class="far fa-bookmark fa-stack-1x tc-ter-4"></i>
</span>
</button>
</a>
</div>
</div>
</div>
</div>
<!-- Basic knowledge bank card -->
<div data-name="Knowledge Bank Card">
<div class="card--for-knowledge-bank mar-b-xs" data-score="2.5"
data-reviews="1250" data-hours="22" data-modules="20">
<div class="card-accent br-sc-5 bg-sc-5"></div>
<div class="card-image br-sc-5">
<img loading="lazy" data-src="./img/1.svg" alt="1.svg"
title="1.svg">
</div>
<div
class="card-body--with-click has-values-to-set pad-t-xs pad-r-xs pad-b-xs pad-l-xs">
<h3 class="tc-ter-4 mar-b-xxs">
Title goes here
</h3>
<p class="tc-ter-4 mar-b-xs">
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do
eiusmod tempor incididunt ut
labore et dolore magna aliqua. Ut enim ad minim veniam, quis
nostrud
exercitation ullamco laboris
nisi ut aliquip ex ea commodo consequat.
</p>
<p class="xsm mar-b-xxs tc-ter-3" data-render-score
data-render-reviews>
<span class="pad-r-xsm">
<i class="fas fa-star tc-alt-2"></i>
<i class="fas fa-star tc-alt-2"></i>
<i class="fas fa-star tc-alt-2"></i>
<i class="fas fa-star-half-alt tc-alt-2"></i>
<i class="far fa-star tc-alt-2"></i>
</span> ~ (~)
</p>
<p class="xsm mar-b-xxs tc-ter-3" data-render-hours>
<span class="pad-r-xsm">
<i class="far fa-clock tc-alt-2"></i>
</span> ~
</p>
<p class="xsm mar-zero tc-ter-3" data-render-modules>
<span class="pad-r-xsm">
<i class="fas fa-th tc-alt-2"></i>
</span> ~
</p>
</div>
<div
class="card-body--on-click closed pad-t-xs pad-r-xs pad-b-xs pad-l-xs">
<p class="tc-ter-4 mar-zero">
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do
eiusmod tempor incididunt ut
labore et dolore magna aliqua. Ut enim ad minim veniam, quis
nostrud
exercitation ullamco laboris
nisi ut aliquip ex ea commodo consequat.
</p>
</div>
<div class="card-footer pad-t-xxs pad-r-xxs pad-b-xxs pad-l-xxs">
<div class="card-footer-buttons">
<a href="#" aria-label="">
<button class="btn-text bg-ter-1-onhover tc-sc-4 fw-regular"
aria-label="Button name">
Button name
</button>
</a>
<a href="#" aria-label="">
<button class="btn-text bg-ter-1-onhover tc-sc-4 fw-regular"
aria-label="Button name">
Button name
</button>
</a>
</div>
<div class="card-footer-icons">
<a href="#" aria-label="">
<button class="btn-text--only-icon fw-regular"
aria-label="Button name">
<span class="fa-stack fa-2x mar-zero xmd">
<i
class="fas fa-circle fa-stack-2x tc-ter-2-onhover"></i>
<i class="far fa-heart fa-stack-1x tc-ter-4"></i>
</span>
</button>
</a>
<a href="#" aria-label="">
<button class="btn-text--only-icon fw-regular"
aria-label="Button name">
<span class="fa-stack fa-2x mar-zero xmd">
<i
class="fas fa-circle fa-stack-2x tc-ter-2-onhover"></i>
<i class="far fa-bookmark fa-stack-1x tc-ter-4"></i>
</span>
</button>
</a>
</div>
</div>
</div>
</div>
<!-- Horizontal Card with image & text-->
<div data-name="Horizontal Card with image & text">
<div class="card-horizontal--with-image-and-text mar-b-xs">
<div class="card-image--on-side br-sc-5">
<img loading="lazy" data-src="./img/1.svg" alt="1.svg"
title="1.svg">
</div>
<div class="card-content pad-t-xs pad-r-xs pad-b-xs pad-l-xs">
<h3 class="tc-ter-4 mar-b-xxs">
Title goes here
</h3>
<p class="tc-ter-4 mar-zero">
Lorem ipsum dolor sit amet, consectetur adipiscing elit
</p>
</div>
<div class="card-footer pad-t-xxs pad-r-xxs pad-b-xxs pad-l-xxs">
<div class="card-footer-buttons">
<a href="#" aria-label="">
<button class="btn-text bg-ter-1-onhover tc-sc-4 fw-regular"
aria-label="Button name">
Button name
</button>
</a>
<a href="#" aria-label="">
<button class="btn-text bg-ter-1-onhover tc-sc-4 fw-regular"
aria-label="Button name">
Button name
</button>
</a>
</div>
<div class="card-footer-icons">
<a href="#" aria-label="">
<button class="btn-text--only-icon fw-regular"
aria-label="Button name">
<span class="fa-stack fa-2x mar-zero xmd">
<i
class="fas fa-circle fa-stack-2x tc-ter-2-onhover"></i>
<i class="far fa-heart fa-stack-1x tc-ter-4"></i>
</span>
</button>
</a>
<a href="#" aria-label="">
<button class="btn-text--only-icon fw-regular"
aria-label="Button name">
<span class="fa-stack fa-2x mar-zero xmd">
<i
class="fas fa-circle fa-stack-2x tc-ter-2-onhover"></i>
<i class="far fa-bookmark fa-stack-1x tc-ter-4"></i>
</span>
</button>
</a>
</div>
</div>
</div>
</div>
<!-- Horizontal Card with icon & text-->
<div data-name="Horizontal Card with icon & text with CTAs">
<div class="card-horizontal--with-icon-and-text mar-b-xs">
<div class="card-icon br-sc-5 pad-t-xs">
<span class="fa-stack fa-2x">
<i class="fas fa-circle fa-stack-2x tc-sc-4"></i>
<i class="fas fa-flag fa-stack-1x tc-white"></i>
</span>
</div>
<div class="card-content pad-t-xs pad-r-xs pad-b-xs pad-l-xxs">
<h3 class="tc-ter-4 mar-b-xxs">
Title goes here
</h3>
<p class="tc-ter-4 mar-zero">
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do
eiusmod tempor incididunt
</p>
</div>
<div class="card-footer pad-t-xxs pad-r-xxs pad-b-xxs pad-l-xxs">
<div class="card-footer-buttons">
<a href="#" aria-label="">
<button class="btn-text bg-ter-1-onhover tc-sc-4 fw-regular"
aria-label="Button name">
Button name
</button>
</a>
<a href="#" aria-label="">
<button class="btn-text bg-ter-1-onhover tc-sc-4 fw-regular"
aria-label="Button name">
Button name
</button>
</a>
</div>
<div class="card-footer-icons">
<a href="#" aria-label="">
<button class="btn-text--only-icon fw-regular"
aria-label="Button name">
<span class="fa-stack fa-2x mar-zero xmd">
<i
class="fas fa-circle fa-stack-2x tc-ter-2-onhover"></i>
<i class="far fa-heart fa-stack-1x tc-ter-4"></i>
</span>
</button>
</a>
<a href="#" aria-label="">
<button class="btn-text--only-icon fw-regular"
aria-label="Button name">
<span class="fa-stack fa-2x mar-zero xmd">
<i
class="fas fa-circle fa-stack-2x tc-ter-2-onhover"></i>
<i class="far fa-bookmark fa-stack-1x tc-ter-4"></i>
</span>
</button>
</a>
</div>
</div>
</div>
</div>
<!-- Horizontal Card with icon & text-->
<div data-name="Horizontal Card with icon & text">
<div class="card-horizontal--with-icon-with-text mar-b-xs">
<div class="card-icon br-sc-5 pad-t-xs">
<span class="fa-stack fa-2x">
<i class="fas fa-circle fa-stack-2x tc-sc-4"></i>
<i class="fas fa-flag fa-stack-1x tc-white"></i>
</span>
</div>
<div class="card-content pad-t-xs pad-r-xs pad-b-xs pad-l-xxs">
<h3 class="tc-ter-4 mar-b-xxs">
Title goes here
</h3>
<p class="tc-ter-4 mar-zero">
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do
eiusmod tempor incididunt
</p>
</div>
</div>
</div>
<!-- Testimonial card -->
<div data-name="Testimonial Cards">
<div class="card--for-testimonials mar-b-xs" data-score="3.5" data-reviews="1250" data-person="Sandhya Kannan">
<div class="card-icon br-sc-5 pad-t-xs pad-l-xxs">
<span class="fa-stack fa-2x">
<i class="fas fa-circle fa-stack-2x tc-sc-4"></i>
<p class="fas fa-user fa-stack-1x tc-white" data-render-person></p>
</span>
</div>
<div class="card-content has-values-to-set pad-r-xs pad-l-xxs">
<h4 class="tc-ter-4 mar-b-xxs">
Firstname Secondname
</h4>
<p class="xsm mar-zero tc-ter-3 pad-t-xxs" data-render-score data-render-reviews>
<span class="pad-r-xsm">
<i class="far fa-star tc-alt-2"></i>
<i class="far fa-star tc-alt-2"></i>
<i class="far fa-star tc-alt-2"></i>
<i class="far fa-star tc-alt-2"></i>
<i class="far fa-star tc-alt-2"></i>
</span> ~ (~)
</p>
</div>
<div class="card-testimonial pad-r-xs pad-b-xs pad-l-xs">
<p class="tc-ter-4 mar-zero">
Sed ut perspiciatis unde omnis iste natus error sit
voluptatem
accusantium doloremque laudantium,
totam rem aperiam, eaque ipsa quae ab illo inventore
veritatis et
quasi architecto beatae vitae
dicta sunt explicabo. Nemo enim ipsam voluptatem quia
voluptas sit
aspernatur aut odit aut fugit,
sed quia consequuntur magni dolores
</p>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="row">
<div class="col-sm-12 mar-b-xs">
<p class="mar-b-zero text-uppercase xsm tc-ter-4">View Code</p>
<div class="width100" data-code="Cards"></div>
</div>
</div>
<hr class="mar-t-zero mar-b-sm br-ter-4">
<!-- Forms & Inputs -->
<div class="row" id="forms" data-selectable>
<div class="col-sm-4 pad-t-sm">
<h3 class="tc-ter-4">
Forms & Inputs
</h3>
<p class="tc-ter-4 text-left">
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor
incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud
exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
</p>
</div>
<div class="col-sm-offset-1 col-sm-3 pad-b-sm pad-mobile-lr-zero">
<div class="disp-tab width100">
<div class="disp-tab-cell text-center pad-t-lg pad-b-md">
<!-- <form>-->
<!-- Checkbox unchecked -->
<div data-name="Checkbox">
<div class="form">
<input id="alpha" type="checkbox" name="roman" value="Alpha" required>
<label for="alpha" class="tc-ter-4">Alpha</label>
<input id="beta" type="checkbox" name="roman" value="Beta">
<label for="beta" class="tc-ter-4">Beta</label>
<input id="gamma" type="checkbox" name="roman" value="Gamma">
<label for="gamma" class="tc-ter-4">Gamma</label>
<span class="xxs tc-pr-4 animated invisible pad-l-xsm">
<i class="fa fa-exclamation-circle pad-r-xxs"></i>Please select one
</span>
</div>
</div>
<!-- Checkbox indeterminate -->
<!-- Select Menu -->
<div data-name="Dropdown">
<div class="form mar-t-sm">
<input id="select" class="dropdown form--with-right-icon" type="text"
placeholder=" " aria-label="dropdown" alt="dropdown"
data-error="What you searched for isn't in this list" required>
<label for="select" class="tc-ter-3">Dropdown</label>
<ul class="list--basic">
<li class="tc-ter-4 fw-light text-left bg-ter-1-onhover disabled">
<p class="mar-zero text-left">Disabled item</p>
</li>
<li class="tc-ter-4 fw-light text-left bg-ter-1-onhover">
<p class="mar-zero text-left">Selected item</p>
</li>
<li class="tc-ter-4 fw-light text-left bg-ter-1-onhover">
<p class="mar-zero text-left">Menu item</p>
</li>
</ul>
<p class="tc-ter-3"><i class="fas fa-caret-down pad-r-xxs"></i></p>
<span class="xxs tc-pr-4 animated invisible pad-l-xsm"></span>
</div>
</div>
<!-- Radio buttons -->
<div data-name="Radio Buttons">
<div class="form pad-t-sm">
<input id="first" type="radio" name="numbers" value="first">
<label for="first" class="tc-ter-4">First</label>
<!-- </div>
<div class="form"> -->
<input id="second" type="radio" name="numbers" value="second">
<label for="second" class="tc-ter-4">Second</label>
<span class="xxs tc-pr-4 animated invisible pad-l-xsm"></span>
</div>
</div>
<!-- Text Field Basic -->
<div data-name="Basic Text field">
<div class="form mar-t-sm">
<input id="text" type="text" placeholder=" " aria-label="text"
alt="text" pattern="[a-zA-Z]+"
data-error="Please enter A-Z alphabets only" required>
<label for="text" class="tc-ter-3">Text</label>
<span class="xxs tc-pr-4 animated invisible pad-l-xsm"></span>
</div>
</div>
<!-- Email ID Field Basic -->
<div data-name="Email ID field">
<div class="form mar-t-xsm">
<input id="email" type="email" placeholder=" " aria-label="email"
alt="email" pattern="[a-z0-9._%+-]+@[a-z0-9.-]+\.[a-z]{2,}$"
data-error="Please enter a valid email id" required>
<label for="email" class="tc-ter-3">Email ID</label>
<span class="xxs tc-pr-4 animated invisible pad-l-xsm"></span>
</div>
</div>
<!-- Number Field Basic -->
<div data-name="Number field">
<div class="form mar-t-xsm">
<input id="numbers" type="numbers" placeholder=" " aria-label="numbers"
alt="numbers" pattern="^[0-9]+$" data-error="Please enter 0-9 only"
required>
<label for="numbers" class="tc-ter-3">Numbers</label>
<span class="xxs tc-pr-4 animated invisible pad-l-xsm"></span>
</div>
</div>
<!-- Telephone Field Basic -->
<div data-name="Telephone field">
<div class="form mar-t-xsm">
<input id="tel" type="tel" placeholder=" " aria-label="tel" alt="tel"
pattern="^[0-9]+$" data-error="Please enter 0-9 only" required>
<label for="tel" class="tc-ter-3">Telephone</label>
<span class="xxs tc-pr-4 animated invisible pad-l-xsm"></span>
</div>
</div>
<!-- URL Field Basic -->
<div data-name="URL field">
<div class="form mar-t-xsm">
<input id="url" type="url" aria-label="url" placeholder=" " alt="url"
pattern="^(http|https|ftp)\://[a-zA-Z0-9\-\.]+\.[a-zA-Z]{2,3}(:[a-zA-Z0-9]*)?/?([a-zA-Z0-9\-\._\?\,\'/\\\+&amp;%\$#\=~])*$"
data-error="Please include http:// or https:// in the URL" required>
<label for="url" class="tc-ter-3">URL</label>
<span class="xxs tc-pr-4 animated invisible pad-l-xsm"></span>
</div>
</div>
<!-- Text Field with right icon -->
<div data-name="Input field with icon on right">
<div class="form mar-t-xsm">
<input type="text" placeholder=" " aria-label="text" alt="text"
pattern="[a-zA-Z]+" data-error="Please enter A-Z alphabets only"
required class="form--with-right-icon">
<label for="text" class="tc-ter-3">Text</label>
<p class="tc-ter-3"><i class="fas fa-code pad-r-xxs"></i></p>
<span class="xxs tc-pr-4 animated invisible pad-l-xsm"></span>
</div>
</div>
<!-- Password Field with peep icon -->
<div data-name="Password field with peep">
<div class="form mar-t-xsm">
<input type="password" placeholder=" " aria-label="password"
alt="password" pattern="^(?=[^\d_].*?\d)\w(\w|[!@#$%]){7,20}"
data-error="Please enter a valid password" required
class="form--with-right-icon">
<label for="text" class="tc-ter-3">Password</label>
<p class="tc-ter-3"><i class="fa fa-eye-slash pad-r-xxs password"></i>
</p>
<span class="xxs tc-pr-4 animated invisible pad-l-xsm"></span>
</div>
</div>
<!-- Text Field with left icon -->
<div data-name="Input field with icon on left">
<div class="form mar-t-xsm">
<input type="tel" placeholder=" " aria-label="tel" alt="tel"
pattern="^[0-9]+$" data-error="Please enter 0-9 only" required
class="form--with-left-icon">
<label for="tel" class="tc-ter-3">Phone No.</label>
<p class="tc-ter-3">
+91
<!-- insert the icon <i> tag here -->
</p>
<span class="xxs tc-pr-4 animated invisible pad-l-xsm"></span>
</div>
</div>
<!-- Text Area Basic -->
<div data-name="Textarea/Comment Box">
<div class="form mar-t-xsm">
<textarea id="comment" name="textarea" placeholder=" " aria-label="text"
class="width100" rows="10"></textarea>
<label for="comment" class="tc-ter-3">Textarea</label>
<span class="xxs tc-pr-4 animated invisible pad-l-xsm"></span>
</div>
</div>
<!-- Text Area with char count -->
<!-- Date Picker -->
<div data-name="Date picker">
<div class="form mar-t-xsm">
<!-- pattern="^((\d{4}))\/((0[1-9])|(1\d)|(2\d)|(3[0-1]))\/(|(0[1-9])|(1[0-2]))$" -->
<!-- ^(?:19|20)[0-9]{2}-(?:(?:0[1-9]|1[0-2])-(?:0[1-9]|1[0-9]|2[0-9])|(?:(?!02)(?:0[1-9]|1[0-2])-(?:30))|(?:(?:0[13578]|1[02])-31))$ -->
<input id="date" type="text" placeholder=" "
pattern="^((0[1-9])|(1\d)|(2\d)|(3[0-1]))\/(|(0[1-9])|(1[0-2]))\/((\d{4}))$"
aria-label="date" alt="date"
data-error="Please enter a date in DD-MM-YYYY format" required
default="today" earliest="1979" name="date"
class="form--with-right-icon">
<label for="Date" class="tc-ter-4">Date</label>
<div class="calendar-widget hide">
<div class="calendar-selection">
<div class="calendar-date">
<p class="xsm mar-zero tc-ter-3">September, 2019</p>
</div>
<div class="calendar-toggle">
<span class="pad-r-xsm"><i
class="fas fa-angle-left tc-ter-4"></i></span>
<span class="pad-l-xsm"><i
class="fas fa-angle-right tc-ter-4"></i></span>
</div>
</div>
<div class="calendar-year hide"></div>
<div class="calendar-week">
<div class="calendar-day">
<p class="xsm fw-light mar-zero tc-ter-4 text-center">
S
</p>
</div>
<div class="calendar-day">
<p class="xsm fw-light mar-zero tc-ter-4 text-center">
M
</p>
</div>
<div class="calendar-day">
<p class="xsm fw-light mar-zero tc-ter-4 text-center">
T
</p>
</div>
<div class="calendar-day">
<p class="xsm fw-light mar-zero tc-ter-4 text-center">
W
</p>
</div>
<div class="calendar-day">
<p class="xsm fw-light mar-zero tc-ter-4 text-center">
T
</p>
</div>
<div class="calendar-day">
<p class="xsm fw-light mar-zero tc-ter-4 text-center">
F
</p>
</div>
<div class="calendar-day">
<p class="xsm fw-light mar-zero tc-ter-4 text-center">
S
</p>
</div>
</div>
<div class="calendar-month pad-b-xs"></div>
</div>
<p class="tc-ter-3">
<i class="fas fa-calendar pad-r-xxs calendar"></i>
</p>
<span class="xxs tc-pr-4 animated invisible pad-l-xsm"></span>
</div>
</div>
<!-- upload -->
<div data-name="Upload field">
<div class="form mar-t-xsm">
<input type="file" placeholder=" " aria-label="file" alt="Upload a file"
name="upload" accept=".jpg, .jpeg, .png, .svg"
data-error="Please select a .jpg/.png/.svg/.jpeg file" required>
<button class="btn-outline bg-sc-4-onhover br-sc-4 tc-sc-4 tc-white-onhover mar-b-xxs
fw-regular" aria-label="Button name here">
Upload
</button>
<br>
<span class="xxs tc-pr-4 animated invisible"></span>
</div>
</div>
<!-- Range slider -->
<div data-name="Range field">
<div class="form">
<!-- step="10" -->
<input id="range" type="range" name="range" value="0" min="0" max="100"
step=10 data-error="Please scroll to provide an input" required>
<label for="range" class="invisible"
data-text="The value you have set is">
<h2>
<i class="fas fa-map-marker tc-sc-3"></i>
</h2>
<p class="xxs">0</p>
<!-- <span>The value you have set is </span>0 -->
<!-- <span class="fa-stack fa-2x">
<i class="fas fa-map-marker fa-stack-2x tc-sc-4"></i>
<i class="fas fa-stack-1x tc-white fw-med xsm">10</i>
</span> -->
</label>
<span class="xxs tc-pr-4 animated invisible">
&nbsp;
</span>
</div>
</div>
<!-- Submit Button -->
<!-- <button class="btn-fill mar-l-xs mar-r-xs fw-regular bg-gr-1 tc-white mar-t-xs" aria-label="Submit" type="submit">Submit-->
<!-- </button>-->
<!-- </form>-->
</div>
</div>
</div>
</div>
<div class="row">
<div class="col-sm-12 mar-b-xs">
<p class="mar-b-zero text-uppercase xsm tc-ter-4">View Code</p>
<div class="width100" data-code="Forms & Inputs"></div>
</div>
</div>
<hr class="mar-t-zero mar-b-sm br-ter-4">
<!-- Popups -->
<div class="row" id="popups">
<div class="col-sm-4 pad-t-sm">
<h3 class="tc-ter-4">
Popups
</h3>
<p class="tc-ter-4 text-left">
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor
incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud
exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
</p>
</div>
<div class="col-sm-offset-1 col-sm-3 pad-b-sm pad-mobile-lr-zero">
<div class="disp-tab width100">
<div class="disp-tab-cell text-center">
<div data-name="Alert styled Popup">
<a
onclick="document.querySelector('#ds-popup-alert').classList.toggle('invisible')">
<button
class="btn-text bg-ter-1-onhover tc-sc-4 fw-regular xmd mar-b-xs"
aria-label="Show Alert">
Show Alert
</button>
</a>
</div>
<!-- Popup Alert -->
<div class="popup invisible" id="ds-popup-alert" not-closeable>
<div class="popup--with-form pad-t-xs pad-r-xs pad-b-xxs pad-l-xs">
<div class="popup-title">
<h3 class="tc-ter-4 mar-b-xxs">
Title goes here
</h3>
<p class="tc-ter-4">
Sed ut perspiciatis unde omnis iste natus
</p>
</div>
<div class="popup-form">
<form action="">
<div class="width100 f-right">
<button
class="btn-text bg-ter-1-onhover tc-sc-4 fw-regular mar-t-xs"
aria-label="Button name">
Cancel
</button>
<button
class="btn-fill fw-regular bg-gr-1 tc-white mar-t-xs"
aria-label="Submit" type="submit">
Submit
</button>
</div>
</form>
</div>
</div>
<div class="popup-close hide">
<i class="fas fa-times tc-ter-3"></i>
</div>
<div class="popup-background"></div>
</div>
<div data-name="A Simple Popup">
<a
onclick="document.querySelector('#ds-popup-simple').classList.toggle('invisible')">
<button
class="btn-text bg-ter-1-onhover tc-sc-4 fw-regular xmd mar-b-xs"
aria-label="Show Simple Popup">
Show Simple Popup
</button>
</a>
</div>
<!-- Popup Simple -->
<div class="popup invisible" id="ds-popup-simple">
<div class="popup--with-form pad-t-xs pad-r-xs pad-b-xxs pad-l-xs">
<div class="popup-title">
<div class="card-basic mar-r-zero mar-b-xs">
<div class="card-image br-sc-5">
<img loading="lazy" data-src="./img/1.svg" alt="1.svg"
title="1.svg" src="./img/1.svg">
</div>
<div class="card-body pad-t-xs pad-r-xs pad-b-xs pad-l-xs">
<h3 class="tc-ter-4 mar-b-xxs">
Title goes here
</h3>
<p class="tc-ter-4 mar-zero">
Lorem ipsum dolor sit amet, consectetur adipiscing elit,
sed
do eiusmod tempor
incididunt ut
</p>
</div>
</div>
</div>
<div class="popup-form">
<form action="">
<div class="form mar-t-xsm">
<input type="text" placeholder=" " aria-label="text"
alt="text" pattern="[a-zA-Z]+"
data-error="Please enter A-Z alphabets only"
required="">
<label for="text" class="tc-ter-4">Name</label>
<span
class="xxs tc-pr-4 animated invisible pad-l-xsm"></span>
</div>
<div class="form mar-t-xsm">
<input type="email" placeholder=" " aria-label="email"
alt="email"
pattern="[a-z0-9._%+-]+@[a-z0-9.-]+\.[a-z]{2,}$"
data-error="Please enter a valid email id" required="">
<label for="email" class="tc-ter-4">Email ID</label>
<span
class="xxs tc-pr-4 animated invisible pad-l-xsm"></span>
</div>
<div class="form mar-t-xsm">
<input class="dropdown" type="text" placeholder=" "
aria-label="text" alt="text"
data-error="What you searched for isn't in this list"
required="">
<label for="text" class="tc-ter-4">City</label>
<ul class="list--basic">
<li
class="tc-ter-4 fw-light text-left bg-ter-1-onhover disabled">
<p class="mar-zero text-left">Disabled item</p>
</li>
<li
class="tc-ter-4 fw-light text-left bg-ter-1-onhover">
<p class="mar-zero text-left">Selected item</p>
</li>
<li
class="tc-ter-4 fw-light text-left bg-ter-1-onhover">
<p class="mar-zero text-left">Menu item</p>
</li>
</ul>
<span
class="xxs tc-pr-4 animated invisible pad-l-xsm"></span>
</div>
<div class="width100">
<button
class="btn-fill mar-l-xs mar-r-xs fw-regular bg-gr-1 tc-white mar-t-xs"
aria-label="Submit" type="submit">
Submit
</button>
</div>
</form>
</div>
<div class="popup-close">
<i class="fas fa-times tc-ter-3"></i>
</div>
</div>
<div class="popup-background"></div>
</div>
<div data-name="Scrollable Popup">
<a
onclick="document.querySelector('#ds-popup-with-scroll').classList.toggle('invisible')">
<button
class="btn-text bg-ter-1-onhover tc-sc-4 fw-regular xmd mar-b-xs"
aria-label="Show Scrollable Popup">
Show Scrollable Popup
</button>
</a>
</div>
<!-- Popup Scrollable -->
<div class="popup invisible" id="ds-popup-with-scroll" not-closeable>
<div class="popup--with-content pad-t-xs pad-r-xs pad-b-xs pad-l-xs">
<div class="popup-title">
<h3 class="tc-ter-4 mar-b-xxs">
Title goes here
</h3>
<p class="tc-ter-4">
Sed ut perspiciatis unde omnis iste natus
</p>
</div>
<div class="popup-scrollable">
<p class="tc-ter-4 text-left">
Sed ut perspiciatis unde omnis iste natus error sit voluptatem
accusantium doloremque
laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore
veritatis et quasi
architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam
voluptatem quia voluptas sit
aspernatur aut odit aut fugit, sed quia consequuntur magni
dolores
eos qui ratione
voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem
ipsum quia dolor sit amet,
consectetur, adipisci velit, sed quia non numquam eius modi
tempora
incidunt ut labore et
dolore magnam aliquam quaerat voluptatem. Ut enim ad minima
veniam,
quis nostrum
exercitationem ullam corporis suscipit laboriosam, nisi ut
aliquid
ex ea commodi
consequatur? <br>Quis autem vel eum iure reprehenderit qui in ea
voluptate velit esse quam
nihil
molestiae consequatur, vel illum qui dolorem eum fugiat quo
voluptas
nulla pariatur?
Sed ut perspiciatis unde omnis iste natus error sit voluptatem
accusantium doloremque
laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore
veritatis et quasi
architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam
voluptatem quia voluptas sit
aspernatur aut odit aut fugit, sed quia consequuntur magni
dolores
eos qui ratione
voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem
ipsum quia dolor sit amet,
consectetur, adipisci velit, sed quia non numquam eius modi
tempora
incidunt ut labore et
dolore magnam aliquam quaerat voluptatem. Ut enim ad minima
veniam,
quis nostrum
exercitationem ullam corporis suscipit laboriosam, nisi ut
aliquid
ex ea commodi
consequatur? <br>Quis autem vel eum iure reprehenderit qui in ea
voluptate velit esse quam
nihil
molestiae consequatur, vel illum qui dolorem eum fugiat quo
voluptas
nulla pariatur?
Sed ut perspiciatis unde omnis iste natus error sit voluptatem
accusantium doloremque
laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore
veritatis et quasi
architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam
voluptatem quia voluptas sit
aspernatur aut odit aut fugit, sed quia consequuntur magni
dolores
eos qui ratione
voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem
ipsum quia dolor sit amet,
consectetur, adipisci velit, sed quia non numquam eius modi
tempora
incidunt ut labore et
dolore magnam aliquam quaerat voluptatem. <br>Ut enim ad minima
veniam, quis nostrum
exercitationem ullam corporis suscipit laboriosam, nisi ut
aliquid
ex ea commodi
consequatur? Quis autem vel eum iure reprehenderit qui in ea
voluptate velit esse quam nihil
molestiae consequatur, vel illum qui dolorem eum fugiat quo
voluptas
nulla pariatur?
Sed ut perspiciatis unde omnis iste natus error sit voluptatem
accusantium doloremque
laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore
veritatis et quasi
architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam
voluptatem quia voluptas sit
aspernatur aut odit aut fugit, sed quia consequuntur magni
dolores
eos qui ratione
voluptatem sequi nesciunt. <br>Neque porro quisquam est, qui
dolorem
ipsum quia dolor sit
amet,
consectetur, adipisci velit, sed quia non numquam eius modi
tempora
incidunt ut labore et
dolore magnam aliquam quaerat voluptatem. Ut enim ad minima
veniam,
quis nostrum
exercitationem ullam corporis suscipit laboriosam, nisi ut
aliquid
ex ea commodi
consequatur? Quis autem vel eum iure reprehenderit qui in ea
voluptate velit esse quam nihil
molestiae consequatur, vel illum qui dolorem eum fugiat quo
voluptas
nulla pariatur?
Sed ut perspiciatis unde omnis iste natus error sit voluptatem
accusantium doloremque
laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore
veritatis et quasi
architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam
voluptatem quia voluptas sit
aspernatur aut odit aut fugit, sed quia consequuntur magni
dolores
eos qui ratione
voluptatem sequi nesciunt. <br>Neque porro quisquam est, qui
dolorem
ipsum quia dolor sit
amet,
consectetur, adipisci velit, sed quia non numquam eius modi
tempora
incidunt ut labore et
dolore magnam aliquam quaerat voluptatem. Ut enim ad minima
veniam,
quis nostrum
exercitationem ullam corporis suscipit laboriosam, nisi ut
aliquid
ex ea commodi
consequatur? Quis autem vel eum iure reprehenderit qui in ea
voluptate velit esse quam nihil
molestiae consequatur, vel illum qui dolorem eum fugiat quo
voluptas
nulla pariatur?
</p>
</div>
<div class="popup-cta">
<div class="pad-t-xs f-right">
<div class="disp-inline">
<form>
<div class="form">
<input id="disclaimer" type="checkbox" name="roman"
value="disclaimer" required="">
<label for="disclaimer" class="tc-ter-4 mar-b-xxs">I
have read the
disclaimer</label>
<span
class="xxs tc-pr-4 animated invisible pad-l-sm">
<i
class="fa fa-exclamation-circle pad-r-xxs"></i>Please
check
the box alongside
</span>
</div>
<button
class="btn-fill fw-regular bg-gr-1 tc-white f-right mar-t-xs mar-b-zero"
aria-label="Submit" type="submit"
onsubmit="document.querySelector('#ds-popup-with-scroll').classList.toggle('invisible')">
Submit
</button>
</form>
</div>
</div>
</div>
</div>
<div class="popup-close hide">
<i class="fas fa-times tc-ter-3"></i>
</div>
<div class="popup-background"></div>
</div>
<div data-name="Basic Form Popup">
<a
onclick="document.querySelector('#ds-popup-with-form').classList.toggle('invisible')">
<button
class="btn-text bg-ter-1-onhover tc-sc-4 fw-regular xmd mar-b-xs"
aria-label="Show Popup with form">
Show Popup with form
</button>
</a>
</div>
<!-- Popup Simple with basic card with Form -->
<div class="popup invisible" id="ds-popup-with-form">
<div class="popup--with-form pad-t-xs pad-r-xs pad-b-xxs pad-l-xs">
<div class="" id="popup_form">
<div class="popup-title">
<h3 class="tc-ter-4 mar-b-xxs">
Title goes here
</h3>
<p class="tc-ter-4">
Sed ut perspiciatis unde omnis iste natus
</p>
</div>
<div class="popup-form">
<form action="" id="submit-form">
<div class="form mar-t-xsm">
<input type="text" placeholder=" " aria-label="text"
alt="text" pattern="[a-zA-Z ]*$"
data-error="Please enter A-Z alphabets only"
required="">
<label for="text" class="tc-ter-4">Name</label>
<span
class="xxs tc-pr-4 animated invisible pad-l-xsm"></span>
</div>
<div class="form mar-t-xsm">
<input type="email" placeholder=" " aria-label="email"
alt="email"
pattern="[a-z0-9._%+-]+@[a-z0-9.-]+\.[a-z]{2,}$"
data-error="Please enter a valid email id" required="">
<label for="email" class="tc-ter-4">Email ID</label>
<span
class="xxs tc-pr-4 animated invisible pad-l-xsm"></span>
</div>
<div class="form mar-t-xsm">
<input class="dropdown form--with-right-icon city-list"
type="text" placeholder=" " aria-label="text" alt="text"
data-error="What you searched for isn't in this list"
required="">
<label for="text" class="tc-ter-4">City</label>
<ul class="list--basic">
</ul>
<p class="tc-ter-3"><i
class="fas fa-caret-down pad-r-xxs"></i></p>
<span
class="xxs tc-pr-4 animated invisible pad-l-xsm"></span>
</div>
<div class="width100">
<button
class="btn-fill mar-l-xs mar-r-xs fw-regular bg-gr-1 tc-white mar-t-xs"
aria-label="Submit" type="submit">
Submit
</button>
</div>
<script>
document.getElementById('submit-form').addEventListener('submit',function(e){
e.preventDefault();
document.getElementById('popup_form').classList.toggle('hide');
document.getElementById('thank-you').classList.toggle('hide');
});
</script>
</form>
</div>
<div class="popup-disclaimer">
<div class="accordion">
<ul class="list--left-icon">
<li
class="tc-ter-4 fw-light text-left bg-ter-1-onhover accordion-item mar-zero">
<input type="checkbox" class="accordion-checkbox">
<span class="accordion-caret"><i
class="fas fa-angle-down tc-ter-4"></i></span>
<p class="xsm mar-b-xxs">Disclaimer</p>
<div class="accordion-text">
<p class="tc-ter-4 mar-zero pad-t-xs xxs">
Sed ut perspiciatis unde omnis iste natus error
sit
voluptatem accusantium
doloremque
laudantium, totam rem
</p>
</div>
</li>
</ul>
</div>
</div>
</div>
<div class="hide" id="thank-you">
<div class="col-sm-12 pad-lr-zero">
<!-- change col-sm-12 above to suit case -->
<h2 class="mar-zero text-center">
<span class="fa-stack fa-2x">
<i class="fas fa-circle fa-stack-2x tc-alt-1"></i>
<i class="fas fa-check fa-stack-1x tc-white"></i>
</span>
</h2>
<h3 class="tc-ter-4 mar-b-xxs text-center">
Thank you for showing interest in opening an account with us!
</h3>
<p class="tc-ter-4 mar-zero text-center">
Our executive will get in touch with you shortly.
</p>
<div class="mar-t-xs mar-b-sm text-center">
<a href="#" aria-label="">
<button class="btn-text bg-ter-1-onhover tc-sc-4 fw-regular" aria-label="Done">
Done
</button>
</a>
</div>
</div>
</div>
<div class="popup-close">
<i class="fas fa-times tc-ter-3"></i>
</div>
</div>
<div class="popup-background"></div>
</div>
</div>
</div>
</div>
</div>
<hr class="mar-t-zero mar-b-sm br-ter-4">
<!-- Image Decoration -->
<div class="row" id="image-decoration">
<div class="col-sm-4 pad-t-sm">
<h3 class="tc-ter-4">
Image Decoration
</h3>
<h5 class="tc-ter-4">
Fill Button
</h5>
</div>
<div class="col-sm-offset-1 col-sm-3 pad-t-sm pad-b-sm pad-mobile-lr-zero">
<!-- <div class="disp-tab width100">
<div class="disp-tab-cell text-center">
Masonry (Column layout)
</div>
</div> -->
<div class="row">
<div class="col-sm-12 pad-lr-zero">
<!-- Carousel with one card shown at a time -->
<div class="carousel-one">
<div class="item">
<div class="card--for-testimonials mar-b-xs" data-score="3.5"
data-reviews="1250" data-person="Sandhya Kannan">
<div class="card-icon br-sc-5 pad-t-xs pad-l-xxs">
<span class="fa-stack fa-2x">
<i class="fas fa-circle fa-stack-2x tc-sc-4"></i>
<p class="fas fa-user fa-stack-1x tc-white"
data-render-person></p>
</span>
</div>
<div class="card-content has-values-to-set pad-r-xs pad-l-xxs">
<h4 class="tc-ter-4 mar-b-xxs">
Firstname Secondname
</h4>
<p class="xsm mar-zero tc-ter-3 pad-t-xxs" data-render-score
data-render-reviews>
<span class="pad-r-xsm">
<i class="far fa-star tc-alt-2"></i>
<i class="far fa-star tc-alt-2"></i>
<i class="far fa-star tc-alt-2"></i>
<i class="far fa-star tc-alt-2"></i>
<i class="far fa-star tc-alt-2"></i>
</span> ~ (~)
</p>
</div>
<div class="card-testimonial pad-r-xs pad-b-xs pad-l-xs">
<p class="tc-ter-4 mar-zero">
Sed ut perspiciatis unde omnis iste natus error sit
voluptatem
accusantium doloremque laudantium,
totam rem aperiam, eaque ipsa quae ab illo inventore
veritatis et
quasi architecto beatae vitae
dicta sunt explicabo. Nemo enim ipsam voluptatem quia
voluptas sit
aspernatur aut odit aut fugit,
sed quia consequuntur magni dolores
</p>
</div>
</div>
</div>
<div class="item">
<div class="card--for-testimonials mar-b-xs" data-score="3.5"
data-reviews="1250" data-person="Sandhya Kannan">
<div class="card-icon br-sc-5 pad-t-xs pad-l-xxs">
<span class="fa-stack fa-2x">
<i class="fas fa-circle fa-stack-2x tc-sc-4"></i>
<p class="fas fa-user fa-stack-1x tc-white"
data-render-person></p>
</span>
</div>
<div class="card-content has-values-to-set pad-r-xs pad-l-xxs">
<h4 class="tc-ter-4 mar-b-xxs">
Firstname Secondname
</h4>
<p class="xsm mar-zero tc-ter-3 pad-t-xxs" data-render-score
data-render-reviews>
<span class="pad-r-xsm">
<i class="far fa-star tc-alt-2"></i>
<i class="far fa-star tc-alt-2"></i>
<i class="far fa-star tc-alt-2"></i>
<i class="far fa-star tc-alt-2"></i>
<i class="far fa-star tc-alt-2"></i>
</span> ~ (~)
</p>
</div>
<div class="card-testimonial pad-r-xs pad-b-xs pad-l-xs">
<p class="tc-ter-4 mar-zero">
Sed ut perspiciatis unde omnis iste natus error sit
voluptatem
accusantium doloremque laudantium,
totam rem aperiam, eaque ipsa quae ab illo inventore
veritatis et
quasi architecto beatae vitae
dicta sunt explicabo. Nemo enim ipsam voluptatem quia
voluptas sit
aspernatur aut odit aut fugit,
sed quia consequuntur magni dolores
</p>
</div>
</div>
</div>
<div class="item">
<div class="card--for-testimonials mar-b-xs" data-score="3.5"
data-reviews="1250" data-person="Sandhya Kannan">
<div class="card-icon br-sc-5 pad-t-xs pad-l-xxs">
<span class="fa-stack fa-2x">
<i class="fas fa-circle fa-stack-2x tc-sc-4"></i>
<p class="fas fa-user fa-stack-1x tc-white"
data-render-person></p>
</span>
</div>
<div class="card-content has-values-to-set pad-r-xs pad-l-xxs">
<h4 class="tc-ter-4 mar-b-xxs">
Firstname Secondname
</h4>
<p class="xsm mar-zero tc-ter-3 pad-t-xxs" data-render-score
data-render-reviews>
<span class="pad-r-xsm">
<i class="far fa-star tc-alt-2"></i>
<i class="far fa-star tc-alt-2"></i>
<i class="far fa-star tc-alt-2"></i>
<i class="far fa-star tc-alt-2"></i>
<i class="far fa-star tc-alt-2"></i>
</span> ~ (~)
</p>
</div>
<div class="card-testimonial pad-r-xs pad-b-xs pad-l-xs">
<p class="tc-ter-4 mar-zero">
Sed ut perspiciatis unde omnis iste natus error sit
voluptatem
accusantium doloremque laudantium,
totam rem aperiam, eaque ipsa quae ab illo inventore
veritatis et
quasi architecto beatae vitae
dicta sunt explicabo. Nemo enim ipsam voluptatem quia
voluptas sit
aspernatur aut odit aut fugit,
sed quia consequuntur magni dolores
</p>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="row">
<div class="col-sm-offset-1 col-sm-10">
<!-- Carousel with three cards shown at a time -->
<div class="carousel">
<div class="item">
<div class="card-horizontal--with-icon-with-text mar-b-xs mar-t-xsm mar-r-xsm "
data-equalizer data-parent="carousel-1">
<div class="card-icon br-sc-5 pad-t-xs">
<span class="fa-stack fa-2x">
<i class="fas fa-circle fa-stack-2x tc-sc-4"></i>
<i class="fas fa-eye fa-stack-1x tc-white"></i>
</span>
</div>
<div class="card-content pad-t-xs pad-r-xs pad-b-xs pad-l-xxs">
<h3 class="tc-ter-4 mar-b-xxs text-left">
Powerful watchlist
</h3>
<p class="tc-ter-4 mar-zero text-left">
Customize your watchlist with loads of info to choose from
</p>
</div>
</div>
</div>
<div class="item">
<div class="card-horizontal--with-icon-with-text mar-b-xs mar-t-xsm mar-r-xsm "
data-equalizer data-parent="carousel-1">
<div class="card-icon br-sc-5 pad-t-xs">
<span class="fa-stack fa-2x">
<i class="fas fa-circle fa-stack-2x tc-sc-3"></i>
<i class="fas fa-newspaper fa-stack-1x tc-white"></i>
</span>
</div>
<div class="card-content pad-t-xs pad-r-xs pad-b-xs pad-l-xxs">
<h3 class="tc-ter-4 mar-b-xxs text-left">
Buzzing News
</h3>
<p class="tc-ter-4 mar-zero text-left">
Catch all the action from local & social arena
</p>
</div>
</div>
</div>
<div class="item">
<div class="card-horizontal--with-icon-with-text mar-b-xs mar-t-xsm mar-r-xsm "
data-equalizer data-parent="carousel-1">
<div class="card-icon br-sc-5 pad-t-xs">
<span class="fa-stack fa-2x">
<i class="fas fa-circle fa-stack-2x tc-sc-5"></i>
<i class="fas fa-fire-alt fa-stack-1x tc-white"></i>
</span>
</div>
<div class="card-content pad-t-xs pad-r-xs pad-b-xs pad-l-xxs">
<h3 class="tc-ter-4 mar-b-xxs text-left">
Sentiment Heatmap
</h3>
<p class="tc-ter-4 mar-zero text-left">
A unique news based heatmap cloud of buzzing sectors & companies
</p>
</div>
</div>
</div>
<div class="item">
<div class="card-horizontal--with-icon-with-text mar-b-xs mar-t-xsm mar-r-xsm "
data-equalizer data-parent="carousel-1">
<div class="card-icon br-sc-5 pad-t-xs">
<span class="fa-stack fa-2x">
<i class="fas fa-circle fa-stack-2x tc-sc-4"></i>
<i class="fas fa-hand-point-up fa-stack-1x tc-white"></i>
</span>
</div>
<div class="card-content pad-t-xs pad-r-xs pad-b-xs pad-l-xxs">
<h3 class="tc-ter-4 mar-b-xxs text-left">
Market @ Fingertips
</h3>
<p class="tc-ter-4 mar-zero text-left">
Know all about your favourite stocks & contracts under one roof
</p>
</div>
</div>
</div>
<div class="item">
<div class="card-horizontal--with-icon-with-text mar-b-xs mar-t-xsm mar-r-xsm "
data-equalizer data-parent="carousel-1">
<div class="card-icon br-sc-5 pad-t-xs">
<span class="fa-stack fa-2x">
<i class="fas fa-circle fa-stack-2x tc-sc-3"></i>
<i class="fas fa-project-diagram fa-stack-1x tc-white"></i>
</span>
</div>
<div class="card-content pad-t-xs pad-r-xs pad-b-xs pad-l-xxs">
<h3 class="tc-ter-4 mar-b-xxs text-left">
Option Chain
</h3>
<p class="tc-ter-4 mar-zero text-left">
Track option & execute strategy orders from the same screen
</p>
</div>
</div>
</div>
<div class="item">
<div class="card-horizontal--with-icon-with-text mar-b-xs mar-t-xsm "
data-equalizer data-parent="carousel-1">
<div class="card-icon br-sc-5 pad-t-xs">
<span class="fa-stack fa-2x">
<i class="fas fa-circle fa-stack-2x tc-sc-5"></i>
<i class="fas fa-shopping-cart fa-stack-1x tc-white"></i>
</span>
</div>
<div class="card-content pad-t-xs pad-r-xs pad-b-xs pad-l-xxs">
<h3 class="tc-ter-4 mar-b-xxs text-left">
Bulk Order
</h3>
<p class="tc-ter-4 mar-zero text-left">
Place multiple orders from one screen
</p>
</div>
</div>
</div>
<div class="item">
<div class="card-horizontal--with-icon-with-text mar-b-xs mar-t-xsm mar-r-xsm "
data-equalizer data-parent="carousel-1">
<div class="card-icon br-sc-5 pad-t-xs">
<span class="fa-stack fa-2x">
<i class="fas fa-circle fa-stack-2x tc-sc-4"></i>
<i class="fas fa-chart-area fa-stack-1x tc-white"></i>
</span>
</div>
<div class="card-content pad-t-xs pad-r-xs pad-b-xs pad-l-xxs">
<h3 class="tc-ter-4 mar-b-xxs text-left">
Research
</h3>
<p class="tc-ter-4 mar-zero text-left">
Get readymade recommendation from the Kotak Advisory
</p>
</div>
</div>
</div>
<div class="item">
<div class="card-horizontal--with-icon-with-text mar-b-xs mar-t-xsm mar-r-xsm "
data-equalizer data-parent="carousel-1">
<div class="card-icon br-sc-5 pad-t-xs">
<span class="fa-stack fa-2x">
<i class="fas fa-circle fa-stack-2x tc-sc-3"></i>
<i class="fas fa-binoculars fa-stack-1x tc-white"></i>
</span>
</div>
<div class="card-content pad-t-xs pad-r-xs pad-b-xs pad-l-xxs">
<h3 class="tc-ter-4 mar-b-xxs text-left">
Realtime Screeners
</h3>
<p class="tc-ter-4 mar-zero text-left">
Catch action as it happens through screeners
</p>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<hr class="mar-t-zero mar-b-sm br-ter-4">
<!-- Snack-bar -->
<div class="row" id="snackbar">
<div class="col-sm-4 pad-t-sm">
<h3 class="tc-ter-4">
Snack-bar
</h3>
<p class="tc-ter-4 text-left">
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor
incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud
exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
</p>
</div>
<div class="col-sm-offset-1 col-sm-3 pad-b-sm pad-mobile-lr-zero">
<div class="disp-tab width100">
<div class="disp-tab-cell text-center pad-t-md pad-b-lg">
<a
onclick="document.querySelector('.snackbar--column').classList.toggle('hide')">
<button
class="btn-text bg-ter-1-onhover tc-sc-4 fw-regular mar-r-xxs mar-b-xxs xmd"
aria-label="Button name">
Show Snackbar
</button>
</a>
<!-- Snack-bar linear -->
<div class="snackbar--column top-right hide">
<div class="snackbar snackbar--stacked mar-b-xs">
<div class="snackbar-accent br-alt-1"></div>
<div class="snackbar-text pad-t-xs pad-r-xs pad-b-xxs pad-l-xs">
<p class="tc-ter-4 mar-b-xxs fw-med">
Title goes here
</p>
<p class="xsm tc-ter-4 mar-zero fw-light">
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do
eiusmod tempor
incididunt
ut
</p>
</div>
<div class="snackbar-button">
<a href="#" aria-label="">
<button
class="btn-text bg-ter-1-onhover tc-sc-4 fw-regular mar-r-xxs mar-b-xxs xmd"
aria-label="Button name">
Button name
</button>
</a>
</div>
</div>
<div class="snackbar snackbar--stacked mar-b-xs">
<div class="snackbar-text pad-t-xs pad-r-xs pad-b-xs pad-l-xs">
<p class="tc-ter-4 mar-b-xxs fw-med">
Title goes here
</p>
<p class="xsm tc-ter-4 mar-zero fw-light">
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do
eiusmod tempor
incididunt
ut
</p>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<hr class="mar-t-zero mar-b-sm br-ter-4">
<!-- Menus -->
<!-- <div class="row">-->
<!-- <div class="col-sm-4">-->
<!-- <h3 class="tc-ter-4">-->
<!-- Menus-->
<!-- </h3>-->
<!-- </div>-->
<!-- <div class="col-sm-offset-1 col-sm-3 pad-b-sm pad-mobile-lr-zero">-->
<!-- <div class="disp-tab width100">-->
<!-- <div class="disp-tab-cell text-center">-->
<!-- -->
<!-- </div>-->
<!-- </div>-->
<!-- </div>-->
<!-- </div>-->
<!-- <hr class="mar-t-zero mar-b-sm br-ter-4"> -->
<!-- Miscellaneous -->
<!-- <div class="row">
<div class="col-sm-4">
<h3 class="tc-ter-4">
Miscellaneous
</h3>
<h5 class="tc-ter-4">
Fill Button
</h5>
</div>
<div class="col-sm-offset-1 col-sm-3 pad-b-sm pad-mobile-lr-zero">
<div class="disp-tab width100">
<div class="disp-tab-cell text-center">
Action List Anchored Menu
Sheet from bottom
Sheet from side
</div>
</div>
</div>
</div> -->
</div>
</div>
</div>
</div>
</main>
<script src="./script.min.js"></script>
<!-- <script src="./src/script.js"></script> -->
<script defer src="./design-system.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.9.0/css/all.min.css" defer>
</body>
</html>
Raw
Script.js
// Helper functions
function childWithClassSelector(every, nameOfClass) {
return Array.from(every.parentElement.children).filter(function(eachChild) {
if (eachChild.classList.contains(nameOfClass)) {
return eachChild;
}
});
}
function isMobile() {
return /Android|Linux armv7l|BlackBerry|iPhone|iPad|iPod|null/i.test(
navigator.platform
);
}
function lazyLoadImages() {
document.addEventListener("DOMContentLoaded", function() {
var lazyImages = [].slice.call(document.querySelectorAll("img"));
if ("IntersectionObserver" in window) {
var lazyImageObserver = new IntersectionObserver(function(entries) {
entries.forEach(function(entry) {
if (entry.isIntersecting) {
var lazyImage = entry.target;
lazyImage.src = lazyImage.dataset.src;
lazyImage.classList.remove("lazy");
lazyImageObserver.unobserve(lazyImage);
}
});
});
lazyImages.forEach(function(lazyImage) {
lazyImageObserver.observe(lazyImage);
});
} else {
// lazyImages.forEach(function (eachImg) {
// eachImg.src = eachImg.dataset.src;
// })
for (var l = 0; l < lazyImages.length; l++) {
lazyImages[l].setAttribute(
"src",
lazyImages[l].getAttribute("data-src")
);
}
}
});
}
// These functions set the size of components
function square(element) {
var elementWidth = element.clientWidth;
element.setAttribute("style", "min-height:" + elementWidth + "px;");
}
function equalize() {
var dataSet = document.querySelectorAll("[data-equalizer]");
function sameHeight(each) {
each.setAttribute("style", "height: ");
height.push(each.clientHeight);
height.sort(function(a, b) {
return b - a;
});
}
var height = [];
var identifier = [];
var getSubset = [];
for (var i = 0; i < dataSet.length; i++) {
identifier = dataSet[i].getAttribute("data-parent");
getSubset = document.querySelectorAll("[data-parent =" + identifier + "]");
getSubset.forEach(function(each) {
sameHeight(each);
});
getSubset.forEach(function(each) {
each.setAttribute("style", "height: " + height[0] + "px;");
});
}
}
// These functions set the contents of components
function mobileMenu() {
var mobileMenu = document.createElement("div");
mobileMenu.classList.value =
"mobile-menu mobile pad-t-xsm mobile--hide-in-landscape";
mobileMenu.innerHTML =
'<svg class="visible-inline" width="100%" viewBox="0 0 10 10" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xml:space="preserve" xmlns:serif="http://www.serif.com/" style="fill-rule:evenodd;clip-rule:evenodd;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:1.5;"><style>.upperbar{transform: rotate(-45deg);} .lowerbar{transform: rotate(45deg);} .bars{stroke:#003975;fill:none; stroke-width:0.24px; -webkit-transform-origin-y: 50%; -webkit-transform-origin-x: 55%; transform-origin: 55% 50%; transform: rotate(0deg); transition: 0.4s all ease-in-out; pointer-events: none;}@media(prefers-color-scheme:dark) {.bars{ stroke: #fff;}}</style><path class="bars" d="M1.2,4.08l7.2,0"></path><path class="bars" d="M1.2,5.886l7.2,0"></path></svg>';
document.querySelectorAll("[data-menu]")[0].appendChild(mobileMenu);
document.querySelector(".mobile-menu").addEventListener("click", function(e) {
var upperBar = e.target.children[1];
var lowerBar = e.target.children[2];
upperBar.classList.toggle("upperbar");
lowerBar.classList.toggle("lowerbar");
console.log(upperBar, lowerBar);
if (document.querySelectorAll("aside.is-menu")) {
document.querySelectorAll("aside.is-menu")[0].classList.toggle("open");
}
});
}
function progressIndicator() {
window.addEventListener("scroll", function() {
var winScroll =
document.body.scrollTop || document.documentElement.scrollTop;
var height =
document.documentElement.scrollHeight -
document.documentElement.clientHeight;
var scrolled = (winScroll / height) * 100;
document
.querySelector("[data-progress-indicator]")
.setAttribute("style", "width:" + scrolled + "%;");
});
}
function cityList(each) {
var cities = {
Mumbai: 104,
"Delhi - NCR": 51,
Kolkata: 39,
Chennai: 71,
Ahmedabad: 93,
Bangalore: 69,
Hydrabad: 75,
Pune: 108,
Nashik: 1787,
Jaipur: 56,
Agartala: 430,
Agra: 46,
Ahmednagar: 592,
Akola: 495,
Aligarh: 1812,
Allahbad: 47,
Ambala: 1759,
Amravati: 498,
Amritsar: 48,
Anakapalli: 801,
Anand: 94,
Asansol: 29,
Aurangabad: 618,
Balasore: 426,
Barasat: 734,
Bareilly: 398,
Baroda: 95,
Begusarai: 1017,
Belgaum: 70,
Bellary: 766,
Berhampur: 786,
Bhagalpur: 816,
Bhatinda: 641,
Bhilai: 1237,
Bhilwara: 512,
Bhopal: 96,
Bhubaneswar: 31,
Bikaner: 725,
Bilaspur: 633,
Bokaro: 32,
Burdwan: 34,
Calicut: 482,
Chandannagore: 735,
"Chandigarh ": 49,
Cochin: 72,
Coimbatore: 73,
Coochbehar: 710,
Cuttak: 35,
"Daman & Diu": 605,
Davangere: 1822,
Dehradun: 50,
Dhanbad: 36,
Dharmapuri: 952,
Gandhidham: 1278,
Gangtok: 828,
Ghaziabad: 53,
Gondia: 1696,
Gorakhpur: 649,
Guntur: 451,
Gurgaon: 54,
Guwahati: 55,
Haldia: 611,
Haveli: 604,
Hazaribhag: 636,
Hoogly: 1753,
Hoshiarpur: 760,
Hospet: 1805,
Howrah: 38,
Hubli: 74,
Hyderabad: 75,
Indore: 100,
Jabalpur: 716,
Jalandhar: 57,
Jalgaon: 1266,
Jamanagar: 101,
"Jammu ": 659,
Jamshedpur: 58,
Jharsuguda: 845,
Jodhpur: 60,
Kadi: 923,
Kakinada: 76,
Kanchipuram: 1764,
Kannur: 690,
Kanpur: 61,
Karimnagar: 949,
Karur: 394,
Kolhapur: 102,
Kollam: 565,
Korba: 621,
Kota: 525,
Kottayam: 687,
Kurnool: 460,
Lucknow: 62,
Ludhiana: 63,
Madurai: 77,
Malda: 1234,
Mandigobindgarh: 1064,
Mangalore: 78,
Meerut: 396,
Mehsana: 103,
Mohali: 756,
Moradabad: 64,
Muzaffarpur: 1350,
Mysore: 589,
Nagpur: 105,
"Nalco Nagar": 796,
Namakkal: 79,
Navsari: 931,
Nellore: 836,
Noida: 65,
"Noida ": 400,
Ongole: 466,
Palakkad: 1314,
Panchkula: 1030,
Panjim: 1732,
Patiala: 655,
Patna: 40,
Phagwara: 551,
Pollachi: 576,
Pondicherry: 80,
Produttur: 1681,
Raigarh: 1240,
Raigunj: 729,
Raipur: 109,
Rajahmundhry: 469,
Rajkot: 110,
Ramgarh: 1310,
Ranchi: 41,
Rohtak: 1758,
Rourkela: 43,
Saharanpur: 399,
Salem: 81,
Sambalpur: 44,
Sangli: 614,
Secunderabad: 82,
Shillong: 1313,
Shimoga: 1819,
Siliguri: 45,
Srikakulam: 1683,
Surat: 111,
Thripunithura: 698,
Tirupati: 85,
Tirupur: 84,
Tiruvalla: 556,
Trichur: 86,
Trichy: 87,
Trivandrum: 88,
Udaipur: 67,
Udupi: 804,
Vapi: 509,
Varanasi: 68,
Vashi: 819,
Vijaywada: 89,
Vizag: 91,
Warangal: 92,
Others: 6
};
var citiesKeys = Object.keys(cities);
var listHTML = "";
for (var i = 0; i < citiesKeys.length; i++) {
listHTML +=
'<li class="tc-ter-4 fw-light text-left bg-ter-1-onhover" data-value="' +
cities[citiesKeys[i]] +
'">\n' +
'<p class="mar-zero text-left">' +
citiesKeys[i] +
"</p>\n" +
"</li>";
}
each.parentNode.children[2].innerHTML = listHTML;
}
function dropdownSetter() {
document
.querySelectorAll('input[type="text"].dropdown')
.forEach(function(each) {
if (each.classList.contains("city-list")) {
cityList(each);
}
var dropDownList = each.parentElement.children[2];
var dropDownListElements = Array.from(dropDownList.children);
function setValue(eachListElement) {
eachListElement.addEventListener("click", function() {
if (eachListElement.hasAttribute("data-value")) {
each.setAttribute(
"data-value",
eachListElement.getAttribute("data-value")
);
}
each.value = eachListElement.children[0].innerText;
dropDownList.removeAttribute("style");
});
}
function resetDropDown() {
dropDownListElements.forEach(function(listItem) {
if (listItem.classList.contains("hide")) {
listItem.classList.remove("hide");
}
});
dropDownList.removeAttribute("style", "height");
resetValidation(each);
}
function filterDropDown(event) {
if (
event.inputType === "insertText" ||
event.inputType === "deleteContentBackward"
) {
var filteredList = dropDownListElements.filter(function(listItem) {
return listItem.children[0].innerText
.toLowerCase()
.startsWith(each.value.toLowerCase());
});
if (event.inputType === "insertText") {
var listItemHeight = 0;
dropDownListElements.forEach(function(listItem) {
if (!filteredList.includes(listItem)) {
listItem.classList.add("hide");
} else {
listItemHeight = listItem.clientHeight;
}
});
dropDownList.setAttribute(
"style",
"height: " + listItemHeight * filteredList.length + "px;"
);
} else {
resetDropDown();
}
if (filteredList.length === 0) {
validate(each, each.getAttribute("data-error"));
} else {
resetValidation(each);
}
}
}
each.addEventListener("input", function(e) {
filterDropDown(e);
});
each.addEventListener("focus", function() {
resetDropDown();
});
dropDownListElements.forEach(function(eachListElement) {
setValue(eachListElement);
});
});
}
var calendar = {
days: ["S", "M", "T", "W", "T", "F", "S"],
months: [
"January",
"February",
"March",
"April",
"May",
"June",
"July",
"August",
"September",
"October",
"November",
"December"
],
today: function() {
return new Date();
},
makeTwoDigit: function(dateDotGetXX) {
var converted;
if (dateDotGetXX.toString().length === 1) {
converted = "0" + dateDotGetXX;
} else {
converted = dateDotGetXX;
}
return converted;
},
getDMY: function(dateParam) {
var date = new Date(dateParam);
var dateDD = this.makeTwoDigit(date.getDate());
var dateMM = this.makeTwoDigit(date.getMonth() + 1);
var dateYYYY = date.getFullYear();
return [dateDD, dateMM, dateYYYY];
},
clickToSet: function(date, clickedElement, close) {
var inputElement =
clickedElement.parentElement.parentElement.parentElement.parentElement
.children[0];
inputElement.value = date;
if (close) {
this.closeWidget(inputElement);
}
return inputElement;
},
closeWidget: function(inputElement) {
childWithClassSelector(inputElement, "calendar-widget")[0].classList.toggle(
"hide"
);
},
setDate: function(date, inputElement) {
var dateArray = calendar.getDMY(date);
inputElement.value = dateArray[0] + "/" + dateArray[1] + "/" + dateArray[2];
},
getDate: function(formElement) {
var formDate = childWithClassSelector(formElement, "form--with-right-icon");
return formDate[0];
},
captureClick: function(formElement) {
var calendarWidget = childWithClassSelector(formElement, "calendar-widget");
return calendarWidget[0];
},
changeMonth: function(element, date, incrementOrDecrement) {
var decoratedDate = "";
if (incrementOrDecrement === "increment") {
if (date[1] === 12) {
date[1] = 0;
date[2] = date[2] + 1;
}
decoratedDate =
this.makeTwoDigit(date[0]) +
"/" +
this.makeTwoDigit(date[1] + 1) +
"/" +
date[2].toString();
} else if (incrementOrDecrement === "decrement") {
if (date[1] === 1) {
date[1] = 13;
date[2] = date[2] - 1;
}
decoratedDate =
this.makeTwoDigit(date[0]) +
"/" +
this.makeTwoDigit(date[1] - 1) +
"/" +
date[2].toString();
}
var inputElement = this.clickToSet(decoratedDate, element);
var calendarWidgetElement = childWithClassSelector(
inputElement,
"calendar-widget"
)[0];
this.create(inputElement, calendarWidgetElement);
},
constructHTML: function(date) {
var preDaysOfTheMonth = "";
var daysOfTheMonth = "";
var postDaysOfTheMonth = "";
var inputDMY = [];
if (date.length > 10) {
inputDMY = this.getDMY(date);
} else {
inputDMY = date.split("/");
}
var inputDate = parseInt(inputDMY[0]);
var inputMonth = parseInt(inputDMY[1] - 1);
var inputYear = parseInt(inputDMY[2]);
var dateThisMonth = new Date(inputYear, inputMonth, 1); //[0-6] Day of Week
var startDayOfMonth = dateThisMonth.getDay();
function lengthOfMonth() {
var dateNextMonth = new Date(inputYear, inputMonth);
dateNextMonth.setMonth(dateNextMonth.getMonth() + 1);
return (dateNextMonth - dateThisMonth) / (3600 * 1000 * 24); //31/30/29/28 Days in the month
}
function calendarDay(dateToInput, dull, selected) {
var dd = "";
if (dateToInput.toString().length === 1) {
dd = "0" + dateToInput.toString();
} else {
dd = dateToInput.toString();
}
var dateToSet = "'" + dd + "/" + inputDMY[1] + "/" + inputDMY[2] + "'";
return (
'<div class="calendar-day ' +
dull +
" " +
selected +
'"><p class="xsm fw-light mar-zero tc-ter-4 text-center" onclick="calendar.clickToSet(' +
dateToSet +
', this, close)">' +
dateToInput +
"</p></div>"
);
}
var dayCount = 0;
var gridCount = 35;
for (var i = startDayOfMonth; i > 0; i--) {
var dateToSetBefore = new Date(dateThisMonth);
dateToSetBefore.setDate(dateThisMonth.getDate() - i);
preDaysOfTheMonth += calendarDay(dateToSetBefore.getDate(), "dull", "");
dayCount++;
}
for (var j = 0; j < lengthOfMonth(); j++) {
if (j + 1 === inputDate) {
daysOfTheMonth += calendarDay(j + 1, "", "selected");
} else {
daysOfTheMonth += calendarDay(j + 1, "", "");
}
dayCount++;
}
for (var k = gridCount - dayCount; k > 0; k--) {
var dateToSetAfter = new Date(dateThisMonth);
dateToSetAfter.setDate(
dateThisMonth.getDate() + (gridCount - dayCount - k)
);
postDaysOfTheMonth += calendarDay(dateToSetAfter.getDate(), "dull");
}
return [preDaysOfTheMonth + daysOfTheMonth + postDaysOfTheMonth, inputDMY];
},
create: function(dateElement, calendarWidgetElement, close) {
if (dateElement.value.length === 10) {
var calTopOffset = dateElement.clientHeight + 4;
calendarWidgetElement.setAttribute(
"style",
"top:" + calTopOffset + "px;"
);
var constructed = this.constructHTML(dateElement.value);
var inputDMY = constructed[1];
calendarWidgetElement.children[0].children[1].children[0].setAttribute(
"onclick",
"calendar.changeMonth(this,[" + constructed[1] + "],'decrement')"
);
calendarWidgetElement.children[0].children[1].children[1].setAttribute(
"onclick",
"calendar.changeMonth(this,[" + constructed[1] + "],'increment')"
);
calendarWidgetElement.children[0].children[0].children[0].innerText =
this.months[parseInt(inputDMY[1]) - 1] + ", " + inputDMY[2];
calendarWidgetElement.children[3].innerHTML = constructed[0];
if (close) {
calendarWidgetElement.classList.toggle("hide");
}
}
}
};
function tnsExecute() {
function setPrevButton(info, slider) {
function checkSliderPosition() {
slider.events.on("transitionEnd", function(e) {
if (e.index === 0) {
info.prevButton.setAttribute("disabled", "disabled");
}
});
}
info.prevButton.setAttribute("disabled", "disabled");
info.prevButton.addEventListener("click", function() {
checkSliderPosition();
});
info.nextButton.addEventListener("click", function() {
checkSliderPosition();
info.prevButton.removeAttribute("disabled");
});
}
if (document.querySelector(".carousel")) {
var slider = tns({
container: ".carousel",
responsive: {
"1023": {
items: 2.7
},
"1366": {
items: 2.8
},
"1920": {
items: 3.3
}
},
slideBy: 1,
gutter: 12,
edgePadding: 1,
mouseDrag: true,
rewind: true,
speed: 400,
controlsText: [
'<i class="fa fa-chevron-circle-left tc-ter-3"></i>',
'<i class="fa fa-chevron-circle-right tc-ter-3"></i>'
]
});
var info = slider.getInfo();
setPrevButton(info, slider);
}
if (document.querySelector(".carousel-one")) {
var sliderOne = tns({
container: ".carousel-one",
items: 1.1,
gutter: 12,
slideBy: 1,
edgePadding: 1,
mouseDrag: true,
rewind: true,
speed: 400,
controlsText: [
'<i class="fa fa-chevron-circle-left tc-ter-3"></i>',
'<i class="fa fa-chevron-circle-right tc-ter-3"></i>'
]
});
var infoOne = sliderOne.getInfo();
setPrevButton(infoOne, sliderOne);
}
document.querySelectorAll('[data-controls="prev"]').forEach(function(each) {
each.setAttribute("aria-label", "previous-button");
});
document.querySelectorAll('[data-controls="next"]').forEach(function(each) {
each.setAttribute("aria-label", "next-button");
});
equalize();
}
function carousel(execute, callback) {
if (execute) {
var carouselAssets = document.createElement("div");
carouselAssets.setAttribute("class", "carousel-assets");
document.querySelector("body").appendChild(carouselAssets);
var stylesheet = document.createElement("link");
stylesheet.setAttribute(
"href",
"https://cdnjs.cloudflare.com/ajax/libs/tiny-slider/2.9.2/tiny-slider.css"
);
stylesheet.setAttribute("rel", "stylesheet");
document.querySelector("head").appendChild(stylesheet);
var script = document.createElement("script");
script.setAttribute(
"src",
"https://cdnjs.cloudflare.com/ajax/libs/tiny-slider/2.9.2/min/tiny-slider.js"
);
script.setAttribute("rel", "preload");
document.querySelector("head").appendChild(script);
if (script.readyState) {
//IE
script.onreadystatechange = function() {
if (script.readyState == "loaded" || script.readyState == "complete") {
script.onreadystatechange = null;
callback();
}
};
} else {
//Others
script.onload = function() {
callback();
};
}
}
}
function setTestimonials() {
var testimonials = {
setScore: function(selected, setValue) {
selected.firstElementChild.innerHTML = "";
var starsString = "";
var stars = parseInt(setValue);
for (var i = 0; i < stars; i++) {
starsString += '<i class="fas fa-star tc-alt-2"></i>';
}
if (setValue.split(".")[1]) {
for (var j = 0; j < 1; j++) {
starsString += '<i class="fas fa-star-half-alt tc-alt-2"></i>';
}
}
if (stars < 5) {
for (var k = 1; k < 5 - stars; k++) {
starsString += '<i class="far fa-star tc-alt-2"></i>';
}
}
var existingContent = selected.innerHTML;
var newText = existingContent.split("</span>")[0] + "</span>" + setValue;
selected.innerHTML = starsString + newText;
},
setReviews: function(selected, setValue) {
var existingContent = selected.innerHTML;
var newText = existingContent.split("(")[0] + " (" + setValue + ")";
selected.innerHTML = newText;
},
setChapters: function(selected, setValue) {
var existingContent = selected.innerHTML;
var newText =
existingContent.split("</span>")[0] +
"</span>" +
setValue +
" Chapters";
selected.innerHTML = newText;
},
setModules: function(selected, setValue) {
var existingContent = selected.innerHTML;
var newText =
existingContent.split("</span>")[0] + "</span>" + setValue + " Modules";
selected.innerHTML = newText;
},
setHours: function(selected, setValue) {
var existingContent = selected.innerHTML;
var newText =
existingContent.split("</span>")[0] + "</span>" + setValue + " Hours";
selected.innerHTML = newText;
},
setPerson: function(selected, setValue) {
var person = setValue.split(" ");
selected.classList.remove("fas");
selected.classList.remove("fa-user");
var initials = "";
person.forEach(function(each, index) {
if (index === 0) {
initials += each.substr(0, 1);
}
if (person.length === index + 1 && person.length > 1) {
initials += each.substr(0, 1);
}
});
selected.innerText = initials;
var textToReplace =
selected.parentElement.parentElement.parentElement.children[1]
.children[0];
textToReplace.innerText = setValue;
},
setValuesToCards: function(whatToSet, renderToSet, functionToSet) {
var setterFunction;
var setValueTo;
if (document.querySelectorAll("[data-" + whatToSet + "]")) {
document
.querySelectorAll("[data-" + whatToSet + "]")
.forEach(function(each, index) {
setValueTo = each.getAttribute("data-" + whatToSet);
document
.querySelectorAll("[data-render-" + whatToSet + "]")
.forEach(function(everyRenderLocation, indexOfLocation) {
if (index === indexOfLocation) {
if (functionToSet === "setReviews" && setValueTo !== "") {
setterFunction = testimonials.setReviews(
everyRenderLocation,
setValueTo
);
} else if (
functionToSet === "setScore" &&
setValueTo !== ""
) {
setterFunction = testimonials.setScore(
everyRenderLocation,
setValueTo
);
} else if (
functionToSet === "setChapters" &&
setValueTo !== ""
) {
setterFunction = testimonials.setChapters(
everyRenderLocation,
setValueTo
);
} else if (
functionToSet === "setModules" &&
setValueTo !== ""
) {
setterFunction = testimonials.setModules(
everyRenderLocation,
setValueTo
);
} else if (
functionToSet === "setHours" &&
setValueTo !== ""
) {
setterFunction = testimonials.setHours(
everyRenderLocation,
setValueTo
);
} else if (
functionToSet === "setPerson" &&
setValueTo !== ""
) {
setterFunction = testimonials.setPerson(
everyRenderLocation,
setValueTo
);
}
setterFunction;
}
});
});
}
},
execute: function() {
testimonials.setValuesToCards("score", "score", "setScore");
testimonials.setValuesToCards("reviews", "reviews", "setReviews");
testimonials.setValuesToCards("hours", "hours", "setHours");
testimonials.setValuesToCards("chapters", "chapters", "setChapters");
testimonials.setValuesToCards("modules", "modules", "setModules");
testimonials.setValuesToCards("person", "person", "setPerson");
}
};
testimonials.execute();
}
function buttonGroup() {
document.querySelectorAll(".button-group").forEach(function(eachGroup) {
Array.from(eachGroup.children).forEach(function(eachButton) {
eachButton.addEventListener("click", function() {
Array.from(eachGroup.children).forEach(function(eachChild) {
eachChild.classList.remove("selected");
});
eachButton.classList.add("selected");
});
});
});
}
function cardForScrip() {
document
.querySelectorAll(".card--for-scrip")
.forEach(function(eachScripCard) {
eachScripCard.addEventListener("click", function(e) {
if (
!e.target.classList.contains("card--for-scrip-tags") ||
e.target.classList.contains("card--for-scrip-action-list")
) {
eachScripCard.children[1].classList.toggle("invisible");
}
});
});
}
function inputsSetter() {
document.querySelectorAll("input").forEach(function(each) {
if (each.name === "date") {
each.addEventListener("change", function() {
var calendarWidget = childWithClassSelector(each, "calendar-widget")[0];
calendar.create(each, calendarWidget, "close");
});
//TODO if focusout close calendar;
// window.addEventListener('click', function(){
// console.log(each)
// var calendarWidget = childWithClassSelector(each, 'calendar-widget')[0];
// if(!calendarWidget.classList.contains('hide')){
// calendar.closeWidget(each);
// }
// })
}
each.addEventListener("input", function() {
if (
each.type === "text" ||
each.type === "numbers" ||
each.type === "tel" ||
each.type === "url" ||
each.type === "email" ||
each.type === "password"
) {
if (each.validity.typeMismatch || each.validity.patternMismatch) {
validate(each, each.getAttribute("data-error"));
} else {
resetValidation(each);
}
}
if (
each.type === "checkbox" &&
each.classList.value !== "accordion-checkbox"
) {
if (
each.validity.valueMissing &&
!each.classList.contains("accordion-text")
) {
validate(each, each.getAttribute("data-error"));
} else {
resetValidation(each);
}
}
if (each.name === "date") {
var calendarWidget = childWithClassSelector(each, "calendar-widget")[0];
calendar.create(each, calendarWidget);
}
if (each.type === "range") {
var label = each.nextElementSibling;
var labelSize = label.clientWidth;
var leftOffset =
(each.clientWidth * each.value) / each.max - labelSize / 2;
label.classList.remove("invisible");
label.setAttribute("style", "left: " + leftOffset + "px;");
label.lastElementChild.innerText = each.value;
// var stepCount = each.step;
//TODO Step Count display
}
});
each.addEventListener("invalid", function(e) {
if (
each.type === "text" ||
each.type === "numbers" ||
each.type === "tel" ||
each.type === "url" ||
each.type === "email" ||
each.type === "password"
) {
validate(e.target, e.target.getAttribute("data-error"));
}
if (each.type === "checkbox") {
if (each.validity.valueMissing) {
validate(each, each.getAttribute("data-error"));
} else {
resetValidation(each);
}
}
if (each.type === "file") {
if (each.validity.valueMissing) {
validate(each, each.getAttribute("data-error"));
} else {
resetValidation(each);
}
}
});
});
}
function passwordPeep() {
document.querySelectorAll(".password").forEach(function(each) {
each.addEventListener("click", function(e) {
var eye = e.target;
var inputToChange = each.parentElement.parentElement.firstElementChild;
if (eye.classList.contains("fa-eye-slash")) {
inputToChange.setAttribute("type", "text");
eye.classList.remove("fa-eye-slash");
eye.classList.add("fa-eye");
} else if (eye.classList.contains("fa-eye")) {
inputToChange.setAttribute("type", "password");
eye.classList.remove("fa-eye");
eye.classList.add("fa-eye-slash");
}
});
});
}
function snackbarSetter() {
document.querySelectorAll(".snackbar").forEach(function(each) {
Array.from(each.children).forEach(function(everyChild) {
if (everyChild.classList.contains("snackbar-text")) {
everyChild.addEventListener("click", function() {
each.remove();
});
}
});
});
}
function calendarSetter() {
document.querySelectorAll(".calendar").forEach(function(each) {
each.addEventListener("click", function() {
var dateForm = each.parentElement;
calendar.create(
calendar.getDate(dateForm),
calendar.captureClick(dateForm),
"close"
);
});
});
}
function cardWithClick() {
document.querySelectorAll(".card-body--with-click").forEach(function(each) {
each.addEventListener("click", function() {
var openedCard = each.nextElementSibling;
if (openedCard.classList.contains("card-body--on-click")) {
openedCard.classList.toggle("closed");
var openedCardHeight =
each.parentElement.clientHeight -
each.parentElement.lastElementChild.clientHeight -
4;
var footerHeight = each.parentElement.lastElementChild.clientHeight;
openedCard.setAttribute(
"style",
"height:" + openedCardHeight + "px; bottom:" + footerHeight + "px"
);
}
});
});
}
function cardBodyOnClick() {
document.querySelectorAll(".card-body--on-click").forEach(function(each) {
each.addEventListener("click", function() {
each.classList.toggle("closed");
});
});
}
function popupClose() {
document.querySelectorAll(".popup-close").forEach(function(each, index) {
each.addEventListener("click", function() {
document
.querySelectorAll(".popup")
.forEach(function(eachPopup, indexOfPopup) {
if (!eachPopup.hasAttribute("not-closeable")) {
if (index === indexOfPopup) {
eachPopup.classList.add("invisible");
}
}
});
});
document.querySelectorAll(".popup-background").forEach(function(eachBg) {
eachBg.addEventListener("click", function() {
document
.querySelectorAll(".popup")
.forEach(function(eachPopup, indexOfPopup) {
if (!eachPopup.hasAttribute("not-closeable")) {
if (index === indexOfPopup) {
eachPopup.classList.add("invisible");
}
}
});
});
});
});
}
function navBarShadow() {
document
.querySelector("body")
.setAttribute(
"style",
"margin-top: " + document.querySelector("#nav-bar").clientHeight + "px;"
);
if (document.querySelector(".snackbar--column")) {
document
.querySelector(".snackbar--column")
.setAttribute(
"style",
"margin-top: " + document.querySelector("#nav-bar").clientHeight + "px;"
);
}
window.addEventListener("scroll", function() {
if (window.scrollY > 0) {
document.querySelector("#nav-bar").classList.add("nav-shadow");
} else {
document.querySelector("#nav-bar").classList.remove("nav-shadow");
}
});
}
// Validate Inputs
function validate(inputElement, optionalMessageToPaint) {
event.preventDefault();
var spanElement = inputElement.parentElement.lastElementChild;
if (spanElement.classList.contains("invisible")) {
spanElement.classList.toggle("invisible");
inputElement.classList.add("invalid");
}
if (optionalMessageToPaint) {
var exclamation = '<i class="fa fa-exclamation-circle pad-r-xxs"></i>';
spanElement.innerHTML = exclamation + optionalMessageToPaint;
}
}
function resetValidation(inputElement) {
var spanElement = inputElement.parentElement.lastElementChild;
if (!spanElement.classList.contains("invisible")) {
spanElement.classList.toggle("invisible");
inputElement.classList.remove("invalid");
}
}
// Execute as page is traversed
if (document.querySelector("img")) {
lazyLoadImages();
}
if (document.querySelector("[data-reviews]")) {
setTestimonials();
}
if (document.querySelector(".card--for-scrip")) {
cardForScrip();
}
if (document.querySelector("#nav-bar")) {
navBarShadow();
}
if (document.querySelector(".snackbar")) {
snackbarSetter();
}
if (document.querySelector(".card-body--with-click")) {
cardWithClick();
}
if (document.querySelector(".card-body--on-click")) {
cardBodyOnClick();
}
if (document.querySelector("input")) {
inputsSetter();
}
if (document.querySelector(".calendar")) {
calendarSetter();
}
if (document.querySelector(".password")) {
passwordPeep();
}
if (document.querySelector(".popup-close")) {
popupClose();
}
if (document.querySelector("input[name=date]")) {
document.querySelectorAll("input[name=date]").forEach(function(each) {
if (each.getAttribute("default") === "today") {
calendar.setDate(calendar.today(), each);
}
});
}
if (document.querySelector("[data-progress-indicator]")) {
progressIndicator();
}
if (document.querySelector('input[type="text"].dropdown')) {
setTimeout(function() {
dropdownSetter();
}, 450);
}
if (document.querySelector(".button-group")) {
buttonGroup();
}
// Execute on load event
window.addEventListener("load", function() {
if (
document.querySelector("aside.is-menu") &&
document.querySelector("[data-menu]") &&
isMobile()
) {
mobileMenu();
}
if (document.querySelector("[data-equalizer]")) {
equalize();
}
if (!isMobile()) {
if (document.querySelector("square")) {
document.querySelectorAll(".square").forEach(function(each) {
square(each);
});
}
if (
document.querySelector(".carousel") ||
document.querySelector(".carousel-one")
) {
carousel("do", function() {
tnsExecute();
});
}
}
});
// Execute on resize event
window.addEventListener("resize", function() {
if (!isMobile()) {
document.querySelectorAll(".square").forEach(function(each) {
square(each);
});
if (
document.querySelector(".carousel") ||
document.querySelector(".carousel-one")
) {
carousel("do", function() {
tnsExecute();
});
}
}
if (document.querySelector("[data-equalizer]")) {
equalize();
}
});
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment