bulma/docs/documentation/elements/tag.html
2016-09-22 23:14:18 +01:00

165 lines
3.9 KiB
HTML

---
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">
By default, a <strong>tag</strong> is a 24px high label.
</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">
There are <strong>6 different colors</strong> available.
</div>
<div class="column is-2">
<p class="control">
<span class="tag is-dark">
Dark
</span>
</p>
<p class="control">
<span class="tag is-primary">
Primary
</span>
</p>
<p class="control">
<span class="tag is-info">
Info
</span>
</p>
<p class="control">
<span class="tag is-success">
Success
</span>
</p>
<p class="control">
<span class="tag is-warning">
Warning
</span>
</p>
<span class="tag is-danger">
Danger
</span>
</div>
<div class="column is-6">
{% highlight html %}
<span class="tag is-dark">Dark</span>
<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">
And <strong>3 additional</strong> sizes.
</div>
<div class="column is-2">
<p class="control">
<span class="tag is-dark is-small">
Small
</span>
</p>
<p class="control">
<span class="tag is-primary is-medium">
Medium
</span>
</p>
<p class="control">
<span class="tag is-info is-large">
Large
</span>
</p>
</div>
<div class="column is-6">
{% highlight html %}
<span class="tag is-dark is-small">Small</span>
<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">
<p class="control">
<span class="tag is-info is-small">
Foo
<button class="delete is-small"></button>
</span>
</p>
<p class="control">
<span class="tag is-success">
Bar
<button class="delete is-small"></button>
</span>
</p>
<p class="control">
<span class="tag is-warning is-medium">
Hello
<button class="delete is-small"></button>
</span>
</p>
<p class="control">
<span class="tag is-danger is-large">
World
<button class="delete"></button>
</span>
</p>
</div>
<div class="column is-6">
{% highlight html %}
<span class="tag is-info is-small">
Foo
<button class="delete is-small"></button>
</span>
<span class="tag is-success">
Bar
<button class="delete is-small"></button>
</span>
<span class="tag is-warning is-medium">
Hello
<button class="delete is-small"></button>
</span>
<span class="tag is-danger is-large">
World
<button class="delete"></button>
</span>
{% endhighlight %}
</div>
</div>
</div>
</section>