@nitro-ui/bundle-objects
Version:
Objects bundle component for Nitro UI.
348 lines (326 loc) • 16.7 kB
HTML
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<title>Utility Bundle - Nitro UI</title>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<link rel="stylesheet" href="../dist/utility.min.css">
</head>
<body class="bg-light">
<header class="bg-white border-bottom">
<div class="container py-5">
<h2 class="font-weight-bold mb-3">Utility Bundle</h2>
<div class="text-muted"></div>
</div>
</header>
<article>
<div class="container py-5">
<div class="row">
<!-- Align -->
<div id="utility-align" class="col-md-6">
<div class="row">
<div class="col-md-8">
<h3 class="font-weight-bold">Align</h2>
<div class="text-muted"></div>
</div>
<div class="col-md-4">
<div class="u-align-right">
<a href="utility-align/index.html" class="u-inline-block p-2">View</a>
</div>
</div>
</div>
<hr class="mt-4 mb-5">
</div>
<!-- Background -->
<div id="utility-background" class="col-md-6">
<div class="row">
<div class="col-md-8">
<h3 class="font-weight-bold">Background</h2>
<div class="text-muted"></div>
</div>
<div class="col-md-4">
<div class="u-align-right">
<a href="utility-background/index.html" class="u-inline-block p-2">View</a>
</div>
</div>
</div>
<hr class="mt-4 mb-5">
</div>
<!-- Border -->
<div id="utility-border" class="col-md-6">
<div class="row">
<div class="col-md-8">
<h3 class="font-weight-bold">Border</h2>
<div class="text-muted"></div>
</div>
<div class="col-md-4">
<div class="u-align-right">
<a href="utility-border/index.html" class="u-inline-block p-2">View</a>
</div>
</div>
</div>
<hr class="mt-4 mb-5">
</div>
<!-- Clearfix -->
<div id="utility-clearfix" class="col-md-6">
<div class="row">
<div class="col-md-8">
<h3 class="font-weight-bold">Clearfix</h2>
<div class="text-muted"></div>
</div>
<div class="col-md-4">
<div class="u-align-right">
<a href="utility-clearfix/index.html" class="u-inline-block p-2">View</a>
</div>
</div>
</div>
<hr class="mt-4 mb-5">
</div>
<!-- Display -->
<div id="utility-display" class="col-md-6">
<div class="row">
<div class="col-md-8">
<h3 class="font-weight-bold">Display</h2>
<div class="text-muted"></div>
</div>
<div class="col-md-4">
<div class="u-align-right">
<a href="utility-display/index.html" class="u-inline-block p-2">View</a>
</div>
</div>
</div>
<hr class="mt-4 mb-5">
</div>
<!-- Divider -->
<div id="utility-divider" class="col-md-6">
<div class="row">
<div class="col-md-8">
<h3 class="font-weight-bold">Divider</h2>
<div class="text-muted"></div>
</div>
<div class="col-md-4">
<div class="u-align-right">
<a href="utility-divider/index.html" class="u-inline-block p-2">View</a>
</div>
</div>
</div>
<hr class="mt-4 mb-5">
</div>
<!-- Flex -->
<div id="utility-flex" class="col-md-6">
<div class="row">
<div class="col-md-8">
<h3 class="font-weight-bold">Flex</h2>
<div class="text-muted"></div>
</div>
<div class="col-md-4">
<div class="u-align-right">
<a href="utility-flex/index.html" class="u-inline-block p-2">View</a>
</div>
</div>
</div>
<hr class="mt-4 mb-5">
</div>
<!-- Float -->
<div id="utility-float" class="col-md-6">
<div class="row">
<div class="col-md-8">
<h3 class="font-weight-bold">Float</h2>
<div class="text-muted"></div>
</div>
<div class="col-md-4">
<div class="u-align-right">
<a href="utility-float/index.html" class="u-inline-block p-2">View</a>
</div>
</div>
</div>
<hr class="mt-4 mb-5">
</div>
<!-- Height -->
<div id="utility-height" class="col-md-6">
<div class="row">
<div class="col-md-8">
<h3 class="font-weight-bold">Height</h2>
<div class="text-muted"></div>
</div>
<div class="col-md-4">
<div class="u-align-right">
<a href="utility-height/index.html" class="u-inline-block p-2">View</a>
</div>
</div>
</div>
<hr class="mt-4 mb-5">
</div>
<!-- Hide -->
<div id="utility-hide" class="col-md-6">
<div class="row">
<div class="col-md-8">
<h3 class="font-weight-bold">Hide</h2>
<div class="text-muted"></div>
</div>
<div class="col-md-4">
<div class="u-align-right">
<a href="utility-hide/index.html" class="u-inline-block p-2">View</a>
</div>
</div>
</div>
<hr class="mt-4 mb-5">
</div>
<!-- Loader -->
<div id="utility-loader" class="col-md-6">
<div class="row">
<div class="col-md-8">
<h3 class="font-weight-bold">Loader</h2>
<div class="text-muted"></div>
</div>
<div class="col-md-4">
<div class="u-align-right">
<a href="utility-loader/index.html" class="u-inline-block p-2">View</a>
</div>
</div>
</div>
<hr class="mt-4 mb-5">
</div>
<!-- Opacity -->
<div id="utility-opacity" class="col-md-6">
<div class="row">
<div class="col-md-8">
<h3 class="font-weight-bold">Opacity</h2>
<div class="text-muted"></div>
</div>
<div class="col-md-4">
<div class="u-align-right">
<a href="utility-opacity/index.html class="u-inline-block p-2"">View</a>
</div>
</div>
</div>
<hr class="mt-4 mb-5">
</div>
<!-- Overflow -->
<div id="utility-overflow" class="col-md-6">
<div class="row">
<div class="col-md-8">
<h3 class="font-weight-bold">Overflow</h2>
<div class="text-muted"></div>
</div>
<div class="col-md-4">
<div class="u-align-right">
<a href="utility-overflow/index.html" class="u-inline-block p-2">View</a>
</div>
</div>
</div>
<hr class="mt-4 mb-5">
</div>
<!-- Position -->
<div id="utility-position" class="col-md-6">
<div class="row">
<div class="col-md-8">
<h3 class="font-weight-bold">Position</h2>
<div class="text-muted"></div>
</div>
<div class="col-md-4">
<div class="u-align-right">
<a href="utility-position/index.html" class="u-inline-block p-2">View</a>
</div>
</div>
</div>
<hr class="mt-4 mb-5">
</div>
<!-- Rounded -->
<div id="utility-rounded" class="col-md-6">
<div class="row">
<div class="col-md-8">
<h3 class="font-weight-bold">Rounded</h2>
<div class="text-muted"></div>
</div>
<div class="col-md-4">
<div class="u-align-right">
<a href="utility-rounded/index.html" class="u-inline-block p-2">View</a>
</div>
</div>
</div>
<hr class="mt-4 mb-5">
</div>
<!-- Shadow -->
<div id="utility-shadow" class="col-md-6">
<div class="row">
<div class="col-md-8">
<h3 class="font-weight-bold">Shadow</h2>
<div class="text-muted"></div>
</div>
<div class="col-md-4">
<div class="u-align-right">
<a href="utility-shadow/index.html" class="u-inline-block p-2">View</a>
</div>
</div>
</div>
<hr class="mt-4 mb-5">
</div>
<!-- Spacing -->
<div id="utility-spacing" class="col-md-6">
<div class="row">
<div class="col-md-8">
<h3 class="font-weight-bold">Spacing</h2>
<div class="text-muted"></div>
</div>
<div class="col-md-4">
<div class="u-align-right">
<a href="utility-spacing/index.html" class="u-inline-block p-2">View</a>
</div>
</div>
</div>
<hr class="mt-4 mb-5">
</div>
<!-- Text -->
<div id="utility-text" class="col-md-6">
<div class="row">
<div class="col-md-8">
<h3 class="font-weight-bold">Text</h2>
<div class="text-muted"></div>
</div>
<div class="col-md-4">
<div class="u-align-right">
<a href="utility-text/index.html" class="u-inline-block p-2">View</a>
</div>
</div>
</div>
<hr class="mt-4 mb-5">
</div>
<!-- Transition -->
<div id="utility-transition" class="col-md-6">
<div class="row">
<div class="col-md-8">
<h3 class="font-weight-bold">Transition</h2>
<div class="text-muted"></div>
</div>
<div class="col-md-4">
<div class="u-align-right">
<a href="utility-transition/index.html" class="u-inline-block p-2">View</a>
</div>
</div>
</div>
<hr class="mt-4 mb-5">
</div>
<!-- Width -->
<div id="utility-width" class="col-md-6">
<div class="row">
<div class="col-md-8">
<h3 class="font-weight-bold">Width</h2>
<div class="text-muted"></div>
</div>
<div class="col-md-4">
<div class="u-align-right">
<a href="utility-width/index.html" class="u-inline-block p-2">View</a>
</div>
</div>
</div>
<hr class="mt-4 mb-5">
</div>
</div>
</div>
</article>
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
</body>
</html>