kyndryl_design_toolkit
Version:
A little help to make ui for kyndryl
70 lines (63 loc) • 2.75 kB
HTML
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="kyndryl_DTK.css">
<title>Kyndryl Design ToolKit</title>
</head>
<body>
<!-- navbar red-->
<header class="navbar navbar-red">
<a href="" class="navbar-red-title">Name of the app</a>
<nav>
<ul class="nav-links">
<li><a class="navbar-red-link" href="">Link 1</a></li>
<li><a class="navbar-red-link" href="">Link 2 </a></li>
<li><a class="navbar-red-link" href="">Link 3</a></li>
</ul>
</nav>
</header>
<!-- navbar light-->
<header class="navbar navbar-light">
<a href="" class="navbar-light-title">Name of the app</a>
<nav>
<ul class="nav-links">
<li><a class="navbar-light-link" href="">Link 1</a></li>
<li><a class="navbar-light-link" href="">Link 2 </a></li>
<li><a class="navbar-light-link" href="">Link 3</a></li>
</ul>
</nav>
</header>
<!-- buttons -->
<button class="primary-button"> Ingresar con W3ID </button>
<button class="secondary-button"> Ingresar con W3ID </button>
<button class="disable-button"> Disable button </button>
<button class="ghost-button"> ghost button </button>
<a class="link">Link Action</a>
<!-- some inputs -->
<form>
<label for="">Label name </label><br>
<input class="input-texbox" type="text" id="" name=""><br><br>
<label for="">Label name </label><br>
<input class="input-texbox-disabled" type="text" id="" name="" placeholder="Disable input"><br><br>
<label for="">Label name </label><br>
<textarea class="text-area" id="" name="" rows="4" cols="50">
</textarea>
</form>
<!-- badges -->
<div class="primary-badge">Primary</div>
<div class="secondary-badge">Secondary</div>
<div class="warning-badge">Warning</div>
<div class="info-badge">Info</div>
<div class="success-badge">Success</div>
<div class="light-badge">Light</div>
<!-- card -->
<div class="card-div">
<p class="card-title">Card Title</p>
<p class="card-text-block">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed justo mauris, pulvinar et tempus a, congue non libero. Nullam ac diam scelerisque, feugiat sem sit amet, pharetra enim. Nullam sodales lacinia est, non facilisis nibh sagittis sit amet. Fusce mollis, neque vel tempus ultrices, augue neque tristique leo, sit amet posuere elit est ut arcu. Integer fringilla at tellus sed luctus. Aliquam commodo vestibulum ipsum vel blandit. Vestibulum suscipit congue odio, non ornare libero pellentesque sed. Etiam pretium sagittis sagittis.
</p>
</div>
</body>
</html>