SB Playground

A showcase of demos, examples, and code snippets of one SB.
The source code for the site could be found here.

Beta Ribbon

A ribbon made with SVG background and pseudo-classes.

Modifier: .ribbon--beta.

The HTML structure:

<nav class="ribbon ribbon--beta" 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>

The CSS code:

/* The left triangle */
.ribbon--beta .ribbon__element:before {
  background-image: url(/gfx/svg/triangle.svg);
  background-position: center left;
  background-repeat: no-repeat;
  background-size: 100%;
  bottom: 0;
  content: '';
  height: 100%;
  left: 0;
  position: absolute;
  top: 0;
  width: 0.667em;
}

/* The right triangle */
.ribbon--beta .ribbon__element:after {
  background-position: center left;
  background-repeat: no-repeat;
  background-size: 100%;
  bottom: 0;
  content: '';
  height: 100%;
  position: absolute;
  right: 0;
  top: 0;
  -webkit-transform: translateX(0.667667em);
  -ms-transform: translateX(0.667667em);
  transform: translateX(0.667667em);
  width: 0.667em;
}

/* Match background color for right triangles */
.ribbon--beta .ribbon__element:nth-child(1):after {
  background-image: url(/gfx/svg/triangle1.svg);
}

.ribbon--beta .ribbon__element:nth-child(2):after {
  background-image: url(/gfx/svg/triangle2.svg);
}

.ribbon--beta .ribbon__element:nth-child(3):after {
  background-image: url(/gfx/svg/triangle3.svg);
}

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:

Powered by Starter Project.