HTML
CSS
.breadcrumb {
display: flex
flex-wrap: wrap
font-size: 1.125rem
font-weight: 400
line-height: 1.28572
}
.breadcrumb .breadcrumb-item {
display: flex
margin-right: 0rem
position: relative
padding-left: 0px
}
.breadcrumb .link {
white-space: nowrap
border: 0
box-sizing: border-box
color: #0f62fe
display: inline-flex
font-size: 1.125rem
font-weight: 400
line-height: 1.28572
margin: 0
outline: none
padding: 0
text-decoration: none
vertical-align: baseline
}
.breadcrumb .link:hover{
text-decoration: underline
}
.arrow-breadcrumb .breadcrumb-item::after{
content: '';
background-image: url('../assessts/images/chevron-right.svg');
background-size: 18px 18px;
background-repeat: no-repeat;
width: 18px;
height: 18px;
margin-right: 5px;
margin-left: 5px;
}
.arrow-breadcrumb .breadcrumb-item:last-child::after{
background-image:none
}
.arrow-breadcrumb .breadcrumb-item+.breadcrumb-item::before {
content: "";
padding-right: 0px;
padding-left: 0px;
}
.breadcrumb-item .link.active{
color: #1d1e22;
font-weight: 400;
text-decoration: none;
cursor: auto;
}
Modifiers

Typography

When a user hovers overs a breadcrumb, the breadcrumb link should be underlined.

Element Font-size (px/rem) Font-weight Margin-Left Height
Link 18 / 1.125 Regular / 400 10px / 0.625 32 / 2