Pear

A lightweight front-end boilerplate

v2.7.0

View on Github →

Colors

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

Type

Heading 1

Heading 2

Heading 3

Heading 4

Heading 5
Heading 6

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.

Sed adipiscing ornare risus. Morbi est est, blandit sit amet, sagittis vel, euismod vel, velit. Pellentesque egestas sem. Suspendisse commodo ullamcorper magna. Ut aliquam sollicitudin leo.

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.

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

Large Default Medium Outline Medium Default Small Outline

Tables

Tournament Place Winnings Points
Sony Open 2nd $752,000 75
Arnold Palmer Invitational 6th $320,000 50
Tavistock Cup 12th $92,000 19
Zurich Classic 5th $310,000 53
Totals $1,474,000 197

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