Ark/bulma
1
0
Fork 0
mirror of https://github.com/jgthms/bulma synced 2026-03-15 02:04:29 -07:00
Code Issues Packages Projects Releases Wiki Activity

Add heading

Browse Source
This commit is contained in:
Jeremy Thomas
2017-07-29 13:02:00 +01:00
parent 741e9d2d40
commit 93b7fb2fd4
47 changed files with 352 additions and 223 deletions
Download Patch File Download Diff File Expand all files Collapse all files

81
docs/documentation/elements/notification.html
View File

@@ -1,4 +1,5 @@
---
title: Notification
layout: documentation
doc-tab: elements
doc-subtab: notification
@@ -11,53 +12,16 @@ variables:
value: 1.25rem 2.5rem 1.25rem 1.5rem
---
{% 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. <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-primary">
<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-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>
</div>
<div class="column">
{% highlight html %}
{% 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
@@ -92,7 +56,42 @@ variables:
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>
{% endhighlight %}
{% 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 heading.html name="Colors" %}
<div class="columns">
<div class="column">
{{ notification_colors }}
</div>
<div class="column">
{% highlight html %}{{ notification_colors }}{% endhighlight %}
</div>
</div>