mirror of
https://github.com/jgthms/bulma.git
synced 2024-10-17 09:04:18 +00:00
111 lines
5.2 KiB
HTML
111 lines
5.2 KiB
HTML
---
|
|
title: Color helpers
|
|
layout: documentation
|
|
doc-tab: modifiers
|
|
doc-subtab: color-helpers
|
|
---
|
|
|
|
{% include subnav/subnav-modifiers.html %}
|
|
|
|
<section class="section">
|
|
<div class="container">
|
|
<h1 class="title">Color helpers</h1>
|
|
<h2 class="subtitle">
|
|
Change the <strong>color</strong> of the text and/or background
|
|
</h2>
|
|
|
|
{% include anchor.html name="Text color" %}
|
|
|
|
<div class="content">
|
|
<p>
|
|
You can set any element to one of the <strong>9 colors</strong> or <strong>9 shades of grey</strong>:
|
|
</p>
|
|
</div>
|
|
|
|
<table class="table is-bordered">
|
|
<thead>
|
|
<tr>
|
|
<th>
|
|
Class
|
|
</th>
|
|
<th>
|
|
Color
|
|
</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody>
|
|
<tr><td><code>has-text-white</code></td><td>{% include color/white.html %}</td></tr>
|
|
<tr><td><code>has-text-black</code></td><td>{% include color/black.html %}</td></tr>
|
|
<tr><td><code>has-text-light</code></td><td>{% include color/white-ter.html %}</td></tr>
|
|
<tr><td><code>has-text-dark</code></td><td>{% include color/grey-darker.html %}</td></tr>
|
|
<tr><td><code>has-text-primary</code></td><td>{% include color/turquoise.html %}</td></tr>
|
|
<tr><td><code>has-text-info</code></td><td>{% include color/cyan.html %}</td></tr>
|
|
<tr><td><code>has-text-link</code></td><td>{% include color/blue.html %}</td></tr>
|
|
<tr><td><code>has-text-success</code></td><td>{% include color/green.html %}</td></tr>
|
|
<tr><td><code>has-text-warning</code></td><td>{% include color/yellow.html %}</td></tr>
|
|
<tr><td><code>has-text-danger</code></td><td>{% include color/red.html %}</td></tr>
|
|
<tr><td><code>has-text-black-bis</code></td><td>{% include color/black-bis.html %}</td></tr>
|
|
<tr><td><code>has-text-black-ter</code></td><td>{% include color/black-ter.html %}</td></tr>
|
|
<tr><td><code>has-text-grey-darker</code></td><td>{% include color/grey-darker.html %}</td></tr>
|
|
<tr><td><code>has-text-grey-dark</code></td><td>{% include color/grey-dark.html %}</td></tr>
|
|
<tr><td><code>has-text-grey</code></td><td>{% include color/grey.html %}</td></tr>
|
|
<tr><td><code>has-text-grey-light</code></td><td>{% include color/grey-light.html %}</td></tr>
|
|
<tr><td><code>has-text-grey-lighter</code></td><td>{% include color/grey-lighter.html %}</td></tr>
|
|
<tr><td><code>has-text-white-ter</code></td><td>{% include color/white-ter.html %}</td></tr>
|
|
<tr><td><code>has-text-white-bis</code></td><td>{% include color/white-bis.html %}</td></tr>
|
|
</tbody>
|
|
</table>
|
|
|
|
{% assign vernum = site.version | replace: "." "" | plus: 1 | minus: 1 %}
|
|
|
|
{% if vernum >= 63 %}
|
|
|
|
{% include anchor.html name="Background color" %}
|
|
|
|
{% include elements/new-tag.html version="0.6.3" %}
|
|
|
|
<div class="content">
|
|
<p>
|
|
You can set any element to one of the <strong>9 colors</strong> or <strong>9 shades of grey</strong>:
|
|
</p>
|
|
</div>
|
|
|
|
<table class="table is-bordered">
|
|
<thead>
|
|
<tr>
|
|
<th>
|
|
Class
|
|
</th>
|
|
<th>
|
|
Background color
|
|
</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody>
|
|
<tr><td><code>has-background-white</code></td><td>{% include color/white.html %}</td></tr>
|
|
<tr><td><code>has-background-black</code></td><td>{% include color/black.html %}</td></tr>
|
|
<tr><td><code>has-background-light</code></td><td>{% include color/white-ter.html %}</td></tr>
|
|
<tr><td><code>has-background-dark</code></td><td>{% include color/grey-darker.html %}</td></tr>
|
|
<tr><td><code>has-background-primary</code></td><td>{% include color/turquoise.html %}</td></tr>
|
|
<tr><td><code>has-background-info</code></td><td>{% include color/cyan.html %}</td></tr>
|
|
<tr><td><code>has-background-link</code></td><td>{% include color/blue.html %}</td></tr>
|
|
<tr><td><code>has-background-success</code></td><td>{% include color/green.html %}</td></tr>
|
|
<tr><td><code>has-background-warning</code></td><td>{% include color/yellow.html %}</td></tr>
|
|
<tr><td><code>has-background-danger</code></td><td>{% include color/red.html %}</td></tr>
|
|
<tr><td><code>has-background-black-bis</code></td><td>{% include color/black-bis.html %}</td></tr>
|
|
<tr><td><code>has-background-black-ter</code></td><td>{% include color/black-ter.html %}</td></tr>
|
|
<tr><td><code>has-background-grey-darker</code></td><td>{% include color/grey-darker.html %}</td></tr>
|
|
<tr><td><code>has-background-grey-dark</code></td><td>{% include color/grey-dark.html %}</td></tr>
|
|
<tr><td><code>has-background-grey</code></td><td>{% include color/grey.html %}</td></tr>
|
|
<tr><td><code>has-background-grey-light</code></td><td>{% include color/grey-light.html %}</td></tr>
|
|
<tr><td><code>has-background-grey-lighter</code></td><td>{% include color/grey-lighter.html %}</td></tr>
|
|
<tr><td><code>has-background-white-ter</code></td><td>{% include color/white-ter.html %}</td></tr>
|
|
<tr><td><code>has-background-white-bis</code></td><td>{% include color/white-bis.html %}</td></tr>
|
|
</tbody>
|
|
</table>
|
|
|
|
{% endif %}
|
|
|
|
</div>
|
|
</section>
|