Badges
Badges are used as labels or tags.
A badge can communicate to users what
content is about,to describe a section of a website and can also convey information scent.
Heading New
Heading New
Heading New
Heading New
Heading New
<h1>Heading <span class="badge bg-dark text-bright">New</span></h1>
<h2>Heading <span class="badge bg-dark text-bright">New</span></h2>
<h3>Heading <span class="badge bg-dark text-bright">New</span></h3>
<h4>Heading <span class="badge bg-dark text-bright">New</span></h4>
<h5>Heading <span class="badge bg-dark text-bright">New</span></h5>
You can also add icons and numbers in the badges. For icons make sure you have
added the FontAwesome link in your html file.
If you have not added the link , copy this link in to your HTML file:
<link rel="stylesheet"
href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
Heading
Heading
Heading
Heading
Heading
<h1>Heading <span class="badge bg-dark text-bright"><i class="fas fa-fire"></i></span></h1>
<h2>Heading <span class="badge bg-dark text-bright"><i class="fas fa-fire"></i></span></h2>
<h3>Heading <span class="badge bg-dark text-bright"><i class="fas fa-fire"></i></span></h3>
<h4>Heading <span class="badge bg-dark text-bright"><i class="fas fa-fire"></i></span></h4>
<h5>Heading <span class="badge bg-dark text-bright"><i class="fas fa-fire"></i></span></h5>
Heading 20
Heading 18
Heading 15
Heading 9
Heading 2
<h1>Heading <span class="badge bg-dark text-bright">20</span></h1>
<h2>Heading <span class="badge bg-dark text-bright">18</span></h2>
<h3>Heading <span class="badge bg-dark text-bright">15</span></h3>
<h4>Heading <span class="badge bg-dark text-bright">9</span></h4>
<h5>Heading <span class="badge bg-dark text-bright">2</span></h5>
Background color and text color can be altered either by using the pre-defined
color classes in utilities or you can addd your own colors by add your custom css class.
To know more about Scratch's pre-defined color classes click here.
Examples given below are used by pre-defined classes in Scratch.
Heading New
Heading
Heading 8
<h1>Heading <span class="badge text-bright bg-green">New</span></h1>
<h2>Heading <span class="badge text-bright bg-red"><i class="fas fa-fire"></i></span></h2>
<h3>Heading <span class="badge bg-dark text-yellow">8</span></h3>
