ref https metroui org ua tiles html DOCTYPE html html lang en head style body min height 600px style Required meta tags meta charset utf 8 meta name viewport content width device width initial scale 1 0 maximum scale 1 0 user scalable no Metro 4 link rel stylesheet href https cdn metroui org ua v4 css metro all min css head body h1 Hello world h1 script var customButtons html span class mif rocket span cls sys button onclick alert You press rocket button html span class mif user span cls alert onclick alert You press user button html span class mif cog span cls warning onclick alert You press cog button script div class p 2 data role window data draggable true data title Window data btn close true data btn min true data btn max true data custom buttons customButtons data top 100 data width 300 data height 160 Click to buttons to view default buttons events div div class p 2 data role window data draggable true data title Window data btn close true data btn min true data btn max true data custom buttons customButtons data left 300 data width 300 data height 160 Click to buttons to view default buttons events div video data role video player data src https metroui org ua res oceans mp4 data poster https metroui org ua res poster oceans jpg video jQuery first then Metro UI JS script src code jquery com jquery 3 3 1 min js script script src cdn metroui org ua v4 js metro min js script script function Metro toast create Toast message null null info Metro cookieDisclaimer init duration 1day script button class button m 1 span class mif cart span span class ml 1 My Cart span span class badge bg red fg white 4 span button button class button m 1 span class mif cart span span class ml 1 My Cart span span class badge bg green fg white 4 span button button class button m 1 span class mif cart span span class ml 1 My Cart span span class badge bg blue fg white 4 span button body html ref https metroui org ua tiles html DOCTYPE html html lang en head style body min height 600px style Required meta tags meta charset utf 8 meta name viewport content width device width initial scale 1 0 maximum scale 1 0 user scalable no Metro 4 link rel stylesheet href https cdn metroui org ua v4 css metro all min css head body h1 Hello world h1 script var customButtons html span class mif rocket span cls sys button onclick alert You press rocket button html span class mif user span cls alert onclick alert You press user button html span class mif cog span cls warning onclick alert You press cog button script div class p 2 data role window data draggable true data title Window data btn close true data btn min true data btn max true data custom buttons customButtons data top 100 data left 100 data width 300 data height 160 Click to buttons to view default buttons events div div class p 2 data role window data draggable true data title Window data btn close true data btn min true data btn max true data custom buttons customButtons data left 300 data width 300 data height 160 Click to buttons to view default buttons events div jQuery first then Metro UI JS script src code jquery com jquery 3 3 1 min js script script src cdn metroui org ua v4 js metro min js script div id top charms data role charms data position top div top div div div data role charms data position bottom div bottom div div div data role charms data position left div left div div div data role charms data position right div right div div button class button onclick top charms data charms toggle Top button body html ref https metroui org ua tiles html DOCTYPE html html lang en head style body min height 600px card max width 300px display inline block important style Required meta tags meta charset utf 8 meta name viewport content width device width initial scale 1 0 maximum scale 1 0 user scalable no Metro 4 link rel stylesheet href https cdn metroui org ua v4 css metro all min css head body div class card icon box border bd default div class icon bg cyan fg white span class mif cog span div div class content p 4 div class text upper cpu traffic div div class text upper text bold text lead 90 div div div div class card icon box border bd default div class icon bg cyan fg white span class mif cog span div div class content p 4 div class text upper cpu traffic div div class text upper text bold text lead 90 div div div div class card icon box border bd default div class icon bg cyan fg white span class mif cog span div div class content p 4 div class text upper cpu traffic div div class text upper text bold text lead 90 div div div div class card icon box bg orange fg white div class icon span class mif calendar span div div class content div class p 2 div EVENTS div div class text bold text leader 41 400 div div div data role progress data value 75 data small true data cls bar bg white data cls back bg darkOrange div div class pl 2 pr 2 span class text small 70 Increase in 30 Days span div div div div class card image header div class card header fg white style background image url https picsum photos 200 300 Journey To Mountains div div class card content p 2 p class fg gray Posted on January 21 2015 p Quisque eget vestibulum nulla Quisque quis dui quis ex ultricies efficitur vitae non felis Phasellus quis nibh hendrerit div div class card footer button class button secondary Read More button div div div class card more info box bg green fg white div class content h2 class text bold mb 0 53 h2 div Bounce Rate div div div class icon span class mif chart bars span div a href class more More info span class mif arrow right span a div div class card image header div class card header fg white style background image url https picsum photos 200 300 sig 2 Journey To Mountains div div class card content p 2 p class fg gray Posted on January 21 2015 p Quisque eget vestibulum nulla Quisque quis dui quis ex ultricies efficitur vitae non felis Phasellus quis nibh hendrerit div div class card footer button class button secondary Read More button div div div class card image header div class card header fg white style background image url https picsum photos 200 300 sig 22 Journey To Mountains div div class card content p 2 p class fg gray Posted on January 21 2015 p Quisque eget vestibulum nulla Quisque quis dui quis ex ultricies efficitur vitae non felis Phasellus quis nibh hendrerit div div class card footer button class button secondary Read More button div div jQuery first then Metro UI JS script src code jquery com jquery 3 3 1 min js script script src cdn metroui org ua v4 js metro min js script body html
id top charms data role charms data position top div top div div div data role charms data position bottom div bottom div div div data role charms data position left div left div div div data role charms data position right div right div div button class button onclick top charms data charms toggle Top button body html ref https metroui org ua tiles html DOCTYPE html html lang en head style body min height 600px card max width 300px display inline block important style Required meta tags meta charset utf 8 meta name viewport content width device width initial scale 1 0 maximum scale 1 0 user scalable no Metro 4 link rel stylesheet href https cdn metroui org ua v4 css metro all min css head body div class card icon box border bd default div class icon bg cyan fg white span class mif cog span div div class content p 4 div class text upper cpu traffic div div class text upper text bold text lead 90 div div div div class card icon box border bd default div class icon bg cyan fg white span class mif cog span div div class content p 4 div class text upper cpu traffic div div class text upper text bold text lead 90 div div div div class card icon box border bd default div class icon bg cyan fg white span class mif cog span div div class content p 4 div class text upper cpu traffic div div class text upper text bold text lead 90 div div div div class card icon box bg orange fg white div class icon span class mif calendar span div div class content div class p 2 div EVENTS div div class text bold text leader 41 400 div div div data role progress data value 75 data small true data cls bar bg white data cls back bg darkOrange div div class pl 2 pr 2 span class text small 70 Increase in 30 Days span div div div div class card image header div class card header fg white style background image url https picsum photos 200 300 Journey To Mountains div div class card content p 2 p class fg gray Posted on January 21 2015 p Quisque eget vestibulum nulla Quisque quis dui quis ex ultricies efficitur vitae non felis Phasellus quis nibh hendrerit div div class card footer button class button secondary Read More button div div div class card more info box bg green fg white div class content h2 class text bold mb 0 53 h2 div Bounce Rate div div div class icon span class mif chart bars span div a href class more More info span class mif arrow right span a div div class card image header div class card header fg white style background image url https picsum photos 200 300 sig 2 Journey To Mountains div div class card content p 2 p class fg gray Posted on January 21 2015 p Quisque eget vestibulum nulla Quisque quis dui quis ex ultricies efficitur vitae non felis Phasellus quis nibh hendrerit div div class card footer button class button secondary Read More button div div div class card image header div class card header fg white style background image url https picsum photos 200 300 sig 22 Journey To Mountains div div class card content p 2 p class fg gray Posted on January 21 2015 p Quisque eget vestibulum nulla Quisque quis dui quis ex ultricies efficitur vitae non felis Phasellus quis nibh hendrerit div div class card footer button class button secondary Read More button div div jQuery first then Metro UI JS script src code jquery com jquery 3 3 1 min js script script src cdn metroui org ua v4 js metro min js script body html