Around UI Kit
Live demo Documentation
Buy Now
Menu
  • Live demo
  • Documentation

Content

Typography Images & figures Tables

Components

Accordion Alerts Badges Blog components Breadcrumb Buttons Button group Cards: Basic Cards: Hover effects Carousel (Slider) Charts Collapse Countdown Date / time picker Dropdowns Forms Gallery (Lightbox) Hotspots Image comparison slider Input group List group Maps Modal Navbar Offcanvas Pagination Parallax Pills Placeholders Popovers Portfolio components Pricing Progress Shop Components Social Buttons Spinners Steps Tabs Team Testimonials / reviews Toasts Tooltips Video popup Utilities
Buy now

Badges

Small count and labeling component.

Solid

Primary Secondary Success Danger Warning Info
Light
Dark

Outline

Primary Secondary Success Danger Warning Info
Light
Dark

Translucent

Primary Success Danger Warning Info
Light
Dark

Inside heading

Example heading New

Example heading New

Example heading New

Example heading New

Example heading New
Example heading New

Inside button

Inside list group

Messages 14 Orders 2 Favorites 6

Customize theme

Colors
Primary
Warning
Info
Success
Danger
Typography (1rem = 16px)
Borders / Rounding

Your custom styles

Grab the generated styles below. Wrap them inside <style> tag and put in the <head> section of your HTML document.

IMPORTANT: In order for these styles to take effect you have to placed them below:
<link rel="stylesheet" media="screen" href="assets/css/theme.min.css">