bulma/docs/documentation/elements/notification.html
Jeremy Thomas 9094eff30a Move docs to bulma repo (#299)
* Add package files whitelist

* Add flex shrink

* Add flex shrink

* Add docs config

* Fix flex shrink

* Fix hero pages

* Add docs folder
2016-09-11 12:00:49 +01:00

93 lines
3.0 KiB
HTML

---
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>