Sponsor
Message
Colored message blocks, to emphasize part of your page
The Bulma message is a multi-part component:
message containermessage-header that can hold a title and a
delete element
message-body for the longer body of the messageExample
Hello World
HTML
<article class="message">
<div class="message-header">
<p>Hello World</p>
<button class="delete" aria-label="delete"></button>
</div>
<div class="message-body">
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
<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. Aenean ac
<em>eleifend lacus</em>, 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.
</div>
</article>
The message component is available in all the
different colors defined by the
$colors Sass map.
Example
Dark
HTML
<article class="message is-dark">
<div class="message-header">
<p>Dark</p>
<button class="delete" aria-label="delete"></button>
</div>
<div class="message-body">
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
<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. Aenean ac
<em>eleifend lacus</em>, 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.
</div>
</article>Example
Link
HTML
<article class="message is-link">
<div class="message-header">
<p>Link</p>
<button class="delete" aria-label="delete"></button>
</div>
<div class="message-body">
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
<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. Aenean ac
<em>eleifend lacus</em>, 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.
</div>
</article>Example
Primary
HTML
<article class="message is-primary">
<div class="message-header">
<p>Primary</p>
<button class="delete" aria-label="delete"></button>
</div>
<div class="message-body">
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
<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. Aenean ac
<em>eleifend lacus</em>, 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.
</div>
</article>Example
Info
HTML
<article class="message is-info">
<div class="message-header">
<p>Info</p>
<button class="delete" aria-label="delete"></button>
</div>
<div class="message-body">
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
<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. Aenean ac
<em>eleifend lacus</em>, 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.
</div>
</article>Example
Success
HTML
<article class="message is-success">
<div class="message-header">
<p>Success</p>
<button class="delete" aria-label="delete"></button>
</div>
<div class="message-body">
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
<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. Aenean ac
<em>eleifend lacus</em>, 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.
</div>
</article>Example
Warning
HTML
<article class="message is-warning">
<div class="message-header">
<p>Warning</p>
<button class="delete" aria-label="delete"></button>
</div>
<div class="message-body">
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
<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. Aenean ac
<em>eleifend lacus</em>, 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.
</div>
</article>Example
Danger
HTML
<article class="message is-danger">
<div class="message-header">
<p>Danger</p>
<button class="delete" aria-label="delete"></button>
</div>
<div class="message-body">
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
<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. Aenean ac
<em>eleifend lacus</em>, 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.
</div>
</article>
You can remove the message-header if you don't need it, which
will add a left border to the message-body:
Example
HTML
<article class="message">
<div class="message-body">
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
<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. Aenean ac
<em>eleifend lacus</em>, 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.
</div>
</article>Example
HTML
<article class="message is-dark">
<div class="message-body">
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
<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. Aenean ac
<em>eleifend lacus</em>, 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.
</div>
</article>Example
HTML
<article class="message is-link">
<div class="message-body">
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
<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. Aenean ac
<em>eleifend lacus</em>, 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.
</div>
</article>Example
HTML
<article class="message is-primary">
<div class="message-body">
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
<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. Aenean ac
<em>eleifend lacus</em>, 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.
</div>
</article>Example
HTML
<article class="message is-info">
<div class="message-body">
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
<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. Aenean ac
<em>eleifend lacus</em>, 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.
</div>
</article>Example
HTML
<article class="message is-success">
<div class="message-body">
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
<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. Aenean ac
<em>eleifend lacus</em>, 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.
</div>
</article>Example
HTML
<article class="message is-warning">
<div class="message-body">
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
<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. Aenean ac
<em>eleifend lacus</em>, 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.
</div>
</article>Example
HTML
<article class="message is-danger">
<div class="message-body">
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
<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. Aenean ac
<em>eleifend lacus</em>, 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.
</div>
</article>
You can add one of 3 size modifiers to the
message component:
Example
Small message
HTML
<article class="message is-small">
<div class="message-header">
<p>Small message</p>
<button class="delete is-small" aria-label="delete"></button>
</div>
<div class="message-body">
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
<strong>Pellentesque risus mi</strong>, tempus quis placerat ut, porta nec
nulla.Nullam gravida purus diam, et dictum <a>felis venenatis</a> efficitur.
Aenean ac <em>eleifend lacus</em>, in mollis lectus.
</div>
</article>Example
Normal message
HTML
<article class="message">
<div class="message-header">
<p>Normal message</p>
<button class="delete" aria-label="delete"></button>
</div>
<div class="message-body">
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
<strong>Pellentesque risus mi</strong>, tempus quis placerat ut, porta nec
nulla.Nullam gravida purus diam, et dictum <a>felis venenatis</a> efficitur.
Aenean ac <em>eleifend lacus</em>, in mollis lectus.
</div>
</article>Example
Medium message
HTML
<article class="message is-medium">
<div class="message-header">
<p>Medium message</p>
<button class="delete is-medium" aria-label="delete"></button>
</div>
<div class="message-body">
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
<strong>Pellentesque risus mi</strong>, tempus quis placerat ut, porta nec
nulla.Nullam gravida purus diam, et dictum <a>felis venenatis</a> efficitur.
Aenean ac <em>eleifend lacus</em>, in mollis lectus.
</div>
</article>Example
Large message
HTML
<article class="message is-large">
<div class="message-header">
<p>Large message</p>
<button class="delete is-large" aria-label="delete"></button>
</div>
<div class="message-body">
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
<strong>Pellentesque risus mi</strong>, tempus quis placerat ut, porta nec
nulla.Nullam gravida purus diam, et dictum <a>felis venenatis</a> efficitur.
Aenean ac <em>eleifend lacus</em>, in mollis lectus.
</div>
</article>|
Sass Variable
|
CSS Variable
|
Value
|
|---|---|---|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
Sass Variable
|
CSS Variable
|
Value
|
|---|---|---|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
