Components menu
Badge
Badges can be used to add additional information to an element/content.
Title
17 December 2023
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor.
HTML
<div class="full-width--card card">
<div class="card-body">
<h3 class="card-title">
<a href=""> Title </a>
</h3>
<div class="text-muted">
<p> Date </p>
</div>
<div class="card-text">
<p> Lorem ipsum dolor sit amet, consectetuer adipiscing elit. </p>
</div>
<div class="row">
<div class="col-xxl-6 col-lg-6 col-md-6 col-sm-12 card-button">
<a href="" class="card-link">
<span>
Read the full statement
<i class="card-link--icon fa-solid fa-circle-arrow-right" aria-hidden="true"></i>
</span>
</a>
</div>
<div class="col-xxl-6 col-lg-6 col-md-6 col-sm-12">
<a href="" class="badge text-bg-primary" title="Filter news by type"> Type Name </a>
<a href="" class="badge text-bg-primary" title="Filter news by category"> Category Name </a>
</div>
</div>
</div>
</div>
<a href="" class="badge text-bg-primary" title=""> Badge title </a>
<div class="container-fluid phase--banner container-negative-bottom-margin">
<div class="container">
<div class="badge--alpha"> ALPHA </div> This is a new service. Your <a href="" title="Give feedback on our BETA service">feedback</a> will help us to improve it.
</div>
</div>
<div class="container-fluid phase--banner container-negative-bottom-margin">
<div class="container">
<div class="badge--beta"> BETA </div> This is a new service. Your <a href="" title="Give feedback on our BETA service">feedback</a> will help us to improve it.
</div>
</div>
CSS
/* Badge
------------------------------------ */
.badge {
display: inline-block;
padding: 5px 10px;
font-size: 1rem;
font-weight: 400;
line-height: 1rem;
color: var(--scottish-teal) !important;
text-align: center;
white-space: nowrap;
vertical-align: baseline;
}
a.badge.text-bg-primary, .badge.text-bg-primary {
text-decoration: none;
background-color: var(--grey-four) !important;
border: 1px solid var(--scottish-teal);
}
a.badge.text-bg-primary:hover {
background-color: var(--scottish-dark-teal) !important;
color: #ffffff !important;
text-decoration: none;
}
@media (min-width: 320px) {
a.badge.text-bg-primary, .badge.text-bg-primary {
margin: 10px 5px 0px 0px;
float: left;
}
}
@media (min-width: 992px) {
a.badge.text-bg-primary, .badge.text-bg-primary {
margin: 0px 5px;
float: right;
}
}
/* Alpha/Beta badge
------------------------------------ */
.phase--banner {
background-color: var(--grey-three);
padding: 25px 0px;
color: #000000;
}
.badge--alpha {
background-color: var(--scottish-teal);
color: #ffffff;
display: inline-block;
padding: 5px 10px;
font-size: 1.2rem;
font-weight: 500;
line-height: 1rem;
text-align: center;
white-space: nowrap;
vertical-align: baseline;
margin-right: 15px;
border-radius: 0;
}
.badge--beta {
background-color: var(--orange);
color: #000000;
display: inline-block;
padding: 5px 10px;
font-size: 1.2rem;
font-weight: 500;
line-height: 1rem;
text-align: center;
white-space: nowrap;
vertical-align: baseline;
margin-right: 15px;
border-radius: 0;
}
.phase--banner a {
color: var(--scottish-dark-teal);
font-weight: 500;
}
.phase--banner a:hover {
background-color: var(--grey-one);
color: #ffffff;
}
.phase--banner a:focus {
outline-offset: 0;
background-color: var(--scottish-dark-teal);
color: #ffffff;
}