Tags

Tags are used to display relevant categories or set filters.

Tags can be either text, link or button.

Tags should not be confused with Badges.

Use text and link tags to display a category, e.g. a news items category. Use text (span) when you only want to display the category. Use link (a) when you want to show the category and provide a link to the category listing.

Text tags (span) can also be used to display a set filter, search term or other setting – when you only want to display them.

Use button tags to to display a set filter, search term or other setting when you want to use it as a means of removing the setting.

Tag

ready 
<div class="ds-block">

    <p>

        <!-- text tag -->
        <span class="ds-tag">All courses</span> 

        <!-- link tag -->
        <a href="#" class="ds-tag">All courses</a> 

        <!-- button tag -->
        <button class="ds-tag" title="remove filter">Psychology</button>

    </p>

</div>

Modifiers

Tag with ds-tag--green modifier

ready

For a higher contrast.

<div class="ds-block">

    <p>

        <!-- text tag -->
        <span class="ds-tag  ds-tag--green">Health</span> 

        <!-- link tag -->
        <a href="#" class="ds-tag  ds-tag--green">Health</a> 

        <!-- button tag -->
        <button class="ds-tag  ds-tag--green" title="remove filter">Health</button>

    </p>

</div>