Tags for Goldilocks CSS

Commentary

The tag element is adapted from Bulma. The difference is that Goldilocks-CSS uses the native HTML span tag and sets the role to "note". The "aria-label" can be used to add more context to the tag type. This allows screen readers to extract relevant semantic information.

The tag element provides add on information for a variety of use cases. Individual tags can be combined to create compound tags that are a name and value sequence. The tag elements can also be concatenated into a list with target click areas.

Usage

Classes:
`.tag`	Defines a single tag and its setup. The role is set to "note" and an "aria-label" can provide more context.
Colour options:	Any of the element colour modifiers from the Colour Palette helpers.
`.is-rounded`	Optional modifier rounds the tag.
Size options:	`.tag-normal`, `.tag-medium`, `.tag-large`
`.tags`	Creates horizontal grouped set of single tags using flexbox.
`.is-compound`	Combines a tag set into one compound display component.
`.is-delete`	For `.is-compound` compound tags, an `a` link can be set to display an "x" target.
`.are-medium`, `.are-large`	Styles font size for a group of tags.
`.tag-list`	Creates a horizontal display of compound tags created by `.is-compound`.

Dependencies:
File:	tag.css
Variables:	--bg-element, --grey-light, --grey-lighter, --line-height-150, --mar-horz, --radius, --size-5, --size-6, --size-7, --text, --weight-medium

Examples

Basic Tags

Default Primary Secondary Tertiary Link Success Warning Danger Dark Grey


                <span class="tag" role="note" aria-label="Example tag">Default</span>
                <span class="tag is-primary" role="note" aria-label="Example tag">Primary</span>
                <span class="tag is-secondary" role="note" aria-label="Example tag">Secondary</span>
                <span class="tag is-tertiary" role="note" aria-label="Example tag">Tertiary</span>
                <span class="tag is-link" role="note" aria-label="Example tag">Link</span>
                <span class="tag is-success" role="note" aria-label="Example tag">Success</span>
                <span class="tag is-warning" role="note" aria-label="Example tag">Warning</span>
                <span class="tag is-danger" role="note" aria-label="Example tag">Danger</span>
                <span class="tag is-dark" role="note" aria-label="Example tag">Dark</span>
                <span class="tag is-grey" role="note" aria-label="Example tag">Grey</span>

Tags with Close Button

Success + Delete Warning + Delete Danger + Delete


               <span class="tag is-success" role="note" aria-label="Compound tag simple">
                    Success + Delete
                    <button type="button" class="delete" aria-label="delete"></button>
               </span>

                <span class="tag tag-medium is-warning" role="note" aria-label="Compound tag simple">
                    Warning + Delete
                    <button type="button" class="delete" aria-label="delete"></button>
                </span>

                <span class="tag tag-large is-danger is-rounded" role="note" aria-label="Compound tag simple">
                    Danger + Delete
                    <button type="button" class="delete" aria-label="delete"></button>
                </span>

Compound Tags

Package Category

User Name

npm 0.9.2

build passing

chat on gitter

10 files

Complex Compound Tag :-)


                <div class="tags is-compound" role="note" aria-label="Compound tag">
                    <span class="tag">Package</span>
                    <span class="tag is-primary">Category</span>
                </div>

                <div class="tags is-compound" role="note" aria-label="Compound tag">
                    <span class="tag is-tertiary">User Name</span>
                    <a href="#page-top" class="tag is-delete" aria-label="delete"></a>
                </div>

                <div class="tags is-compound" role="note" aria-label="Compound tag">
                    <span class="tag is-dark">npm</span>
                    <span class="tag is-danger">0.9.2</span>
                </div>

                <div class="tags is-compound" role="note" aria-label="Compound tag">
                    <span class="tag is-dark">build</span>
                    <span class="tag is-success">passing</span>
                </div>

                <div class="tags is-compound is-rounded" role="note" aria-label="Compound tag">
                    <span class="tag is-dark">chat</span>
                    <span class="tag is-primary">on gitter</span>
                </div>

                <div class="tags is-compound are-large" role="note" aria-label="Compound tag">
                    <span class="tag is-dark">
                        <span class="icon-bg-file"></span>
                    </span>
                    <span class="tag is-primary">10 files</span>
                </div>

                <div class="tags is-compound is-rounded" role="note" aria-label="Complex compound tag">
                    <a href="#page-top" class="tag is-delete" aria-label="delete"></a>
                    <span class="tag is-secondary">Complex</span>
                    <span class="tag is-primary">Compound</span>
                    <span class="tag is-tertiary">Tag</span>
                    <span class="tag is-warning"><span class="is-text-bold">:-)</span></span>
                </div>

Tag Lists

All Medium Size

All Large Size


               <div class="tags are-medium" role="note" aria-label="Tag list">
                    <span class="tag">All</span>
                    <span class="tag">Medium</span>
                    <span class="tag">Size</span>
                </div>

                <div class="tags are-large" role="note" aria-label="Tag list">
                    <span class="tag is-success">All</span>
                    <span class="tag is-warning">Large</span>
                    <span class="tag is-danger">Size</span>
                </div>


               <ul class="tag-list" aria-label="Tag list">
                    <li class="tags is-compound">
                        <span class="tag is-tertiary">Apples</span>
                        <a href="#page-top" class="tag is-delete" aria-label="delete"></a>
                    </li>

                    <li class="tags is-compound">
                        <span class="tag is-tertiary">Oranges</span>
                        <a href="#page-top" class="tag is-delete" aria-label="delete"></a>
                    </li>

                    <li class="tags is-compound">
                        <span class="tag is-tertiary">Pears</span>
                        <a href="#page-top" class="tag is-delete" aria-label="delete"></a>
                    </li>
               </ul>