bulma/docs/documentation/elements/notification.html

93 lines
3.0 KiB
HTML
Raw Normal View History

---
layout: documentation
doc-tab: elements
doc-subtab: notification
---
{% include subnav-elements.html %}
<section class="section">
<div class="container">
<h1 class="title">Notifications</h1>
<h2 class="subtitle">
Bold <strong>notification</strong> blocks, to alert your users of something
</h2>
<hr>
<div class="columns">
<div class="column">
<div class="notification">
<button class="delete"></button>
Lorem ipsum dolor sit amet, consectetur adipiscing elit lorem ipsum dolor sit amet, consectetur adipiscing elit
</div>
<div class="notification is-primary">
<button class="delete"></button>
Info lorem ipsum dolor sit amet, consectetur adipiscing elit lorem ipsum dolor sit amet, consectetur adipiscing elit
</div>
<div class="notification is-info">
<button class="delete"></button>
Info lorem ipsum dolor sit amet, consectetur adipiscing elit lorem ipsum dolor sit amet, consectetur adipiscing elit
</div>
<div class="notification is-success">
<button class="delete"></button>
Success lorem ipsum dolor sit amet, consectetur adipiscing elit lorem ipsum dolor sit amet, consectetur adipiscing elit
</div>
<div class="notification is-warning">
<button class="delete"></button>
Warning lorem ipsum dolor sit amet, consectetur adipiscing elit lorem ipsum dolor sit amet, consectetur adipiscing elit
</div>
<div class="notification is-danger">
<button class="delete"></button>
Danger lorem ipsum dolor sit amet, consectetur adipiscing elit lorem ipsum dolor sit amet, consectetur adipiscing elit
</div>
</div>
<div class="column">
{% highlight html %}
<div class="notification">
<button class="delete"></button>
Lorem ipsum dolor sit amet, consectetur
adipiscing elit lorem ipsum dolor sit amet,
consectetur adipiscing elit
</div>
<div class="notification is-primary">
<button class="delete"></button>
Primar lorem ipsum dolor sit amet, consectetur
adipiscing elit lorem ipsum dolor sit amet,
consectetur adipiscing elit
</div>
<div class="notification is-info">
<button class="delete"></button>
Info lorem ipsum dolor sit amet, consectetur
adipiscing elit lorem ipsum dolor sit amet,
consectetur adipiscing elit
</div>
<div class="notification is-success">
<button class="delete"></button>
Success lorem ipsum dolor sit amet, consectetur
adipiscing elit lorem ipsum dolor sit amet,
consectetur adipiscing elit
</div>
<div class="notification is-warning">
<button class="delete"></button>
Warning lorem ipsum dolor sit amet, consectetur
adipiscing elit lorem ipsum dolor sit amet,
consectetur adipiscing elit
</div>
<div class="notification is-danger">
<button class="delete"></button>
Danger lorem ipsum dolor sit amet, consectetur
adipiscing elit lorem ipsum dolor sit amet,
consectetur adipiscing elit
</div>
{% endhighlight %}
</div>
</div>
</div>
</section>