Tags | Dsure Front-end Development Framework

Use any of the available classes of Base Stylesheets to quickly create a custom style.

(1) Space

 
HTML Code:

<div class="dsure-tags dsure-bg-silver dsure-tags-box">
   <a href="#">Text</a>
   <a href="#">Tag</a>
   <a href="#">Demo Text</a>
   <a href="#">Text</a>
   <a href="#">Text</a>
   <a href="#">Tag</a>
   <a href="#">Demo Text</a>
   <a href="#">Text</a>
   <a href="#">Text</a>
   <a href="#">Tag</a>
   <a href="#">Demo Text</a>
   <a href="#">Text</a>
   <a href="#">Text</a>
   <a href="#">Tag</a>
   <a href="#">Demo Text</a>
   <a href="#">Text</a> 
   <a href="#">Text</a>
   <a href="#">Text</a>
   <a href="#">Tag</a>
   <a href="#">Demo Text</a>
   <a href="#">Text</a>
   <a href="#">Text</a>
   <a href="#">Tag</a>      
</div>

(2) Custom Color

Utilize the.dsure-bg-???and .f-c-??? class.

Text Tag Demo Text Text Text Tag Demo Text Text

 
HTML Code:

<div class="dsure-tags dsure-bg-blue f-c-white dsure-tags-box">
   <a href="#">Text</a>
   <a href="#">Tag</a>
   <a href="#">Demo Text</a>
   <a href="#">Text</a>
   <a href="#">Text</a>
   <a href="#">Tag</a>
   <a href="#">Demo Text</a>
   <a href="#">Text</a>
</div>

(3) No space的Tag

 
HTML Code:

<div class="dsure-tags dsure-bg-silver dsure-tags-box dsure-tags-nospace">
   <a href="#">Text</a>
   <a href="#">Tag</a>
   <a href="#">Demo Text</a>
   <a href="#">Text</a>
   <a href="#">Text</a>
   <a href="#">Tag</a>
   <a href="#">Demo Text</a>
   <a href="#">Text</a>
   <a href="#">Text</a>
   <a href="#">Tag</a>
   <a href="#">Demo Text</a>
   <a href="#">Text</a>
   <a href="#">Text</a>
   <a href="#">Tag</a>
   <a href="#">Demo Text</a>
   <a href="#">Text</a> 
   <a href="#">Text</a>
   <a href="#">Text</a>
   <a href="#">Tag</a>
   <a href="#">Demo Text</a>
   <a href="#">Text</a>
   <a href="#">Text</a>
   <a href="#">Tag</a>      
</div>

(4) FilletTag

Utilize the.dsure-radius-??? class. (Only supports up to IE 9.)

 
HTML Code:

<div class="dsure-tags dsure-bg-silver dsure-tags-box dsure-radius-medium2x">
   <a href="#">Text</a>
   <a href="#">Tag</a>
   <a href="#">Demo Text</a>
   <a href="#">Text</a>
   <a href="#">Text</a>
   <a href="#">Tag</a>
   <a href="#">Demo Text</a>
   <a href="#">Text</a>
   <a href="#">Text</a>
   <a href="#">Tag</a>
   <a href="#">Demo Text</a>
   <a href="#">Text</a>
   <a href="#">Text</a>
   <a href="#">Tag</a>
   <a href="#">Demo Text</a>
   <a href="#">Text</a> 
   <a href="#">Text</a>
   <a href="#">Text</a>
   <a href="#">Tag</a>
   <a href="#">Demo Text</a>
   <a href="#">Text</a>
   <a href="#">Text</a>
   <a href="#">Tag</a>      
</div>