Ribbon
You could find out how to build the ribbon component in the following examples. The HTML structure:
<nav class="ribbon ribbon--modifier" role="navigation" aria-label="breadcrumbs">
<a class="ribbon__element" href="https://www.silvestar.codes/">Home</a>
<a class="ribbon__element" href="https://www.silvestar.codes/categories/articles/">Blog</a>
<a class="ribbon__element" href="https://www.silvestar.codes/articles/building-an-animated-sticky-header-with-custom-offset/" aria-current="page">Post</a>
</nav>
where ribbon--modifier
is a modifier class. The following modifier classes are available:
ribbon--alpha
- the ribbon component made with CSS triangles,ribbon--beta
- the ribbon component made with SVG backgrounds,ribbon--gamma
- the ribbon component made with CSS clip path,ribbon--shadow
- the ribbon component with a drop shadow,ribbon--gradient
- the ribbon component with a linear gradient background,ribbon--small
- the small ribbon component, andribbon--big
- the big ribbon component.
The CSS code:
/* The wrapper element */
.ribbon {
display: grid;
font-size: 15px;
grid-gap: 1px;
grid-template-columns: repeat(3, 1fr) 1em;
margin-left: auto;
margin-right: auto;
margin-top: 40px;
width: 100%;
}
/* The ribbon element */
.ribbon__element {
background-color: #11d295;
color: #fff;
font-size: 1.5em;
font-weight: 700;
letter-spacing: 0.01em;
line-height: 1.333em;
padding: 0.667em 0 0.667em 1.333em;
position: relative;
}
/* States */
.ribbon__element:hover,
.ribbon__element:focus,
.ribbon__element:active {
color: inherit;
text-decoration: underline;
}
A ribbon component showed in these examples should be used as a breadcrumb element. However, if you want to use it for something else, be sure to update or remove the aria attributes. The HTML code for accessible breadcrumbs could be found on the A11y Style Guide website, under Option #2.
See the full list of ribbon modifiers below: