Pear

A lightweight front-end boilerplate

v2.8.1

View on Github →

Colors

Primary brand color
Secondary brand color
Brand accent color
Darkest gray
Dark gray
Gray
Light gray
Lightest gray

Type

I watched the storm.

We had left the ground.

My two natures had memory in common.

It was going to be a lonely trip back.

The face of the moon was in shadow.
She stared through the window at the stars.

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec odio. Quisque volutpat mattis eros. Nullam malesuada erat ut turpis. Suspendisse urna nibh, semper suscipit, posuere a, pede.

This is a blockquote. Suspendisse commodo ullamcorper magna.

Lorem superscript dolor subscript amet, consectetuer adipiscing elit. Nullam dignissim convallis est. Quisque aliquam. cite. Donec sed tellus eget sapien fringilla nonummy. NBA Morbi imperdiet augue quis tellus. Suspendisse quam sem, AVE consequat at, commodo vitae, feugiat in nunc.

Morbi in sem quis dui placerat ornare. Pellentesque odio nisi, euismod in pharetra a, ultricies in, diam. Sed arcu. Cras consequat.

  1. Integer vitae libero ac risus egestas placerat.
  2. Praesent placerat risus quis eros.
  3. Ut aliquam sollicitudin leo.
  4. Donec quis dui at dolor tempor interdum.

Code

Phasellus ultrices nulla, gravida non some inline code commodo a sodales sit amet nisi.

<p>Block of code</p>

Embeds

Sample image

Forms

Buttons

Medium Default Medium Outline Small Default

Grid

.span-half
.span-one-fourth
.span-one-fourth
.span-whole
.span-one-third
.span-one-third
.span-one-third
.span-3
.span-3
.span-6
.span-12
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec odio. Quisque volutpat mattis eros. Nullam malesuada erat ut turpis.
top (default)
bottom
.span-8
.span-4
.span-2
.span-2
.span-2
.span-2
.span-2
.span-2