You can use these variables to customize this element. Simply set one or multiple of these variables before importing Bulma. Learn how.
Notification
Bold notification blocks, to alert your users of something
<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>
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-link">
<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>
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-success">
<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-warning">
<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-danger">
<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>
Variables #
Name | Type | Default value | Computed value |
---|---|---|---|
Name | Type | Default value | Computed value |
$notification-background-color
|
color |
$background
|
hsl(0, 0%, 96%)
|
$notification-radius
|
size |
$radius
|
4px
|
$notification-padding
|
size |
1.25rem 2.5rem 1.25rem 1.5rem
|
This page is open source.
Noticed a typo? Or something unclear?
Improve this page on GitHub