SB Playground

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

Big Ribbon

A big ribbon. The sizing of the ribbon elements is based on em units. Since the em unit is relative to parent element font-size, we could control the size of the ribbon elements on a single place. To make sure this approach is working, don't overwrite em size definitions. Also, don't forget to add ribbon--alpha, ribbon--beta or ribbon--gamma modifier.

Modifier: .ribbon--big.

The HTML structure:

<nav class="ribbon ribbon--alpha ribbon--big" 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:

/* Define bigger font size on wrapper element */
.ribbon--big {
  font-size: 20px;
}

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.