Badges

Taxonomy term tags are currently configured to display as badges, on the datacard display modes. Tag fields elsewhere could be configured the same using the markup in the twig file.

{% if content.field_tags %}
{% for key, item in content.field_tags %}
    {% if item['#title'] %}
     {% include '@pdh_design/atoms/badge/badge.twig' with {
        "tag": item['#title'],
        "modifier": 'text-success-emphasis border-success-subtle bg-success-subtle'
     } only %}
    {% endif %}
{% endfor %}
{% endif %}

Badges can also be rendered using HTML as shown below

Simple badges

<span class="text-bg-primary p-2 badge bg-primary" style="margin:8px;">primary</span>

primarysecondarysuccessdangerwarninginfodarklight

Subtle badges

<span class="text-primary-emphasis border-primary-subtle bg-primary-subtle p-2 badge">primary</span>

primarysecondarysuccessdangerwarninginfodarklight

Badges on other elements (such as buttons or cards)

A parent wrapper with relative positioning is added
<div class="position-relative">
The badge itself is absolutely positioned
<div class="position-absolute top-0 end-0 badge rounded-pill text-bg-primary bg-primary">99</div>
And a wrapper with a margin is added to the item the badge is attached to
<div style="margin:10px;">
<button class="btn btn-outline-primary" type="button">primary</button>
</div>
</div>