Live demo Documentation

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

Hotspots

Create an image with interactive hotspots that show hidden description on hover / click / focus.

Around component

Style 1

Customize theme

Colors

Primary

Warning

Info

Success

Danger

Typography (1rem = 16px)

Google font URL

Font family

Root font size, rem

Body font size, rem

Borders / Rounding

Border width, px

Rounded base, rem

Rounded SM = Rounded base multiplied by

Rounded LG = Rounded base multiplied by

Rounded XL = Rounded base multiplied by

Rounded 2XL = Rounded base multiplied by

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">