Ribbon

<div class="ribbon js-ribbon">
    stage
</div>

<script type="text/javascript">
    var ribbonElement = document.querySelector('.js-ribbon');
    ribbonElement.addEventListener('mouseover', () => {
        ribbonElement.classList.add('is-hidden');
        setTimeout(function() {
            ribbonElement.classList.remove('is-hidden');
        }, 4000);
    });
</script>

<style media="screen">
    .ribbon {
        position: fixed;
        z-index: 100000;
        /* Must be higher than WP's admin toolbar */
        bottom: 0;
        left: 0;
        padding: 0.5rem 0;
        -webkit-transform: translateX(-33.33%) rotate(45deg);
        transform: translateX(-33.33%) rotate(45deg);
        -webkit-transform-origin: bottom right;
        transform-origin: bottom right;
        background-color: #e0bff5;
        font-family: "HK Grotesk Semibold", sans-serif;
        font-family: sans-serif;
        font-size: 12px;
        text-align: center;
        text-transform: uppercase;
    }

    .ribbon.is-hidden {
        display: none;
    }

    .ribbon::before,
    .ribbon::after {
        content: '';
        position: absolute;
        top: 0;
        width: 200%;
        height: 100%;
        margin: 0 -1px;
        background-color: inherit;
    }

    .ribbon::before {
        right: 100%;
    }

    .ribbon::after {
        left: 100%;
    }

    @media (min-width: 576px) {
        .ribbon {
            font-size: 14px;
        }
    }

    @media (min-width: 1400px) {
        .ribbon {
            font-size: 18px;
        }
    }
</style>
<div class="ribbon js-ribbon">
	{{text}}
</div>

<script type="text/javascript">
	var ribbonElement = document.querySelector('.js-ribbon');

	ribbonElement.addEventListener('mouseover', () => {
		ribbonElement.classList.add('is-hidden');

		setTimeout(function(){
			ribbonElement.classList.remove('is-hidden');
		}, 4000);
	});
</script>

<style media="screen">
.ribbon {
	position: fixed;
	z-index: 100000; /* Must be higher than WP's admin toolbar */
	bottom: 0;
	left: 0;
	padding: 0.5rem 0;
	-webkit-transform: translateX(-33.33%) rotate(45deg);
	transform: translateX(-33.33%) rotate(45deg);
	-webkit-transform-origin: bottom right;
	transform-origin: bottom right;
	background-color: #e0bff5;
	font-family: "HK Grotesk Semibold", sans-serif;
	font-family: sans-serif;
	font-size: 12px;
	text-align: center;
	text-transform: uppercase;
}

.ribbon.is-hidden {
	display: none;
}

.ribbon::before, .ribbon::after {
	content: '';
	position: absolute;
	top: 0;
	width: 200%;
	height: 100%;
	margin: 0 -1px;
	background-color: inherit;
}
.ribbon::before {
	right: 100%;
}
.ribbon::after {
	left: 100%;
}
@media (min-width: 576px) {
	.ribbon {
		font-size: 14px;
	}
}
@media (min-width: 1400px) {
	.ribbon {
		font-size: 18px;
	}
}
</style>
{
  "name": "Ribbon",
  "text": "stage",
  "background": "peacock-light"
}
  • Content:
    @charset "UTF-8";
    
    @include atom(ribbon) {
    	position: fixed;
    	z-index: 100000; // Must be higher than WP's admin toolbar
    	bottom: 0;
    	left: 0;
    	padding: rhythm(1) 0;
    	transform: translateX(-33.33%) rotate(45deg);
    	transform-origin: bottom right;
    	background-color: #e0bff5;
    	font-family: $font-family-headings;
    	font-family: sans-serif;
    	font-size: $size-small;
    	text-align: center;
    	text-transform: uppercase;
    
    	&::before,
    	&::after {
    		content: '';
    		position: absolute;
    		top: 0;
    		width: 200%;
    		height: 100%;
    		margin: 0 -1px;
    		background-color: inherit;
    	}
    
    	&::before {
    		right: 100%;
    	}
    
    	&::after {
    		left: 100%;
    	}
    
    	@include bp-up(sm) {
    		font-size: $size-medium;
    	}
    
    	@include bp-up(xxl) {
    		font-size: $size-base;
    	}
    }
    
  • URL: /components/raw/ribbon/_ribbon.scss
  • Filesystem Path: src/atoms/ribbon/_ribbon.scss
  • Size: 733 Bytes

Ribbon

Used for notifying the user they’re on the stage environment. Inline styles is used because it should also work in Wordpress admin.

Can be used both as an “atom” and a free standing “block”.