11{{ #extend " layout" title =" Light Blue HTML5 Dashboard - UI Badge" }}
2- {{ #content " sidebar" }}
3- {{> sidebar active =" ui_badge" }}
4- {{ /content }}
5- {{ #content " content" mode =" replace" }}
6- <ol class =" breadcrumb"
7- <li class =" breadcrumb-item" li >
8- <li class =" breadcrumb-item active" li >
9- </ol >
10- <h1 class =" page-title" h1 >
11- <div class =" row"
12- <div class =" col-12"
13- <section class =" widget"
14- <header >
15- <h5 >
16- Badge <span class =" fw-semi-bold" span >
17- </h5 >
18- <div class =" widget-controls"
19- <a data-widgster =" expand" title =" Expand" href =" #" i class =" la la-angle-up" i ></a >
20- <a data-widgster =" collapse" title =" Collapse" href =" #" i class =" la la-angle-down" i ></a >
21- <a href =" #" data-widgster =" close" i class =" la la-remove" i ></a >
22- </div >
23- </header >
24- <div class =" widget-body"
25- <p >Badges scale to match the size of the immediate parent element by using relative font sizing and em units.</p >
26- <h1 >Example heading <span class =" badge badge-primary ml-1" span ></h1 >
27- <h2 >Example heading <span class =" badge badge-info ml-1" span ></h2 >
28- <h3 >Example heading <span class =" badge badge-warning ml-1" span ></h3 >
29- <h4 >Example heading <span class =" badge badge-success ml-1" span ></h4 >
30- <h5 >Example heading <span class =" badge badge-danger ml-1" span ></h5 >
31- <h6 >Example heading <span class =" badge badge-light ml-1" span ></h6 >
32- <p class =" mt-lg" p >
33- <button type =" button" class =" btn btn-primary"
34- Notifications <span class =" badge badge-danger" span >
35- </button >
36- </div >
37- </section >
2+ {{ #content " sidebar" }}
3+ {{> sidebar active =" ui_badge" }}
4+ {{ /content }}
5+ {{ #content " content" mode =" replace" }}
6+ <ol class =" breadcrumb"
7+ <li class =" breadcrumb-item" li >
8+ <li class =" breadcrumb-item active" li >
9+ </ol >
10+ <h1 class =" page-title" h1 >
11+ <div class =" row"
12+ <div class =" col-12"
13+ <section class =" widget"
14+ <header >
15+ <h5 >
16+ Badge <span class =" fw-semi-bold" span >
17+ </h5 >
18+ <div class =" widget-controls"
19+ <a data-widgster =" expand" title =" Expand" href =" #" i class =" la la-angle-up" i ></a >
20+ <a data-widgster =" collapse" title =" Collapse" href =" #" i class =" la la-angle-down" i ></a >
21+ <a href =" #" data-widgster =" close" i class =" la la-remove" i ></a >
22+ </div >
23+ </header >
24+ <div class =" widget-body"
25+ <p >Badges scale to match the size of the immediate parent element by using relative font sizing and em
26+ units.</p >
27+ <h1 >Example heading <span class =" badge badge-primary ml-1" span ></h1 >
28+ <h2 >Example heading <span class =" badge badge-info ml-1" span ></h2 >
29+ <h3 >Example heading <span class =" badge badge-warning ml-1" span ></h3 >
30+ <h4 >Example heading <span class =" badge badge-success ml-1" span ></h4 >
31+ <h5 >Example heading <span class =" badge badge-danger ml-1" span ></h5 >
32+ <h6 >Example heading <span class =" badge badge-light ml-1" span ></h6 >
33+ <p class =" mt-lg" p >
34+ <button type =" button" class =" btn btn-primary"
35+ Notifications <span class =" badge badge-danger" span >
36+ </button >
3837 </div >
39- < div class = " col-12 "
40- < section class = " widget "
41- < header >
42- < h5 >
43- Pill < span class = " fw-semi-bold " >Badges</ span >
44- </ h5 >
45- < div class =" widget-controls "
46- < a data-widgster = " expand " title = " Expand " href = " # " >< i class = " la la-angle-up " ></ i ></ a >
47- < a data-widgster = " collapse " title = " Collapse " href = " # " >< i class =" la la-angle-down " ></ i ></ a >
48- <a href = " # " data-widgster = " close " i class =" la la-remove " i ></a >
49- </ div >
50- </ header >
51- < div class = " widget-body "
52- < p >Use the < code >.badge-pill</ code > modifier class to make badges more rounded (with a larger
53- border-radius and additional horizontal padding).</ p >
54- < span class = " badge badge -pill badge-primary mr-4 mb-3 " >Primary</ span >
55- < span class = " badge badge-pill badge-success mr-4 mb-3 " >Success</ span >
56- <span class =" badge badge-pill badge-danger mr-4 mb-3" Danger </span >
57- <span class =" badge badge-pill badge-warning mr-4 mb-3" Warning </span >
58- <span class =" badge badge-pill badge-info mr-4 mb-3" Info </span >
59- <span class =" badge badge-pill badge-light mr-4 mb-3" Light </span >
60- <span class =" badge badge-pill badge-dark mr-4 mb-3" Dark </span >
61- </ div >
62- </ section >
38+ </ section >
39+ </ div >
40+ < div class = " col-12 "
41+ < section class = " widget "
42+ < header >
43+ < h5 >
44+ Pill < span class =" fw-semi-bold " >Badges</ span >
45+ </ h5 >
46+ < div class =" widget-controls "
47+ <a data-widgster = " expand " title = " Expand " href = " # " i class =" la la-angle-up " i ></a >
48+ < a data-widgster = " collapse " title = " Collapse " href = " # " >< i class = " la la-angle-down " ></ i ></ a >
49+ <a href = " # " data-widgster = " close " >< i class = " la la-remove " ></ i ></ a >
50+ </ div >
51+ </ header >
52+ < div class = " widget-body "
53+ < p >Use the < code >. badge-pill</ code > modifier class to make badges more rounded (with a larger
54+ border-radius and additional horizontal padding).</ p >
55+ <span class =" badge badge-pill badge-primary mr-3 mb-3" Primary </span >
56+ <span class =" badge badge-pill badge-success mr-3 mb-3" Success </span >
57+ <span class =" badge badge-pill badge-danger mr-3 mb-3" Danger </span >
58+ <span class =" badge badge-pill badge-warning mr-3 mb-3" Warning </span >
59+ <span class =" badge badge-pill badge-info mr-3 mb-3" Info </span >
60+ < span class = " badge badge-pill badge-light mr-3 mb-3 " >Light</ span >
61+ <span class = " badge badge-pill badge-dark mr-3 mb-3 " >Dark</ span >
6362 </div >
64- < div class = " col-12 "
65- < section class = " widget "
66- < header >
67- < h5 >
68- Links
69- </ h5 >
70- < div class = " widget-controls " >
71- < a data-widgster = " expand " title = " Expand " href = " # " >< i class = " la la-angle-up " ></ i ></ a >
72- < a data-widgster = " collapse " title = " Collapse " href = " # " >< i class =" la la-angle-down " ></ i ></ a >
73- <a href = " # " data-widgster = " close " i class =" la la-remove " i ></a >
74- </ div >
75- </ header >
76- < div class = " widget-body "
77- < p >Using the contextual < code >.badge-*</ code > classes on an < code > < a > </ code > element quickly
78- provide actionable badges with hover and focus states.</ p >
79- < a href = " # " class = " badge badge-primary mr-4 mb-3 " >Primary</ a >
80- < a href = " # " class = " badge badge-success mr-4 mb-3 " >Success</ a >
81- <a href =" #" class =" badge badge-danger mr-4 mb-3" Danger </a >
82- <a href =" #" class =" badge badge-warning mr-4 mb-3" Warning </a >
83- <a href =" #" class =" badge badge-info mr-4 mb-3" Info </a >
84- <a href =" #" class =" badge badge-light mr-4 mb-3" Light </a >
85- <a href =" #" class =" badge badge-dark mr-4 mb-3" Dark </a >
86- </ div >
87- </ section >
63+ </ section >
64+ </ div >
65+ < div class = " col-12 "
66+ < section class = " widget "
67+ < header >
68+ < h5 >
69+ Links
70+ </ h5 >
71+ < div class =" widget-controls "
72+ <a data-widgster = " expand " title = " Expand " href = " # " i class =" la la-angle-up " i ></a >
73+ < a data-widgster = " collapse " title = " Collapse " href = " # " >< i class = " la la-angle-down " ></ i ></ a >
74+ <a href = " # " data-widgster = " close " >< i class = " la la-remove " ></ i ></ a >
75+ </ div >
76+ </ header >
77+ < div class = " widget-body "
78+ < p >Using the contextual < code >. badge-*</ code > classes on an < code > < a > </ code > element quickly
79+ provide actionable badges with hover and focus states.</ p >
80+ <a href =" #" class =" badge badge-primary mr-3 mb-3" Primary </a >
81+ <a href =" #" class =" badge badge-success mr-3 mb-3" Success </a >
82+ <a href =" #" class =" badge badge-danger mr-3 mb-3" Danger </a >
83+ <a href =" #" class =" badge badge-warning mr-3 mb-3" Warning </a >
84+ <a href =" #" class =" badge badge-info mr-3 mb-3" Info </a >
85+ < a href = " # " class = " badge badge-light mr-3 mb-3 " >Light</ a >
86+ <a href = " # " class = " badge badge-dark mr-3 mb-3 " >Dark</ a >
8887 </div >
89- </div >
90- {{ /content }}
91- {{ #content " scripts" }}
92- <script src =" ../js/components/ui-badge.js" script >
93- {{ /content }}
94- {{ /extend }}
88+ </section >
89+ </div >
90+ </div >
91+ {{ /content }}
92+ {{ #content " scripts" }}
93+ <script src =" ../js/components/ui-badge.js" script >
94+ {{ /content }}
95+ {{ /extend }}
0 commit comments