---
title: Notification
subtitle: "Bold <strong>notification</strong> blocks, to alert your users of something"
layout: documentation
doc-tab: elements
doc-subtab: notification
breadcrumb:
- home
- documentation
- elements
- elements-notification
meta:
  colors: true
  sizes: false
  variables: true
---

{% 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 %}
{% for color in site.data.colors.justColors %}
<div class="notification is-{{ color }}">
  <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>
{% endfor %}
{% endcapture %}

{% include snippet.html content=notification %}

{% include anchor.html name="Colors" %}

{% include snippet.html content=notification_colors %}

{% include variables.html type='element' %}