bulma/docs/documentation/elements/notification.html

62 lines
1.8 KiB
HTML
Raw Normal View History

---
2017-07-29 12:02:00 +00:00
title: Notification
layout: documentation
doc-tab: elements
doc-subtab: notification
2017-07-28 21:57:51 +00:00
variables:
- name: $notification-background-color
value: $background
- name: $notification-radius
value: $radius
- name: $notification-padding
value: 1.25rem 2.5rem 1.25rem 1.5rem
---
2017-07-29 12:02:00 +00:00
{% capture notification %}
<div class="notification">
<button class="delete"></button>
Lorem ipsum dolor sit amet, consectetur
2017-07-05 20:27:23 +00:00
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>
2017-07-29 12:02:00 +00:00
{% endcapture %}
2017-07-29 12:02:00 +00:00
{% capture notification_colors %}
2017-10-09 17:13:02 +00:00
{% for color in site.data.variables.colors %}
<div class="notification is-{{ color.name }}">
<button class="delete"></button>
Primar lorem ipsum dolor sit amet, consectetur
2017-07-05 20:27:23 +00:00
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>
2017-10-09 17:13:02 +00:00
{% endfor %}
2017-07-29 12:02:00 +00:00
{% 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>
2017-08-30 20:13:17 +00:00
{% include snippet.html content=notification %}
2017-07-29 12:02:00 +00:00
2017-08-14 17:25:14 +00:00
{% include anchor.html name="Colors" %}
2017-07-29 12:02:00 +00:00
2017-08-30 20:13:17 +00:00
{% include snippet.html content=notification_colors %}
2017-07-28 21:57:51 +00:00
{% include variables.html %}
</div>
</section>