Element: <ins-tag>
Defines a tag element.
Code Snippet
<h1>
<ins-tag
label="DRAFT"
color="orange"
tooltip="This is a sample tooltip content. It also support html content.">
</ins-tag>
<ins-tag
label="DRAFT"
light=false
color="orange"
tooltip="This is a sample tooltip content. It also support html content.">
</ins-tag>
H1 Heading: 123456
</h1>
<h2>
<ins-tag
label="ICON"
icon="icon-star"
color="blue"
tooltip="This is a sample tooltip content. It also support html content.">
</ins-tag>
<ins-tag
label="ICON"
icon="icon-star"
light=false
color="blue"
tooltip="This is a sample tooltip content. It also support html content.">
</ins-tag>
H2 Heading: 123456
</h2>
<h3>
<ins-tag
label="New"
color="yellow
tooltip="This is a sample tooltip content. It also support html content."">
</ins-tag>
<ins-tag
label="New"
light=false
color="yellow"
tooltip="This is a sample tooltip content. It also support html content.">
</ins-tag>
H3 Heading: 123456
</h3>
<h4>
<ins-tag
label="Error"
color="red"
tooltip="This is a sample tooltip content. It also support html content.">
</ins-tag>
<ins-tag
label="Error"
light=false color="red"
tooltip="This is a sample tooltip content. It also support html content.">
</ins-tag>
H4 Heading: 123456
</h4>
<h5>
<ins-tag
label="Active"
color="green"
tooltip="This is a sample tooltip content. It also support html content.">
</ins-tag>
<ins-tag
label="Active"
light=false
color="green"
tooltip="This is a sample tooltip content. It also support html content.">
</ins-tag>
H5 Heading: 123456
</h5>
<p>
<ins-tag
label="Default"
color="grey"
light=true
tooltip="This is a sample tooltip content. It also support html content.">
</ins-tag>
<ins-tag
label="Default"
light=false
color="grey"
tooltip="This is a sample tooltip content. It also support html content.">
</ins-tag>
p paragraph: 123456
</p>
<p>
<ins-tag
label="Direct CSS Style"
font-color="#ffffff"
background-color="#d30190"
tooltip="This is a sample tooltip content. It also support html content.">
</ins-tag>
p paragraph: 123456
</p>
Using the property font-inherit, tag will inherit the parent font size & line height.
Code Snippet
<h1>
<ins-tag
label="DRAFT"
color="orange"
font-inherit>
</ins-tag>
H1 Heading: 123456
</h1>
<h2>
<ins-tag label="ICON"
icon="icon-star"
color="blue"
font-inherit>
</ins-tag>
H2 Heading: 123456
</h2>
<h3>
<ins-tag label="New"
color="yellow"
font-inherit>
</ins-tag>
H3 Heading: 123456
</h3>
<h4>
<ins-tag
label="Error"
color="red"
font-inherit>
</ins-tag>
H4 Heading: 123456
</h4>
<h5>
<ins-tag
Label="Active"
color="green"
Font-inherit>
</ins-tag>
H5 Heading: 123456
</h5>
<p>
<ins-tag
label="Default"
font-inherit>
</ins-tag>
p paragraph: 123456
</p>
| FIELD ATTRIBUTE | TYPE | DEFAULT | OPTIONS | DESCRIPTION |
|---|---|---|---|---|
| label | string | "" | any | Tag text value |
| color | string | "" | grey, blue, red, green, yellow, orange, etc. | Specify the CSS class used to assign tag color |
| icon | string | "" | any | CSS class used to display an icon before the text |
| light | boolean | true | true, false | Specify which Insites tag color style to use (light / solid) |
| font-inherit | boolean | false | true, false | Set tag font-size & line-height to inherit parent element |
| font-color | string / CSS hex code | "" | any | Directly set inline CSS 'font-color', this will overwrite the `color & light` property. |
| background-color | string / CSS hex code | "" | any | Directly set inline CSS 'background-color', this will overwrite the `color & light` property. |
Didn't quite find what you are looking for or have feedback on how we can make the content better then we would love to hear from you. Please provide us feedback and we will get back to you shortly.