mirror of
https://github.com/jgthms/bulma.git
synced 2024-11-14 11:14:24 +00:00
181 lines
10 KiB
HTML
181 lines
10 KiB
HTML
---
|
|
layout: documentation
|
|
doc-tab: components
|
|
doc-subtab: message
|
|
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
|
|
---
|
|
|
|
{% capture message_example %}
|
|
<article class="message">
|
|
<div class="message-header">
|
|
<p>Hello World</p>
|
|
<button class="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>
|
|
<article class="message is-dark">
|
|
<div class="message-header">
|
|
<p>Dark</p>
|
|
<button class="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>
|
|
<article class="message is-primary">
|
|
<div class="message-header">
|
|
<p>Primary</p>
|
|
<button class="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>
|
|
<article class="message is-info">
|
|
<div class="message-header">
|
|
<p>Info</p>
|
|
<button class="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>
|
|
<article class="message is-success">
|
|
<div class="message-header">
|
|
<p>Success</p>
|
|
<button class="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>
|
|
<article class="message is-warning">
|
|
<div class="message-header">
|
|
<p>Warning</p>
|
|
<button class="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>
|
|
<article class="message is-danger">
|
|
<div class="message-header">
|
|
<p><strong>Danger</strong>! <a>Learn more</a></p>
|
|
<button class="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>
|
|
{% endcapture %}
|
|
|
|
{% capture message_body_example %}
|
|
<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>
|
|
<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>
|
|
<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>
|
|
<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>
|
|
<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>
|
|
<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>
|
|
<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>
|
|
{% endcapture %}
|
|
|
|
{% 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>
|
|
|
|
<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">
|
|
{{message_body_example}}
|
|
</div>
|
|
<div class="column is-half">
|
|
{% highlight html %}{{message_body_example}}{% endhighlight %}
|
|
</div>
|
|
</div>
|
|
|
|
{% include variables.html %}
|
|
|
|
</div>
|
|
</section>
|