Table of Contents

• Fonts
• Colors
• Typography
• Buttons
• Forms
• UI Elements
  • Breadcrumbs
  • Pagination
  • Social Sharing
  • Minimal Input

Fonts

Colors

greyscale

Main

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

• Strong
• Emphasis
• Inline link
• Strike
• ^Sup

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

Label

Label 2

Text Field (Valid)

Validation Feedback goes here

Text Field (Error)

Invalid Feedback goes here

Label 3 -- Choose -- Option 1 Option 2 Option 3 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.

First Name

Last Name

Email

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.

Text Field

Placeholder

Disabled Field

Text Field (Valid)

Text Field (Error)

Select Field

-- Choose -- Option 1 Option 2 Option 3 Option 4

Text Area

Default checkbox

Default checkbox

Disabled checkbox

One Time Delivery

Subscribe With Benefits

Disabled radio

Radio with Icon

Second Radio with Icon

Textarea

UI Elements

• Liquid error (templates/page.styles line 1057): Could not find asset snippets/icon-chevron-up.liquid

Breadcrumbs

Pagination

Social Sharing

Minimal Input

Normal

Inverted

Large