Table of Contents

Fonts

Graebenbach Regular

ABCDEFGHIJKLMNOPQRSTUVWXYZ

abcdefghijklmnopqrstuvwxyz

0123456789


Graebenbach Black Italic

ABCDEFGHIJKLMNOPQRSTUVWXYZ

abcdefghijklmnopqrstuvwxyz

0123456789


Graebenbach Black

ABCDEFGHIJKLMNOPQRSTUVWXYZ

abcdefghijklmnopqrstuvwxyz

0123456789


Graebenbach Bold Italic

ABCDEFGHIJKLMNOPQRSTUVWXYZ

abcdefghijklmnopqrstuvwxyz

0123456789


Graebenbach Bold

ABCDEFGHIJKLMNOPQRSTUVWXYZ

abcdefghijklmnopqrstuvwxyz

0123456789


Graebenbach Medium Italic

ABCDEFGHIJKLMNOPQRSTUVWXYZ

abcdefghijklmnopqrstuvwxyz

0123456789


Graebenbach Medium

ABCDEFGHIJKLMNOPQRSTUVWXYZ

abcdefghijklmnopqrstuvwxyz

0123456789


Colors

greyscale

Black
#111
$black

White
#fff
$white

Grey Bergamot
#808080
$grey-bergamot

Grey Silver
#c4c4c4
$grey-silver

Grey Seashell
#f1f1f1
$grey-seashell

Main

Sand
#c4c4bd
$sand

Eucalyptus
#b2bab0
$eucalyptus

Red
#ff0000
$red

Red Valencia
#db4b4b
$red-valencia

Typography

Headings

H1 Graebenbach Medium

H2 Graebenbach Medium

H3 Graebenbach Medium

Type variations

P1 Graebenbach Bold Regular

P2 Graebenbach Bold

P3 Graebenbach Bold Regular

Paragraphs

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse eleifend, enim nec tempor facilisis, urna dui hendrerit odio, sed laoreet ex metus commodo enim. Praesent vehicula malesuada ornare. Nulla in velit sit amet ligula convallis placerat ut sit amet nunc. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Vivamus lobortis justo eu condimentum gravida. Aenean a sapien laoreet, scelerisque libero sit amet, ultrices est. Maecenas eu odio suscipit, maximus ligula eu, scelerisque sapien.

Mauris justo purus, bibendum ut molestie vitae, hendrerit in ipsum. Fusce commodo justo in lorem mattis, ut sagittis erat auctor. Maecenas dignissim, felis eu tempor varius, lorem nulla luctus augue, non volutpat massa sem nec felis. Suspendisse accumsan aliquam ornare. Suspendisse commodo nec arcu id imperdiet. Praesent tincidunt condimentum est non fermentum. Donec id malesuada enim. Nullam finibus arcu nulla, vestibulum egestas leo aliquet vel. Phasellus sed maximus eros.

Pellentesque imperdiet velit eu fringilla sagittis. Duis enim nibh, mattis id justo sed, euismod posuere diam. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent egestas ultricies nunc a bibendum. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Cras volutpat tellus tincidunt blandit efficitur. Sed maximus leo ultricies massa auctor egestas. Pellentesque aliquet aliquam porta. Vestibulum convallis libero et metus ornare, sit amet posuere dolor semper.

Type styles

Text Utilities

  • .font-weight-normal
  • .font-weight-bold
  • .letter-spacing-base
  • .text-black
  • .text-grey-darkest
  • .text-grey-darker
  • .text-grey-dark
  • .text-grey
  • .text-grey-light
  • .text-grey-lighter
  • .text-white
  • .text-muted
  • .text-black-50
  • .text-white-50
  • .text-primary
  • .text-secondary
  • .text-success
  • .text-info
  • .text-warning
  • .text-danger

Background Color Utilities

  • .bg-black
  • .bg-grey
  • .bg-grey-light
  • .bg-grey-lighter
  • .bg-white
  • .bg-primary
  • .bg-secondary
  • .bg-success
  • .bg-warning
  • .bg-danger

Buttons

Forms

Forms are based on Bootstrap 4's form component. Simple examples to listed here to use as a reference for styling, for more detailed information about how they work, please see the official documentation.

Default Forms

Validation Feedback goes here
Invalid Feedback goes here
I'm helper text to explain what's going on with this form input.

Invisible labels

Add a class of sr-only to a label to visually hide it, while keeping it accessible to screen readers. Use the placeholder attribute as your visible label.

Note: The placeholder attribute only works in IE10+, so invisible labels are disabled in IE9 and below.

Horizontal Forms

Create horizontal forms with the grid by adding the .row class to form groups and using the .col-*-* classes to specify the width of your labels and controls. Be sure to add .col-form-label to your label elements as well so they’re vertically centered with their associated form controls.


UI Elements

Breadcrumbs

Pagination

Social Sharing

Minimal Input

Normal



Inverted



Large