bulma/docs/documentation/elements/notification.html
2017-08-15 00:01:34 +01:00

102 lines
3.6 KiB
HTML

---
title: Notification
layout: documentation
doc-tab: elements
doc-subtab: notification
variables:
- name: $notification-background-color
value: $background
- name: $notification-radius
value: $radius
- name: $notification-padding
value: 1.25rem 2.5rem 1.25rem 1.5rem
---
{% capture notification %}
<div class="notification">
<button class="delete"></button>
Lorem ipsum dolor sit amet, consectetur
adipiscing elit lorem ipsum dolor. <strong>Pellentesque risus mi</strong>, tempus quis placerat ut, porta nec nulla. Vestibulum rhoncus ac ex sit amet fringilla. Nullam gravida purus diam, et dictum <a>felis venenatis</a> efficitur. Sit amet,
consectetur adipiscing elit
</div>
{% endcapture %}
{% capture notification_colors %}
<div class="notification is-primary">
<button class="delete"></button>
Primar lorem ipsum dolor sit amet, consectetur
adipiscing elit lorem ipsum dolor. <strong>Pellentesque risus mi</strong>, tempus quis placerat ut, porta nec nulla. Vestibulum rhoncus ac ex sit amet fringilla. Nullam gravida purus diam, et dictum <a>felis venenatis</a> efficitur. 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. <strong>Pellentesque risus mi</strong>, tempus quis placerat ut, porta nec nulla. Vestibulum rhoncus ac ex sit amet fringilla. Nullam gravida purus diam, et dictum <a>felis venenatis</a> efficitur. 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. <strong>Pellentesque risus mi</strong>, tempus quis placerat ut, porta nec nulla. Vestibulum rhoncus ac ex sit amet fringilla. Nullam gravida purus diam, et dictum <a>felis venenatis</a> efficitur. 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. <strong>Pellentesque risus mi</strong>, tempus quis placerat ut, porta nec nulla. Vestibulum rhoncus ac ex sit amet fringilla. Nullam gravida purus diam, et dictum <a>felis venenatis</a> efficitur. 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. <strong>Pellentesque risus mi</strong>, tempus quis placerat ut, porta nec nulla. Vestibulum rhoncus ac ex sit amet fringilla. Nullam gravida purus diam, et dictum <a>felis venenatis</a> efficitur. Sit amet,
consectetur adipiscing elit
</div>
{% endcapture %}
{% 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>
{%
include meta.html
colors=true
sizes=false
variables=true
%}
<hr>
<div class="columns">
<div class="column">
{{ notification }}
</div>
<div class="column">
{% highlight html %}{{ notification }}{% endhighlight %}
</div>
</div>
{% include anchor.html name="Colors" %}
<div class="columns">
<div class="column">
{{ notification_colors }}
</div>
<div class="column">
{% highlight html %}{{ notification_colors }}{% endhighlight %}
</div>
</div>
{% include variables.html %}
</div>
</section>