@ustack/uskin
Version:
A graceful framework which provides developers another chance to build an amazing site.
98 lines • 2.84 kB
HTML
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>Notification Sample</title>
<link href="../../dist/css/uskin.css" rel="stylesheet">
<style type="text/css">
.block-1 {
top: 40px;
}
.block-2 {
top: 130px;
}
.block-3 {
top: 220px;
}
.block-4 {
top: 310px;
}
.block-5 {
top: 400px;
}
</style>
</head>
<body>
<div class="notification block-1">
<div class="notice" style="width: 280px;">
<div class="tip-icon">
<strong><i class="loading-notification glyphicon"></i></strong>
</div>
<div class="tip-content" style="width: 210px;">
<div>
<strong>Note:</strong>
</div>
I am a info notification
</div>
<i class="glyphicon icon-close"></i>
</div>
</div>
<div class="notification block-2">
<div class="notice notice-info" style="width: 280px;">
<div class="tip-icon">
<strong><i class="icon-status-warning glyphicon"></i></strong>
</div>
<div class="tip-content" style="width: 210px;">
<div>
<strong>Note:</strong>
</div>
I am a info notification
</div>
<i class="glyphicon icon-close"></i>
</div>
</div>
<div class="notification block-3">
<div class="notice notice-success" style="width: 280px;">
<div class="tip-icon">
<strong><i class="icon-status-active glyphicon"></i></strong>
</div>
<div class="tip-content" style="width: 210px;">
<div>
<strong>Note:</strong>
</div>
I am a info notification
</div>
<i class="glyphicon icon-close"></i>
</div>
</div>
<div class="notification block-4">
<div class="notice notice-warning" style="width: 280px;">
<div class="tip-icon">
<strong><i class="icon-status-warning glyphicon"></i></strong>
</div>
<div class="tip-content" style="width: 210px;">
<div>
<strong>Note:</strong>
</div>
I am a info notification
</div>
<i class="glyphicon icon-close"></i>
</div>
</div>
<div class="notification block-5">
<div class="notice notice-danger" style="width: 280px;">
<div class="tip-icon">
<strong><i class="icon-status-warning glyphicon"></i></strong>
</div>
<div class="tip-content" style="width: 210px;">
<div>
<strong>Note:</strong>
</div>
I am a info notification
</div>
<i class="glyphicon icon-close"></i>
</div>
</div>
</body>
</html>