Juniper.

The Human Made Pattern Library.

Back to main page.

Commonly used components

Labels

Lorem Cum ageremus Cognoscenda 4 Sin tantum modo

Code blocks

{
	"name": "Tom",
	"age": "12",
	"location": "USA",
}

Add a class like language-php for syntax highlighting powered by Prism.js.

Note that Prism forces you to use the correct element for marking up code: <code>. On its own for inline code, or inside a <pre> for blocks of code. See example below.

<pre><code class="language-html">
	// Sample code...
</code></pre>

Prism supports HTML, PHP, JS, CSS, SCSS and many other languages.

<?php
if ( 'pens' === pencils ) {
	return false;
}
.my-component {
	color: #FF0000;
	font-family: "Comic Sans MS", "Comic Sans", cursive;
}

Loading Indicators

Loading

Call to action links

Link cta

Link arrow

Link arrow-left

Link small with arrow

Link large with arrow