bulma/docs/documentation/components/message.html

146 lines
6.9 KiB
HTML
Raw Normal View History

---
title: Message
2018-04-09 12:18:46 +00:00
subtitle: "Colored <strong>message</strong> blocks, to emphasize part of your page"
layout: documentation
doc-tab: components
doc-subtab: message
2018-04-09 12:18:46 +00:00
meta:
- colors: true
- sizes: true
- variables: true
breadcrumb:
- home
- documentation
- components
- components-message
---
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>
{% for color in site.data.colors.justColors %}
2017-10-09 22:30:58 +00:00
<article class="message is-{{ color }}">
<div class="message-header">
2017-10-09 22:30:58 +00:00
<p>{{ color | capitalize }}</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>
2017-10-09 22:30:58 +00:00
{% endfor %}
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>
{% for color in site.data.colors.justColors %}
2017-10-09 22:30:58 +00:00
<article class="message is-{{ color }}">
<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>
2017-10-09 22:30:58 +00:00
{% endfor %}
2016-10-30 19:20:51 +00:00
{% endcapture %}
2017-07-28 22:27:59 +00:00
2018-04-09 12:18:46 +00:00
{% include snippet.html content=message_example %}
2017-07-28 22:27:59 +00:00
2018-04-09 12:18:46 +00:00
{% include anchor.html name="Colors" %}
2017-07-28 22:27:59 +00:00
2018-04-09 12:18:46 +00:00
{% include snippet.html content=message_colors_example %}
2017-07-28 22:27:59 +00:00
2018-04-09 12:18:46 +00:00
{% include anchor.html name="Message body only" %}
2017-07-28 22:27:59 +00:00
2018-04-09 12:18:46 +00:00
<div class="content">
<p>You can <strong>omit</strong> the message header:</p>
</div>
2017-07-28 22:27:59 +00:00
2018-04-09 12:18:46 +00:00
{% include snippet.html content=message_body_example %}
2017-07-28 22:27:59 +00:00
2018-04-09 12:18:46 +00:00
{% include anchor.html name="Sizes" %}
2017-07-28 22:45:40 +00:00
2018-04-09 12:18:46 +00:00
{% include snippet.html content=message_small %}
2017-08-30 20:33:49 +00:00
2018-04-09 12:18:46 +00:00
{% include snippet.html content=message_normal %}
2017-07-28 22:45:40 +00:00
2018-04-09 12:18:46 +00:00
{% include snippet.html content=message_medium %}
2017-07-28 22:45:40 +00:00
2018-04-09 12:18:46 +00:00
{% include snippet.html content=message_large %}
2017-07-28 22:45:40 +00:00
2018-04-09 12:18:46 +00:00
{% include variables.html type='component' %}