@nitro-ui/component-alert
Version:
Alert component for Nitro UI.
113 lines (101 loc) • 4.58 kB
HTML
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<title>Nitro UI / Alert</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/css/alert.min.css">
</head>
<body class="bg-light">
<header class="bg-white border-bottom">
<div class="container py-5">
<h1 class="font-weight-bold mb-3">Alert</h1>
<div class="text-muted">
<p>
Provide contextual feedback messages for typical user actions with the handful of available and flexible alert messages.
</p>
</div>
</div>
</header>
<article>
<div class="container py-5">
<!-- Info -->
<div class="row">
<div class="col-md-4">
<div class="text-muted">Info</div>
</div>
<div class="col-md-8">
<div class="c-alert c-alert--info">
<div class="c-alert__body">
This is info alert with an <a href="#">example link</a>
</div>
<button class="c-alert__close" data-dismiss="alert">✕</button>
</div>
</div>
</div>
<hr class="mt-4 mb-5">
<!-- Tips -->
<div class="row">
<div class="col-md-4">
<div class="text-muted">Tips</div>
</div>
<div class="col-md-8">
<div class="c-alert c-alert--tips">
<div class="c-alert__body">
This is Tips alert with an <a href="#">example link</a>
</div>
<button class="c-alert__close" data-dismiss="alert">✕</button>
</div>
</div>
</div>
<hr class="mt-4 mb-5">
<!-- Success -->
<div class="row">
<div class="col-md-4">
<div class="text-muted">Success</div>
</div>
<div class="col-md-8">
<div class="c-alert c-alert--success">
<div class="c-alert__body">
This is Success alert with an <a href="#">example link</a>
</div>
<button class="c-alert__close" data-dismiss="alert">✕</button>
</div>
</div>
</div>
<hr class="mt-4 mb-5">
<!-- Error -->
<div class="row">
<div class="col-md-4">
<div class="text-muted">Error</div>
</div>
<div class="col-md-8">
<div class="c-alert c-alert--error">
<div class="c-alert__body">
This is Error alert with an <a href="#">example link</a>
</div>
<button class="c-alert__close" data-dismiss="alert">✕</button>
</div>
</div>
</div>
<hr class="mt-4 mb-5">
<!-- Warning -->
<div class="row">
<div class="col-md-4">
<div class="text-muted">Warning</div>
</div>
<div class="col-md-8">
<div class="c-alert c-alert--warning">
<div class="c-alert__body">
This is Warning alert with an <a href="#">example link</a>
</div>
<button class="c-alert__close" data-dismiss="alert">✕</button>
</div>
</div>
</div>
<hr class="mt-4 mb-5">
</div>
</article>
<script src="../dist/js/alert.js"></script>
</body>
</html>