SB Playground

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

Gamma Ribbon

A ribbon made with inline SVGs.

Modifier: .ribbon--gamma.

The HTML structure:

<nav class="ribbon ribbon--gamma" role="navigation" aria-label="breadcrumbs">
  <a class="ribbon__element" href="https://www.silvestar.codes/">
    <svg viewBox="0 0 10 40"><path fill-rule="evenodd" d="M10 20L0 0v40z"></path></svg>
    <span>Home</span>
    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 10 40" src="/gfx/svg/triangle.svg"><path fill-rule="evenodd" d="M10 20L0 0v40z"></path></svg>
  </a>
  <a class="ribbon__element" href="https://www.silvestar.codes/categories/articles/">
    <svg viewBox="0 0 10 40"><path fill-rule="evenodd" d="M10 20L0 0v40z"></path></svg>
    <span>Blog</span>
    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 10 40" src="/gfx/svg/triangle.svg"><path fill-rule="evenodd" d="M10 20L0 0v40z"></path></svg>
  </a>
  <a class="ribbon__element" href="https://www.silvestar.codes/articles/building-an-animated-sticky-header-with-custom-offset/" aria-current="page">
    <svg viewBox="0 0 10 40"><path fill-rule="evenodd" d="M10 20L0 0v40z"></path></svg>
    <span>Post</span>
    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 10 40" src="/gfx/svg/triangle.svg"><path fill-rule="evenodd" d="M10 20L0 0v40z"></path></svg>
  </a>
</nav>

The CSS code:

/* Set the correct size of the inline SVG and position absolutely */
.ribbon--gamma .ribbon__element svg {
  height: 2.667em;
  position: absolute;
  top: 0;
  width: 0.667em;
}

/* Match fill color for left triangle and stick it to the left side */
.ribbon--gamma .ribbon__element svg:first-child {
  fill: #fff;
  left: 0;
}

/* Stick the right triangle outside of the right side */
.ribbon--gamma .ribbon__element svg:last-child {
  left: 100%;
}

/* Match fill color for right triangles */
.ribbon--gamma .ribbon__element:nth-child(1) svg:last-child {
  fill: #11d295;
}

.ribbon--gamma .ribbon__element:nth-child(2) svg:last-child {
  fill: #ef3675;
}

.ribbon--gamma .ribbon__element:nth-child(3) svg:last-child {
  fill: #4cd4e9;
}

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.