You can now create a list of tags with the .tags
container.
--- title: Tags layout: documentation doc-tab: elements doc-subtab: tag variables: - name: $tag-background-color value: $background - name: $tag-color value: $text - name: $tag-radius value: $radius - name: $tag-delete-margin value: 1px --- {% capture tag %} Tag label {% endcapture %} {% capture tags_colors %} Black Dark Light White Primary Info Success Warning Danger {% endcapture %} {% capture sizes %} Medium Large {% endcapture %} {% capture rounded %} Rounded {% endcapture %} {% capture delete %} Bar Hello World {% endcapture %} {% capture is_delete %} {% endcapture %} {% capture tags %}
{% endcapture %} {% capture tags_multiple %} {% endcapture %} {% capture tags_addons %} {% endcapture %} {% capture tags_field_addons %}Black
Dark
Light
White
Primary
Info
Success
Warning
DangerMedium
Large
is-rounded
modifier to make a rounded tag.
is-delete
modifier to turn the tag into a delete button.
Bar
Hello
World
You can now create a list of tags with the .tags
container.
If the list is very long, it will automatically wrap on multiple lines, while keeping all tags evenly spaced.
You can attach tags together with the .has-addons
modifier.
You can attach a text tag with a delete tag together.
If you want to attach .tags
containers together, simply use the .field
element with the .is-grouped
and .is-grouped-multiline
modifiers.
This can be useful for a long list of blog tags.