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 error
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="error">error</span>

Hooks

.hook-tag .hook-tag-rounded

Variables

These are all the component specific variables that can be used for customization.

Name Value
@tag-background @skin-gray-600
@tag-border-radius @border-radius
@tag-color contrast(@tag-background)
@tag-font-size 65%
@tag-font-weight @font-weight-medium
@tag-line-height @line-height-normal
@tag-padding-horizontal 6px
@tag-padding-vertical 3px
@tag-text-transform uppercase
@tag-rounded-border-radius 500px
@tag-rounded-font-size 65%
@tag-rounded-line-height @line-height-normal
@tag-rounded-min-width @space-16
@tag-primary-background @skin-primary
@tag-success-background @skin-success
@tag-info-background @skin-info
@tag-error-background @skin-error
@tag-warn-background @skin-warn