Logo
Logo
Stockholm-icons / Layout / Layout-4-blocks Created with Sketch.
Stockholm-icons / Communication / Group-chat Created with Sketch.
Sean UX Designer
S

Base Examples

Default label examples.

1 2 5 9 10

                        <span class="label pulse mr-10">
                            <span class="position-relative">1</span>
                            <span class="pulse-ring"></span>
                        </span>
                        <span class="label pulse mr-10">
                            <span class="position-relative">2</span>
                            <span class="pulse-ring"></span>
                        </span>
                        <span class="label pulse mr-10">
                            <span class="position-relative">5</span>
                            <span class="pulse-ring"></span>
                        </span>
                        <span class="label pulse mr-10">
                            <span class="position-relative">9</span>
                            <span class="pulse-ring"></span>
                        </span>
                        <span class="label pulse">
                            <span class="position-relative">10</span>
                            <span class="pulse-ring"></span>
                        </span>
                        

Use .pulse-{success|primary|danger|warning|info|dark|white|success} class to have color pulse options.

1 2 5 9 10

                        <span class="label pulse pulse-success mr-10">
                            <span class="position-relative">1</span>
                            <span class="pulse-ring"></span>
                        </span>
                        <span class="label pulse pulse-danger mr-10">
                            <span class="position-relative">2</span>
                            <span class="pulse-ring"></span>
                        </span>
                        <span class="label pulse pulse-warning mr-10">
                            <span class="position-relative">5</span>
                            <span class="pulse-ring"></span>
                        </span>
                        <span class="label pulse pulse-primary mr-10">
                            <span class="position-relative">9</span>
                            <span class="pulse-ring"></span>
                        </span>
                        <span class="label pulse pulse-info">
                            <span class="position-relative">10</span>
                            <span class="pulse-ring"></span>
                        </span>
                        

Advance Examples

Using with buttons and icons:


                        <a href="#" class="btn btn-icon btn-light-primary pulse pulse-primary mr-5">
                            <i class="flaticon2-bell-5"></i>
                            <span class="pulse-ring"></span>
                        </a>

                        <a href="#" class="btn btn-icon btn-light-success pulse pulse-success mr-5">
                            <i class="flaticon2-protected"></i>
                            <span class="pulse-ring"></span>
                        </a>

                        <a href="#" class="btn btn-icon btn-light-danger pulse pulse-danger mr-5">
                            <i class="flaticon2-information"></i>
                            <span class="pulse-ring"></span>
                        </a>

                        <a href="#" class="btn btn-icon btn-light-warning pulse pulse-warning mr-5">
                            <i class="flaticon2-gear"></i>
                            <span class="pulse-ring"></span>
                        </a>
                        

User Profile 12 messages

Recent Notifications
Stockholm-icons / Home / Library Created with Sketch.
Another purpose persuade Due in 2 Days
+28%
Stockholm-icons / Communication / Write Created with Sketch.
Would be to people Due in 2 Days
+50%
Stockholm-icons / Communication / Group-chat Created with Sketch. -27%
Stockholm-icons / General / Attachment2 Created with Sketch.
The best product Due in 2 Days
+8%
System Messages
Top Authors Most Successful Fellas
+82$
Popular Authors Most Successful Fellas
+280$
New Users Most Successful Fellas
+4500$
Active Customers Most Successful Fellas
+4500$
Bestseller Theme Most Successful Fellas
+4500$
Notifications
Stockholm-icons / Home / Library Created with Sketch.
Another purpose persuade Due in 2 Days
+28%
Stockholm-icons / Communication / Write Created with Sketch.
Would be to people Due in 2 Days
+50%
Stockholm-icons / Communication / Group-chat Created with Sketch. -27%
Stockholm-icons / General / Attachment2 Created with Sketch.
The best product Due in 2 Days
+8%
Customer Care
Reports
Memebers
Stockholm-icons / Navigation / Up-2 Created with Sketch.

Select A Demo