2016-09-11 11:00:49 +00:00
|
|
|
---
|
|
|
|
layout: documentation
|
|
|
|
doc-tab: elements
|
|
|
|
doc-subtab: tag
|
|
|
|
---
|
|
|
|
|
|
|
|
{% include subnav-elements.html %}
|
|
|
|
|
|
|
|
<section class="section">
|
|
|
|
<div class="container">
|
|
|
|
<h1 class="title">Tags</h1>
|
|
|
|
<h2 class="subtitle">
|
|
|
|
Small <strong>tag labels</strong> to insert anywhere
|
|
|
|
</h2>
|
|
|
|
|
|
|
|
<hr>
|
|
|
|
|
|
|
|
<div class="columns">
|
|
|
|
<div class="column is-4">
|
2016-10-30 10:41:53 +00:00
|
|
|
By default, a <strong>tag</strong> is a 1.5rem high label.
|
2016-09-11 11:00:49 +00:00
|
|
|
</div>
|
|
|
|
<div class="column is-2">
|
|
|
|
<span class="tag">
|
|
|
|
Tag label
|
|
|
|
</span>
|
|
|
|
</div>
|
|
|
|
<div class="column is-6">
|
|
|
|
{% highlight html %}
|
|
|
|
<span class="tag">
|
|
|
|
Tag label
|
|
|
|
</span>
|
|
|
|
{% endhighlight %}
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
|
|
|
|
<div class="columns">
|
|
|
|
<div class="column is-4">
|
2016-10-30 10:41:53 +00:00
|
|
|
Like with buttons, there are <strong>9 different colors</strong> available.
|
2016-09-11 11:00:49 +00:00
|
|
|
</div>
|
|
|
|
<div class="column is-2">
|
2017-03-14 21:00:58 +00:00
|
|
|
<p class="field">
|
2016-10-30 10:41:53 +00:00
|
|
|
<span class="tag is-black">
|
|
|
|
Black
|
|
|
|
</span>
|
|
|
|
</p>
|
2017-03-14 21:00:58 +00:00
|
|
|
<p class="field">
|
2016-09-11 11:00:49 +00:00
|
|
|
<span class="tag is-dark">
|
|
|
|
Dark
|
|
|
|
</span>
|
|
|
|
</p>
|
2017-03-14 21:00:58 +00:00
|
|
|
<p class="field">
|
2016-10-30 10:41:53 +00:00
|
|
|
<span class="tag is-light">
|
|
|
|
Light
|
|
|
|
</span>
|
|
|
|
</p>
|
2017-03-14 21:00:58 +00:00
|
|
|
<p class="field">
|
2016-10-30 10:41:53 +00:00
|
|
|
<span class="tag is-white">
|
|
|
|
White
|
|
|
|
</span>
|
|
|
|
</p>
|
2017-03-14 21:00:58 +00:00
|
|
|
<p class="field">
|
2016-09-11 11:00:49 +00:00
|
|
|
<span class="tag is-primary">
|
|
|
|
Primary
|
|
|
|
</span>
|
|
|
|
</p>
|
2017-03-14 21:00:58 +00:00
|
|
|
<p class="field">
|
2016-09-11 11:00:49 +00:00
|
|
|
<span class="tag is-info">
|
|
|
|
Info
|
|
|
|
</span>
|
|
|
|
</p>
|
2017-03-14 21:00:58 +00:00
|
|
|
<p class="field">
|
2016-09-11 11:00:49 +00:00
|
|
|
<span class="tag is-success">
|
|
|
|
Success
|
|
|
|
</span>
|
|
|
|
</p>
|
2017-03-14 21:00:58 +00:00
|
|
|
<p class="field">
|
2016-09-11 11:00:49 +00:00
|
|
|
<span class="tag is-warning">
|
|
|
|
Warning
|
|
|
|
</span>
|
|
|
|
</p>
|
|
|
|
<span class="tag is-danger">
|
|
|
|
Danger
|
|
|
|
</span>
|
|
|
|
</div>
|
|
|
|
<div class="column is-6">
|
|
|
|
{% highlight html %}
|
2016-10-30 10:41:53 +00:00
|
|
|
<span class="tag is-black">Black</span>
|
2016-09-11 11:00:49 +00:00
|
|
|
<span class="tag is-dark">Dark</span>
|
2016-10-30 10:41:53 +00:00
|
|
|
<span class="tag is-light">Light</span>
|
|
|
|
<span class="tag is-white">White</span>
|
2016-09-11 11:00:49 +00:00
|
|
|
<span class="tag is-primary">Primary</span>
|
|
|
|
<span class="tag is-info">Info</span>
|
|
|
|
<span class="tag is-success">Success</span>
|
|
|
|
<span class="tag is-warning">Warning</span>
|
|
|
|
<span class="tag is-danger">Danger</span>
|
|
|
|
{% endhighlight %}
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
|
|
|
|
<div class="columns">
|
|
|
|
<div class="column is-4">
|
2016-10-30 10:41:53 +00:00
|
|
|
And <strong>2 additional</strong> sizes.
|
2016-09-11 11:00:49 +00:00
|
|
|
</div>
|
|
|
|
<div class="column is-2">
|
2017-03-14 21:00:58 +00:00
|
|
|
<p class="field">
|
2016-09-11 11:00:49 +00:00
|
|
|
<span class="tag is-primary is-medium">
|
|
|
|
Medium
|
|
|
|
</span>
|
|
|
|
</p>
|
2017-03-14 21:00:58 +00:00
|
|
|
<p class="field">
|
2016-09-11 11:00:49 +00:00
|
|
|
<span class="tag is-info is-large">
|
|
|
|
Large
|
|
|
|
</span>
|
|
|
|
</p>
|
|
|
|
</div>
|
|
|
|
<div class="column is-6">
|
|
|
|
{% highlight html %}
|
|
|
|
<span class="tag is-primary is-medium">Medium</span>
|
|
|
|
<span class="tag is-info is-large">Large</span>
|
|
|
|
{% endhighlight %}
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
|
|
|
|
<div class="columns">
|
|
|
|
<div class="column is-4">
|
|
|
|
You can also append a <strong>delete button</strong>.
|
|
|
|
</div>
|
|
|
|
<div class="column is-2">
|
2017-03-14 21:00:58 +00:00
|
|
|
<p class="field">
|
2016-09-11 11:00:49 +00:00
|
|
|
<span class="tag is-success">
|
|
|
|
Bar
|
2016-09-22 22:14:18 +00:00
|
|
|
<button class="delete is-small"></button>
|
2016-09-11 11:00:49 +00:00
|
|
|
</span>
|
|
|
|
</p>
|
2017-03-14 21:00:58 +00:00
|
|
|
<p class="field">
|
2016-09-11 11:00:49 +00:00
|
|
|
<span class="tag is-warning is-medium">
|
|
|
|
Hello
|
2016-09-22 22:14:18 +00:00
|
|
|
<button class="delete is-small"></button>
|
2016-09-11 11:00:49 +00:00
|
|
|
</span>
|
|
|
|
</p>
|
2017-03-14 21:00:58 +00:00
|
|
|
<p class="field">
|
2016-09-11 11:00:49 +00:00
|
|
|
<span class="tag is-danger is-large">
|
|
|
|
World
|
|
|
|
<button class="delete"></button>
|
|
|
|
</span>
|
|
|
|
</p>
|
|
|
|
</div>
|
|
|
|
<div class="column is-6">
|
|
|
|
{% highlight html %}
|
2016-09-22 22:14:18 +00:00
|
|
|
<span class="tag is-success">
|
2016-09-11 11:00:49 +00:00
|
|
|
Bar
|
2016-09-22 22:14:18 +00:00
|
|
|
<button class="delete is-small"></button>
|
|
|
|
</span>
|
|
|
|
<span class="tag is-warning is-medium">
|
|
|
|
Hello
|
|
|
|
<button class="delete is-small"></button>
|
2016-09-11 11:00:49 +00:00
|
|
|
</span>
|
|
|
|
<span class="tag is-danger is-large">
|
2016-09-22 22:14:18 +00:00
|
|
|
World
|
2016-09-11 11:00:49 +00:00
|
|
|
<button class="delete"></button>
|
|
|
|
</span>
|
|
|
|
{% endhighlight %}
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
</section>
|