Style Guide
Logo
As an img tag:

As an inline SVG included as a snippet
//www.loveinfaith.life/cdn/shop/t/247/assets/logo.png?v=147936338446380087781695368795Grid and Layout Rules
Breakpoints
Mobile | Tablet | Desktop | Full Width |
---|---|---|---|
less than 650px | 650px to 991px | greater than 992px | 2560px |
Global Spacing Unit and Layout Tools
The sizing and spacing for elements in this theme should always be based on the global spacing unit of 4 pixels. Ensure adherance to this rule by using the $spacing-unit variable wherever possible. This theme includes a BEM component called .page-layout as well as set of grid classes to help achieve layouts that conform to the global spacing guidelines.
Colors
Typography
Fonts
Mrs Eaves OT
The quick brown fox jumps over the lazy dog.
Mrs Eaves
The quick brown fox jumps over the lazy dog.
Mr Eaves Sans
The quick brown fox jumps over the lazy dog.
Headings
Heading styles are available as native HTML elements as well as classes that follow the pattern of .heading--{level}.
Display Text
This is Text H1
This is Text H2
This is Text H3
This is Text H4
This is Text H5
This is Text H6
Body Copy
Body Large (.body--large)
The quick brown fox jumps over the lazy dog.
Body (.body--base)
The quick brown fox jumps over the lazy dog.
Body Small (.body--small)
The quick brown fox jumps over the lazy dog.
Buttons
Primary
With Modifier
Secondary
With Modifier
Arrow Buttons
Primary
Secondary
Arrow Up
Link Style
Form Elements
Checkboxes
Radio Input
Option Set 1
Option Set 2 (Full Width, Disabled and Selected)
Quantity Inputs
Select Inputs
Accordions
We're very happy to send you a size you will love 100% FREE! For quick and easy size exchanges click here: Size Exchanges or, please feel welcome to call or email us. We're very happy to help!"
We're very happy to send you a size you will love 100% FREE! For quick and easy size exchanges click here: Size Exchanges or, please feel welcome to call or email us. We're very happy to help!"
We're very happy to send you a size you will love 100% FREE! For quick and easy size exchanges click here: Size Exchanges or, please feel welcome to call or email us. We're very happy to help!"