Schedule An AppointmentSchedule Online

Design Set Info

  • Base site font resized to 10px.
  • Please use REM units for all
  • Text will automatically scale on devices now starting from 320px - 1280px
  • If need to resize fonts, use responsive calculator to input clamp() functions
  • Owls spacing classes included and ready for use
  • Section padding set to top/bottom: min 25px and max 75px, left/right: min 15px and max 25px
  • Default column padding is set to 0
  • REM is now easy to calculate via x 10...
    • E.G. 2rem = 20px, 3rem = 30px, 4rem = 40px etc...

Defaults set as below (range of smallest to largest)

  • Heading 1:   32px -  48px
  • Heading 2:  28px - 38px
  • Heading 3:  24px - 32px
  • Heading 4:  20px - 22.5px
  • Heading 5:  18px - 20px
  • Heading 6:  18px - 20px
  • Body Font:  14px - 18px

Owls Spacing Classes in place for even spacing between all child elements

  • owls-spacing--xs (.5rem)
  • owls-spacing--s   (1rem)
  • owls-spacing--m (1.5rem)
  • owls-spacing--l    (2.5rem)
  • owls-spacing--xl  (5rem)

 

H1 heading style

H2 heading style

H3 heading style

H4 heading style

H5 heading style
H6 heading style
Quisque blandit nisi sit amet lorem ultricies volutpat. Integer mattis elit ut eros fringilla, vitae euismod ligula porttitor. Quisque vehicula, enim at laoreet malesuada, neque sem finibus ipsum, accumsan placerat nisl arcu auctor ipsum. Mauris dolor quam, laoreet quis tincidunt pretium, condimentum id quam. Pellentesque non felis ut sem viverra efficitur in ut odio. Sed vehicula pellentesque ipsum id sodales. Curabitur nec lorem efficitur, elementum eros placerat, convallis mauris. Phasellus aliquet, tortor vel consequat molestie, ante est varius mi, sit amet consectetur felis odio in ligula. Praesent eu mi vel ipsum varius laoreet sit amet vel sapien. Aenean ut aliquam nibh. Aenean elementum vulputate mauris vitae rhoncus. Aliquam nulla tortor, elementum quis aliquam at, lobortis eget lorem. Donec vitae erat auctor, vehicula nibh ultrices, viverra diam. Aliquam hendrerit urna nunc, a ornare erat sodales at. Sed orci risus, dictum sit amet venenatis quis, pretium vitae dui. Aenean auctor dolor vel tellus lobortis, quis sodales orci sagittis.
style guide.

Typography

Real size
Variable
Min size @
320px viewport
Max size @
1360px viewport

Here's a H1 heading

var(--h1)
2.03rem
3.42rem

Here's a h2 heading

var(--h2)
1.80rem
2.85.rem

Here's a H3 heading

var(--h3)
1.60rem
2.38rem

Here's a H4 heading

var(--h4)
1.42rem
1.98rem
Here's a H5 heading
var(--h5)
1.27rem
1.65rem
Here's a H6 heading
var(--h6)
1.13rem
1.38rem
.c-text-xl - Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
var(--xl-text)
1.1rem
1.4rem
.c-text-l - Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
var(--l-text)
1rem
1.2rem
.c-text-m - Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
var(--m-text)
1rem
1rem
.c-text-s - Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
var(--s-text)
0.85rem
0.85rem
.c-uppercase
.c-lowercase
.c-underline
.c-bold
.c-italic

Aa

calc(var(--h1) * 3)

Aa

calc(var(--h1) * 2)

Aa

calc(var(--h1) * 1.5)

Colors

#0026ff
.c-heading-accent
#0f0f0f
.c-heading-dark
#ffffff
.c-heading-light
#0026ff
.c-text-accent
#686868
.c-text-dark
rgba(255,255,255,0.8)
.c-text-light

Backgrounds

#0026ff
.c-bg-accent
#e8e9ff
.c-bg-accent-alt
#f9f9f9
.c-bg-light
#ffffff
.c-bg-light-alt
#11141e
.c-bg-dark
#181c2d
.c-bg-dark-alt

Spacing

Real size
Variable
Min space size
Max space size
XXL size
var(--xxl-space)
52px
130px
XL size
var(--xl-space)
32px
80px
L size
var(--l-space)
20px
50px
M size
var(--m-space)
12px
30px
S size
var(--s-space)
8px
20px
XS size
var(--xs-space)
4px
10px

Cards

The world is beautiful

Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
Learn more

The world is beautiful

Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
Learn more

The world is beautiful

Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
Learn more

Icon Pack

crossmenu