Insites Docs Web Components V2Data DisplayTag

Tag

Last updated on March 25, 2025.

Element: <ins-tag>

Defines a tag element.

Complete Example

H1 Heading: 123456

H2 Heading: 123456

H3 Heading: 123456

H4 Heading: 123456

H5 Heading: 123456

p paragraph: 123456

p paragraph: 123456

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>
Outlined Example

H1 Heading: 123456

H2 Heading: 123456

H3 Heading: 123456

H4 Heading: 123456

H5 Heading: 123456

p paragraph: 123456

Code Snippet

<h1> 

  <ins-tag 
    label="DRAFT" 
    color="orange"
    tooltip="This is a sample tooltip content. It also support html content."
    outlined
    outline-color="#FFF">
  </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."
    outlined
    outline-color="blue">
  </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."
    outlined
    outline-color="yellow">
  </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."
    outlined
    outline-color="red">
  </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."
    outlined
    outline-color="green">
  </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."
    outlined
    outline-color="grey">
  </ins-tag>

  p paragraph: 123456

</p>
Inherited Font Style

Using the property font-inherit, tag will inherit the parent font size & line height.

H1 Heading: 123456

H2 Heading: 123456

H3 Heading: 123456

H4 Heading: 123456

H5 Heading: 123456

p paragraph: 123456

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>

 

Attributes

 

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.
outlined boolean false true, false Enables outline styling
outline-color string "" grey, blue, red, green, yellow, orange, etc. Specify the CSS class used to assign outline color

 

Have a suggestion for this page?

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.