Tags

Contextual highlight content with tags which can be a label, tag or a indicator.

Example Updated

Example Updated

Example Updated

Example Updated

Markup

Toggle full screen Open in new window Toggle example guides Toggle HTML markup 

<h1 pam-typography="display">Example <span pam-Tag>Updated</span></h1>
<h2 pam-typography="headline">Example <span pam-Tag>Updated</span></h2>
<h3 pam-typography="subheading">Example <span pam-Tag>Updated</span></h3>
<p pam-typography="body">Example <span pam-Tag>Updated</span></p>

Rounded

Creates a rounded tag.

1 2 3 22 333
Markup

Toggle full screen Open in new window Toggle example guides Toggle HTML markup 

<span pam-Tag="rounded">1</span>
<span pam-Tag="rounded">2</span>
<span pam-Tag="rounded">3</span>
<span pam-Tag="rounded">22</span>
<span pam-Tag="rounded">333</span>

Variations

Change the tags contextual apperance by using the available variations.

Default Primary Success Info warn danger
Markup

Toggle full screen Open in new window Toggle example guides Toggle HTML markup 

<span pam-Tag>Default</span>
<span pam-Tag="primary">Primary</span>
<span pam-Tag="success">Success</span>
<span pam-Tag="info">Info</span>
<span pam-Tag="warn">warn</span>
<span pam-Tag="danger">danger</span>

Hooks

.hook-tag .hook-tag-rounded