Scroll to Top

Chips

Chips are used to represent different type of html informations. These chips come with the close button and you can change the chip to uncloseable by excluding the close class. or you can also use other than close class to close the chip, see the options for more information.

SITEMAP Documentation / Js Plugins / Chips

Demo

CSS3 ×

Code copy

    <div class="chip blue8 text-grey1">
        CSS3
        <a class="close text-hover-white">×</a>
    </div>
    
    <script>
        $(".chip").chips(); 
    </script>

customization options.

Demo

variable default data-type options function
round 25px string pixels border radius
closebtn .close string class, id, element name of the class through which chip can be closeable.
padX 10px string pixels paddings from left and right
padY 5px string pixels padding from top and bottom
marGin 10px string margin in px
ImgHeight 50 numeric number for pixel height of the image in chip.
Imgs false bool true, false if chip have image turn this true

Code copy

<script>
    $(".chip").chips({imgs: true});
</script>

Feedback