fbpx

Elements & Typography

The purpose of this page is to catalogue and provide instructions for using various CSS elements and type options.

Colors

.hab-blue
.border-hab-blue
#00AFd7

.hab-green
.border-hab-green
#C1D507

.hab-dark-blue
.border-hab-dark-blue
#002f6c

.hab-orange
.border-hab-orange
#ff671f

.hab-dark-green
.border-hab-dark-green
#43b02a

.hab-dark-red
.border-hab-dark-red
#a4343a

.hab-light-grey
.border-hab-light-grey
#eee


Hi there! I’m a bike messenger by day, aspiring actor by night, and this is my website. I live in Los Angeles, have a great dog named Jack, and I like piña coladas. (And gettin’ caught in the rain.)

Horizontal Tile

Deprecated: Columns: horiz-tile
Update: Any background columns will take care of this now.

Deprecated: Group text has: padded-text
Update: Text needs to be in a group and it will have padding applied to it.

Stacked Tiles

Group stacks of columns with backgrounds to remove the gap between rows and make the images meet in the center.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus posuere massa nisi, ut viverra velit lacinia in. Phasellus et tellus volutpat, interdum odio id, lobortis nisi.

Mauris a augue accumsan, cursus nunc in, ultrices urna. Sed a augue ut turpis scelerisque faucibus ut sed arcu. Fusce pharetra ipsum at urna luctus, ut sollicitudin mauris aliquam. Maecenas et justo nec velit vulputate posuere pellentesque et diam. Vivamus urna eros, eleifend eget dignissim et, consequat sit amet nulla.

Outline Box

Class: outline-box

Color Options: border-hab-blue, border-hab-green, border-hab-dark-blue, border-hab-orange, border-hab-dark-green, border-hab-dark-red, border-hab-light-grey

Lorem ipsum dolor sit amet

consectetur adipiscing elit. Integer faucibus massa id lacus mattis ullamcorper. Maecenas non dapibus justo, vel accumsan lacus. In dictum imperdiet quam, et suscipit nisi porta eu. Nulla sed lacus urna. Vestibulum fringilla rutrum libero, pellentesque dictum libero finibus id. Nulla ut augue id diam luctus efficitur vitae sed libero. Mauris vitae sollicitudin lorem. Pellentesque porta ante sit amet rutrum auctor. Etiam imperdiet malesuada velit id volutpat.

Bold

The quick brown fox

h1

The quick brown fox

h2

The quick brown fox

h3

The quick brown fox

h4

The quick brown fox

h5

The quick brown fox

h6

The quick brown fox

link

The quick brown fox

medium