---
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 %}
{% include snippet.html content=message_example %}
{% include anchor.html name="Colors" %}
{% include snippet.html content=message_colors_example %}
{% include anchor.html name="Message body only" %}
You can omit the message header:
{% include snippet.html content=message_body_example %}
{% include anchor.html name="Sizes" %}
{% include snippet.html content=message_small %}
{% include snippet.html content=message_normal %}
{% include snippet.html content=message_medium %}
{% include snippet.html content=message_large %}
{% include variables.html type='component' %}