---
title: Message
layout: documentation
doc-tab: components
doc-subtab: message
breadcrumb:
- home
- documentation
- components
- components-message
meta:
colors: true
sizes: true
variables: true
---
{% capture message_example %}
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Pellentesque risus mi, tempus quis placerat ut, porta nec nulla. Vestibulum rhoncus ac ex sit amet fringilla. Nullam gravida purus diam, et dictum
felis venenatis efficitur. Aenean ac
eleifend lacus, in mollis lectus. Donec sodales, arcu et sollicitudin porttitor, tortor urna tempor ligula, id porttitor mi magna a neque. Donec dui urna, vehicula et sem eget, facilisis sodales sem.
{% endcapture %}
{% capture message_colors_example %}
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Pellentesque risus mi, tempus quis placerat ut, porta nec nulla. Vestibulum rhoncus ac ex sit amet fringilla. Nullam gravida purus diam, et dictum
felis venenatis efficitur. Aenean ac
eleifend lacus, in mollis lectus. Donec sodales, arcu et sollicitudin porttitor, tortor urna tempor ligula, id porttitor mi magna a neque. Donec dui urna, vehicula et sem eget, facilisis sodales sem.
{% for color in site.data.colors.justColors %}
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Pellentesque risus mi, tempus quis placerat ut, porta nec nulla. Vestibulum rhoncus ac ex sit amet fringilla. Nullam gravida purus diam, et dictum
felis venenatis efficitur. Aenean ac
eleifend lacus, in mollis lectus. Donec sodales, arcu et sollicitudin porttitor, tortor urna tempor ligula, id porttitor mi magna a neque. Donec dui urna, vehicula et sem eget, facilisis sodales sem.
{% endfor %}
{% endcapture %}
{% capture message_small %}
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Pellentesque risus mi, tempus quis placerat ut, porta nec nulla.Nullam gravida purus diam, et dictum
felis venenatis efficitur. Aenean ac
eleifend lacus, in mollis lectus.
{% endcapture %}
{% capture message_normal %}
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Pellentesque risus mi, tempus quis placerat ut, porta nec nulla.Nullam gravida purus diam, et dictum
felis venenatis efficitur. Aenean ac
eleifend lacus, in mollis lectus.
{% endcapture %}
{% capture message_medium %}
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Pellentesque risus mi, tempus quis placerat ut, porta nec nulla.Nullam gravida purus diam, et dictum
felis venenatis efficitur. Aenean ac
eleifend lacus, in mollis lectus.
{% endcapture %}
{% capture message_large %}
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Pellentesque risus mi, tempus quis placerat ut, porta nec nulla.Nullam gravida purus diam, et dictum
felis venenatis efficitur. Aenean ac
eleifend lacus, in mollis lectus.
{% endcapture %}
{% capture message_body_example %}
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Pellentesque risus mi, tempus quis placerat ut, porta nec nulla. Vestibulum rhoncus ac ex sit amet fringilla. Nullam gravida purus diam, et dictum
felis venenatis efficitur. Aenean ac
eleifend lacus, in mollis lectus. Donec sodales, arcu et sollicitudin porttitor, tortor urna tempor ligula, id porttitor mi magna a neque. Donec dui urna, vehicula et sem eget, facilisis sodales sem.
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Pellentesque risus mi, tempus quis placerat ut, porta nec nulla. Vestibulum rhoncus ac ex sit amet fringilla. Nullam gravida purus diam, et dictum
felis venenatis efficitur. Aenean ac
eleifend lacus, in mollis lectus. Donec sodales, arcu et sollicitudin porttitor, tortor urna tempor ligula, id porttitor mi magna a neque. Donec dui urna, vehicula et sem eget, facilisis sodales sem.
{% for color in site.data.colors.justColors %}
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Pellentesque risus mi, tempus quis placerat ut, porta nec nulla. Vestibulum rhoncus ac ex sit amet fringilla. Nullam gravida purus diam, et dictum
felis venenatis efficitur. Aenean ac
eleifend lacus, in mollis lectus. Donec sodales, arcu et sollicitudin porttitor, tortor urna tempor ligula, id porttitor mi magna a neque. Donec dui urna, vehicula et sem eget, facilisis sodales sem.
{% endfor %}
{% endcapture %}
The Bulma message
is a multi-part component:
-
the
message
container
-
the optional
message-header
that can hold a title and a delete
element
-
the
message-body
for the longer body of the message
{% include elements/snippet.html content=message_example %}
{% include elements/anchor.html name="Colors" %}
The message component is available in all the different colors defined by the $colors
Sass map.
{% include elements/snippet.html content=message_colors_example %}
{% include elements/anchor.html name="Message body only" %}
You can remove the message-header
if you don't need it, which will add a left border to the message-body
:
{% include elements/snippet.html content=message_body_example %}
{% include elements/anchor.html name="Sizes" %}
You can add one of 3 size modifiers to the message
component:
{% include elements/snippet.html content=message_small %}
{% include elements/snippet.html content=message_normal %}
{% include elements/snippet.html content=message_medium %}
{% include elements/snippet.html content=message_large %}
{% include elements/variables.html type='component' %}