bulma/docs/documentation/components/message.html

281 lines
14 KiB
HTML
Raw Normal View History

---
layout: documentation
doc-tab: components
doc-subtab: message
2017-07-28 22:27:59 +00:00
variables:
- name: $message-background-color
value: $background
- name: $message-radius
value: $radius
- name: $message-header-background-color
value: $text
- name: $message-header-color
value: $text-invert
- name: $message-header-padding
value: 0.5em 0.75em
- name: $message-header-radius
value: $radius
- name: $message-body-border
value: 1px solid $border
- name: $message-body-color
value: $text
- name: $message-body-padding
value: 1em 1.25em
- name: $message-body-radius
value: $radius
- name: $message-body-pre-background-color
value: $white
- name: $message-body-pre-code-background-color
value: transparent
---
2016-10-30 19:20:51 +00:00
{% capture message_example %}
<article class="message">
<div class="message-header">
2016-10-30 19:20:51 +00:00
<p>Hello World</p>
<button class="delete" aria-label="delete"></button>
</div>
<div class="message-body">
2016-12-23 12:45:52 +00:00
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.
2016-10-30 19:20:51 +00:00
</div>
</article>
2017-07-28 22:45:40 +00:00
{% endcapture %}
{% capture message_colors_example %}
2016-10-30 19:20:51 +00:00
<article class="message is-dark">
<div class="message-header">
<p>Dark</p>
<button class="delete" aria-label="delete"></button>
2016-10-30 19:20:51 +00:00
</div>
<div class="message-body">
2016-12-23 12:45:52 +00:00
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>
<article class="message is-primary">
<div class="message-header">
2016-10-30 19:20:51 +00:00
<p>Primary</p>
<button class="delete" aria-label="delete"></button>
</div>
<div class="message-body">
2016-12-23 12:45:52 +00:00
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>
<article class="message is-info">
<div class="message-header">
2016-10-30 19:20:51 +00:00
<p>Info</p>
<button class="delete" aria-label="delete"></button>
</div>
<div class="message-body">
2016-12-23 12:45:52 +00:00
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>
<article class="message is-success">
<div class="message-header">
2016-10-30 19:20:51 +00:00
<p>Success</p>
<button class="delete" aria-label="delete"></button>
</div>
<div class="message-body">
2016-12-23 12:45:52 +00:00
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>
<article class="message is-warning">
<div class="message-header">
2016-10-30 19:20:51 +00:00
<p>Warning</p>
<button class="delete" aria-label="delete"></button>
</div>
<div class="message-body">
2016-12-23 12:45:52 +00:00
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>
<article class="message is-danger">
<div class="message-header">
2016-12-23 12:45:52 +00:00
<p><strong>Danger</strong>! <a>Learn more</a></p>
<button class="delete" aria-label="delete"></button>
</div>
<div class="message-body">
2016-12-23 12:45:52 +00:00
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>
2016-10-30 19:20:51 +00:00
{% endcapture %}
2017-07-28 22:45:40 +00:00
{% capture message_small %}
<article class="message is-small">
<div class="message-header">
<p>Small message</p>
<button class="delete is-small" aria-label="delete"></button>
2017-07-28 22:45:40 +00:00
</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>
{% endcapture %}
{% capture message_normal %}
<article class="message">
<div class="message-header">
<p>Normal message</p>
<button class="delete" aria-label="delete"></button>
2017-07-28 22:45:40 +00:00
</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>
{% endcapture %}
{% capture message_medium %}
<article class="message is-medium">
<div class="message-header">
<p>Medium message</p>
<button class="delete is-medium" aria-label="delete"></button>
2017-07-28 22:45:40 +00:00
</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>
{% endcapture %}
{% capture message_large %}
<article class="message is-large">
<div class="message-header">
<p>Large message</p>
<button class="delete is-large" aria-label="delete"></button>
2017-07-28 22:45:40 +00:00
</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>
{% endcapture %}
2016-10-30 19:20:51 +00:00
{% capture message_body_example %}
<article class="message">
<div class="message-body">
2016-12-23 12:45:52 +00:00
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>
2016-10-30 19:20:51 +00:00
<article class="message is-dark">
<div class="message-body">
2016-12-23 12:45:52 +00:00
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.
2016-10-30 19:20:51 +00:00
</div>
</article>
<article class="message is-primary">
<div class="message-body">
2016-12-23 12:45:52 +00:00
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>
<article class="message is-info">
<div class="message-body">
2016-12-23 12:45:52 +00:00
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>
<article class="message is-success">
<div class="message-body">
2016-12-23 12:45:52 +00:00
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>
<article class="message is-warning">
<div class="message-body">
2016-12-23 12:45:52 +00:00
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>
<article class="message is-danger">
<div class="message-body">
2016-12-23 12:45:52 +00:00
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>
2016-10-30 19:20:51 +00:00
{% endcapture %}
2017-07-28 22:27:59 +00:00
{% 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>
{%
include meta.html
colors=true
sizes=true
variables=true
%}
<hr>
<div class="columns">
<div class="column is-half">
{{message_example}}
</div>
<div class="column is-half">
{% highlight html %}{{message_example}}{% endhighlight %}
</div>
</div>
2017-08-14 17:25:14 +00:00
{% include anchor.html name="Colors" %}
2017-07-28 22:27:59 +00:00
<div class="columns">
<div class="column is-half">
2017-07-29 13:59:10 +00:00
{{message_colors_example}}
2017-07-28 22:27:59 +00:00
</div>
<div class="column is-half">
2017-07-29 13:59:10 +00:00
{% highlight html %}{{message_colors_example}}{% endhighlight %}
2017-07-28 22:27:59 +00:00
</div>
</div>
2017-07-29 13:59:10 +00:00
<hr>
2017-07-28 22:45:40 +00:00
2017-07-29 13:59:10 +00:00
<h3 class="title">Message body only</h3>
<div class="content">
<p>You can <strong>omit</strong> the message header:</p>
</div>
2017-07-28 22:45:40 +00:00
<div class="columns">
<div class="column is-half">
2017-07-29 13:59:10 +00:00
{{message_body_example}}
2017-07-28 22:45:40 +00:00
</div>
<div class="column is-half">
2017-07-29 13:59:10 +00:00
{% highlight html %}{{message_body_example}}{% endhighlight %}
2017-07-28 22:45:40 +00:00
</div>
</div>
2017-08-14 17:25:14 +00:00
{% include anchor.html name="Sizes" %}
2017-07-28 22:45:40 +00:00
<div class="columns">
<div class="column is-half">
{{message_small}}
</div>
<div class="column is-half">
{% highlight html %}{{message_small}}{% endhighlight %}
</div>
</div>
<div class="columns">
<div class="column is-half">
{{message_normal}}
</div>
<div class="column is-half">
{% highlight html %}{{message_normal}}{% endhighlight %}
</div>
</div>
<div class="columns">
<div class="column is-half">
{{message_medium}}
</div>
<div class="column is-half">
{% highlight html %}{{message_medium}}{% endhighlight %}
</div>
</div>
<div class="columns">
<div class="column is-half">
{{message_large}}
</div>
<div class="column is-half">
{% highlight html %}{{message_large}}{% endhighlight %}
</div>
</div>
2017-07-28 22:27:59 +00:00
{% include variables.html %}
2016-10-30 19:20:51 +00:00
</div>
</section>