mirror of
https://github.com/jgthms/bulma.git
synced 2024-11-28 12:24:23 +00:00
248 lines
15 KiB
HTML
248 lines
15 KiB
HTML
|
---
|
||
|
|
layout: documentation
|
||
|
|
doc-tab: components
|
||
|
|
doc-subtab: message
|
||
|
|
---
|
||
|
|
|
||
|
|
{% include subnav-components.html %}
|
||
|
|
|
||
|
|
<section class="section">
|
||
|
|
<div class="container">
|
||
|
|
<h1 class="title">Messages</h1>
|
||
|
|
<h2 class="subtitle">
|
||
|
|
Colored <strong>message</strong> blocks, to emphasize part of your page
|
||
|
|
</h2>
|
||
|
|
|
||
|
|
<hr>
|
||
|
|
|
||
|
|
<div class="columns">
|
||
|
|
<div class="column is-half">
|
||
|
|
<article class="message">
|
||
|
|
<div class="message-header">
|
||
|
|
Hello World
|
||
|
|
</div>
|
||
|
|
<div class="message-body">
|
||
|
|
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.
|
||
|
|
</div>
|
||
|
|
</article>
|
||
|
|
<article class="message is-primary">
|
||
|
|
<div class="message-header">
|
||
|
|
Primary
|
||
|
|
</div>
|
||
|
|
<div class="message-body">
|
||
|
|
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.
|
||
|
|
</div>
|
||
|
|
</article>
|
||
|
|
<article class="message is-info">
|
||
|
|
<div class="message-header">
|
||
|
|
Info
|
||
|
|
</div>
|
||
|
|
<div class="message-body">
|
||
|
|
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.
|
||
|
|
</div>
|
||
|
|
</article>
|
||
|
|
<article class="message is-success">
|
||
|
|
<div class="message-header">
|
||
|
|
Success
|
||
|
|
</div>
|
||
|
|
<div class="message-body">
|
||
|
|
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.
|
||
|
|
</div>
|
||
|
|
</article>
|
||
|
|
<article class="message is-warning">
|
||
|
|
<div class="message-header">
|
||
|
|
Warning
|
||
|
|
</div>
|
||
|
|
<div class="message-body">
|
||
|
|
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.
|
||
|
|
</div>
|
||
|
|
</article>
|
||
|
|
<article class="message is-danger">
|
||
|
|
<div class="message-header">
|
||
|
|
Danger
|
||
|
|
</div>
|
||
|
|
<div class="message-body">
|
||
|
|
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.
|
||
|
|
</div>
|
||
|
|
</article>
|
||
|
|
</div>
|
||
|
|
<div class="column is-half">
|
||
|
|
{% highlight html %}
|
||
|
|
<article class="message">
|
||
|
|
<div class="message-header">
|
||
|
|
Hello World
|
||
|
|
</div>
|
||
|
|
<div class="message-body">
|
||
|
|
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.
|
||
|
|
</div>
|
||
|
|
</article>
|
||
|
|
|
||
|
|
<article class="message is-primary">
|
||
|
|
<div class="message-header">
|
||
|
|
Primary
|
||
|
|
</div>
|
||
|
|
<div class="message-body">
|
||
|
|
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.
|
||
|
|
</div>
|
||
|
|
</article>
|
||
|
|
|
||
|
|
<article class="message is-info">
|
||
|
|
<div class="message-header">
|
||
|
|
Info
|
||
|
|
</div>
|
||
|
|
<div class="message-body">
|
||
|
|
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.
|
||
|
|
</div>
|
||
|
|
</article>
|
||
|
|
|
||
|
|
<article class="message is-success">
|
||
|
|
<div class="message-header">
|
||
|
|
Success
|
||
|
|
</div>
|
||
|
|
<div class="message-body">
|
||
|
|
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.
|
||
|
|
</div>
|
||
|
|
</article>
|
||
|
|
|
||
|
|
<article class="message is-warning">
|
||
|
|
<div class="message-header">
|
||
|
|
Warning
|
||
|
|
</div>
|
||
|
|
<div class="message-body">
|
||
|
|
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.
|
||
|
|
</div>
|
||
|
|
</article>
|
||
|
|
|
||
|
|
<article class="message is-danger">
|
||
|
|
<div class="message-header">
|
||
|
|
Danger
|
||
|
|
</div>
|
||
|
|
<div class="message-body">
|
||
|
|
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.
|
||
|
|
</div>
|
||
|
|
</article>
|
||
|
|
{% endhighlight %}
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<hr>
|
||
|
|
|
||
|
|
<h3 class="subtitle">Message body only</h3>
|
||
|
|
|
||
|
|
<div class="content">
|
||
|
|
<p>You can <strong>omit</strong> the message header:</p>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div class="columns">
|
||
|
|
<div class="column is-half">
|
||
|
|
<article class="message">
|
||
|
|
<div class="message-body">
|
||
|
|
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.
|
||
|
|
</div>
|
||
|
|
</article>
|
||
|
|
<article class="message is-primary">
|
||
|
|
<div class="message-body">
|
||
|
|
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.
|
||
|
|
</div>
|
||
|
|
</article>
|
||
|
|
<article class="message is-info">
|
||
|
|
<div class="message-body">
|
||
|
|
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.
|
||
|
|
</div>
|
||
|
|
</article>
|
||
|
|
<article class="message is-success">
|
||
|
|
<div class="message-body">
|
||
|
|
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.
|
||
|
|
</div>
|
||
|
|
</article>
|
||
|
|
<article class="message is-warning">
|
||
|
|
<div class="message-body">
|
||
|
|
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.
|
||
|
|
</div>
|
||
|
|
</article>
|
||
|
|
<article class="message is-danger">
|
||
|
|
<div class="message-body">
|
||
|
|
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.
|
||
|
|
</div>
|
||
|
|
</article>
|
||
|
|
</div>
|
||
|
|
<div class="column is-half">
|
||
|
|
{% highlight html %}
|
||
|
|
<article class="message">
|
||
|
|
<div class="message-body">
|
||
|
|
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.
|
||
|
|
</div>
|
||
|
|
</article>
|
||
|
|
<article class="message is-primary">
|
||
|
|
<div class="message-body">
|
||
|
|
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.
|
||
|
|
</div>
|
||
|
|
</article>
|
||
|
|
<article class="message is-info">
|
||
|
|
<div class="message-body">
|
||
|
|
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.
|
||
|
|
</div>
|
||
|
|
</article>
|
||
|
|
<article class="message is-success">
|
||
|
|
<div class="message-body">
|
||
|
|
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.
|
||
|
|
</div>
|
||
|
|
</article>
|
||
|
|
<article class="message is-warning">
|
||
|
|
<div class="message-body">
|
||
|
|
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.
|
||
|
|
</div>
|
||
|
|
</article>
|
||
|
|
<article class="message is-danger">
|
||
|
|
<div class="message-body">
|
||
|
|
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.
|
||
|
|
</div>
|
||
|
|
</article>
|
||
|
|
{% endhighlight %}
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</section>
|