Build faster in Webflow with hatch.
Jumpstart your project with over 2,000 ready-to-use utility classes to help you quickly build your pages.
Jumpstart your project with over 2,000 ready-to-use utility classes to help you quickly build your pages.
Hatch is a utility framework for Webflow that is made up of over 2,000 low-level utility classes, helping you work insanely fast.
Need a section with some vertical padding? Try this.
Need a container div to center your content with a max width? Maybe at 1280px? Add this.
What about some margin-bottom? Say 2rem (32px).
Ok, but what if you want to remove that margin on Tablet sizes. Add a combo class like this.
Hatch works out of the box by scaling down font sizes and spacing at each breakpoint, but it's still flexible with breakpoint classes to set the exact style you want at each size.
Just start your class with Tablet, Landscape, or Portrait to apply a style at a specific breakpoint.
Be sure to check out the documentation to see all the utility classes Hatch has available. Or, press G and scroll through the Style Manager. That works too.
Hatch makes it easy to change update the colors throughout your site using global swatches.
To update the colors, select a color below and edit the global swatch under the background color section in the right sidebar.
Hatch comes with Poppins font out of the box, and all of the headings and paragraphs inherit that font from the body element.
To update your font, first add your font in your project settings, then select the Body (All Pages) and change to your new font family.
If you'd like to use a different font for your headings, select each of the headings below one by one and change the font under the typography section in the right sidebar.
Forms
Jotform CSS Code
/* devanagari */
@font-face {
font-family : 'Poppins';
font-style : italic;
font-weight : 400;
src : url(https://fonts.gstatic.com/s/poppins/v15/pxiGyp8kv8JHgFVrJJLucXtAOvWDSHFF.woff2) format('woff2');
unicode-range : U+0900-097F, U+1CD0-1CF6, U+1CF8-1CF9, U+200C-200D, U+20A8, U+20B9, U+25CC, U+A830-A839, U+A8E0-A8FB;
}/* latin-ext */
@font-face {
font-family : 'Poppins';
font-style : italic;
font-weight : 400;
src : url(https://fonts.gstatic.com/s/poppins/v15/pxiGyp8kv8JHgFVrJJLufntAOvWDSHFF.woff2) format('woff2');
unicode-range : U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
}/* latin */
@font-face {
font-family : 'Poppins';
font-style : italic;
font-weight : 400;
src : url(https://fonts.gstatic.com/s/poppins/v15/pxiGyp8kv8JHgFVrJJLucHtAOvWDSA.woff2) format('woff2');
unicode-range : U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}/* devanagari */
@font-face {
font-family : 'Poppins';
font-style : italic;
font-weight : 600;
src : url(https://fonts.gstatic.com/s/poppins/v15/pxiDyp8kv8JHgFVrJJLmr19VFteOYktMqlap.woff2) format('woff2');
unicode-range : U+0900-097F, U+1CD0-1CF6, U+1CF8-1CF9, U+200C-200D, U+20A8, U+20B9, U+25CC, U+A830-A839, U+A8E0-A8FB;
}/* latin-ext */
@font-face {
font-family : 'Poppins';
font-style : italic;
font-weight : 600;
src : url(https://fonts.gstatic.com/s/poppins/v15/pxiDyp8kv8JHgFVrJJLmr19VGdeOYktMqlap.woff2) format('woff2');
unicode-range : U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
}/* latin */
@font-face {
font-family : 'Poppins';
font-style : italic;
font-weight : 600;
src : url(https://fonts.gstatic.com/s/poppins/v15/pxiDyp8kv8JHgFVrJJLmr19VF9eOYktMqg.woff2) format('woff2');
unicode-range : U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}/* devanagari */
@font-face {
font-family : 'Poppins';
font-style : normal;
font-weight : 400;
src : url(https://fonts.gstatic.com/s/poppins/v15/pxiEyp8kv8JHgFVrJJbecnFHGPezSQ.woff2) format('woff2');
unicode-range : U+0900-097F, U+1CD0-1CF6, U+1CF8-1CF9, U+200C-200D, U+20A8, U+20B9, U+25CC, U+A830-A839, U+A8E0-A8FB;
}/* latin-ext */
@font-face {
font-family : 'Poppins';
font-style : normal;
font-weight : 400;
src : url(https://fonts.gstatic.com/s/poppins/v15/pxiEyp8kv8JHgFVrJJnecnFHGPezSQ.woff2) format('woff2');
unicode-range : U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
}/* latin */
@font-face {
font-family : 'Poppins';
font-style : normal;
font-weight : 400;
src : url(https://fonts.gstatic.com/s/poppins/v15/pxiEyp8kv8JHgFVrJJfecnFHGPc.woff2) format('woff2');
unicode-range : U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}/* devanagari */
@font-face {
font-family : 'Poppins';
font-style : normal;
font-weight : 600;
src : url(https://fonts.gstatic.com/s/poppins/v15/pxiByp8kv8JHgFVrLEj6Z11lFd2JQEl8qw.woff2) format('woff2');
unicode-range : U+0900-097F, U+1CD0-1CF6, U+1CF8-1CF9, U+200C-200D, U+20A8, U+20B9, U+25CC, U+A830-A839, U+A8E0-A8FB;
}/* latin-ext */
@font-face {
font-family : 'Poppins';
font-style : normal;
font-weight : 600;
src : url(https://fonts.gstatic.com/s/poppins/v15/pxiByp8kv8JHgFVrLEj6Z1JlFd2JQEl8qw.woff2) format('woff2');
unicode-range : U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
}/* latin */
@font-face {
font-family : 'Poppins';
font-style : normal;
font-weight : 600;
src : url(https://fonts.gstatic.com/s/poppins/v15/pxiByp8kv8JHgFVrLEj6Z1xlFd2JQEk.woff2) format('woff2');
unicode-range : U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}/* devanagari */
@font-face {
font-family : 'Poppins';
font-style : italic;
font-weight : 400;
src : url(https://fonts.gstatic.com/s/poppins/v15/pxiGyp8kv8JHgFVrJJLucXtAOvWDSHFF.woff2) format('woff2');
unicode-range : U+0900-097F, U+1CD0-1CF6, U+1CF8-1CF9, U+200C-200D, U+20A8, U+20B9, U+25CC, U+A830-A839, U+A8E0-A8FB;
}/* latin-ext */
@font-face {
font-family : 'Poppins';
font-style : italic;
font-weight : 400;
src : url(https://fonts.gstatic.com/s/poppins/v15/pxiGyp8kv8JHgFVrJJLufntAOvWDSHFF.woff2) format('woff2');
unicode-range : U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
}/* latin */
@font-face {
font-family : 'Poppins';
font-style : italic;
font-weight : 400;
src : url(https://fonts.gstatic.com/s/poppins/v15/pxiGyp8kv8JHgFVrJJLucHtAOvWDSA.woff2) format('woff2');
unicode-range : U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}/* devanagari */
@font-face {
font-family : 'Poppins';
font-style : italic;
font-weight : 600;
src : url(https://fonts.gstatic.com/s/poppins/v15/pxiDyp8kv8JHgFVrJJLmr19VFteOYktMqlap.woff2) format('woff2');
unicode-range : U+0900-097F, U+1CD0-1CF6, U+1CF8-1CF9, U+200C-200D, U+20A8, U+20B9, U+25CC, U+A830-A839, U+A8E0-A8FB;
}/* latin-ext */
@font-face {
font-family : 'Poppins';
font-style : italic;
font-weight : 600;
src : url(https://fonts.gstatic.com/s/poppins/v15/pxiDyp8kv8JHgFVrJJLmr19VGdeOYktMqlap.woff2) format('woff2');
unicode-range : U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
}/* latin */
@font-face {
font-family : 'Poppins';
font-style : italic;
font-weight : 600;
src : url(https://fonts.gstatic.com/s/poppins/v15/pxiDyp8kv8JHgFVrJJLmr19VF9eOYktMqg.woff2) format('woff2');
unicode-range : U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}/* devanagari */
@font-face {
font-family : 'Poppins';
font-style : normal;
font-weight : 400;
src : url(https://fonts.gstatic.com/s/poppins/v15/pxiEyp8kv8JHgFVrJJbecnFHGPezSQ.woff2) format('woff2');
unicode-range : U+0900-097F, U+1CD0-1CF6, U+1CF8-1CF9, U+200C-200D, U+20A8, U+20B9, U+25CC, U+A830-A839, U+A8E0-A8FB;
}/* latin-ext */
@font-face {
font-family : 'Poppins';
font-style : normal;
font-weight : 400;
src : url(https://fonts.gstatic.com/s/poppins/v15/pxiEyp8kv8JHgFVrJJnecnFHGPezSQ.woff2) format('woff2');
unicode-range : U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
}/* latin */
@font-face {
font-family : 'Poppins';
font-style : normal;
font-weight : 400;
src : url(https://fonts.gstatic.com/s/poppins/v15/pxiEyp8kv8JHgFVrJJfecnFHGPc.woff2) format('woff2');
unicode-range : U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}/* devanagari */
@font-face {
font-family : 'Poppins';
font-style : normal;
font-weight : 600;
src : url(https://fonts.gstatic.com/s/poppins/v15/pxiByp8kv8JHgFVrLEj6Z11lFd2JQEl8qw.woff2) format('woff2');
unicode-range : U+0900-097F, U+1CD0-1CF6, U+1CF8-1CF9, U+200C-200D, U+20A8, U+20B9, U+25CC, U+A830-A839, U+A8E0-A8FB;
}/* latin-ext */
@font-face {
font-family : 'Poppins';
font-style : normal;
font-weight : 600;
src : url(https://fonts.gstatic.com/s/poppins/v15/pxiByp8kv8JHgFVrLEj6Z1JlFd2JQEl8qw.woff2) format('woff2');
unicode-range : U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
}/* latin */
@font-face {
font-family : 'Poppins';
font-style : normal;
font-weight : 600;
src : url(https://fonts.gstatic.com/s/poppins/v15/pxiByp8kv8JHgFVrLEj6Z1xlFd2JQEk.woff2) format('woff2');
unicode-range : U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}@font-face {
font-family : 'Sofia Pro';
src : url('https://cdn.prod.website-files.com/5fd85cf2665af2b376f0b7f1/5fd99fbc290d5dc753ded178_sofia_pro_medium.otf') format('opentype');
font-weight : 500;
font-style : normal;
font-display : swap;
}@font-face {
font-family : 'Sofia Pro';
src : url('https://cdn.prod.website-files.com/5fd85cf2665af2b376f0b7f1/5fd99fbc0707e4c978560ae5_Sofia%20Pro%20Regular%20Az.otf') format('opentype');
font-weight : 400;
font-style : normal;
font-display : swap;
}@font-face {
font-family : 'Sofia Pro';
src : url('https://cdn.prod.website-files.com/5fd85cf2665af2b376f0b7f1/5fd99fbba48bb997b87d5079_sofia_pro_semi_bold.otf') format('opentype');
font-weight : 600;
font-style : normal;
font-display : swap;
}@font-face {
font-family : 'Sofia Pro';
src : url('https://cdn.prod.website-files.com/5fd85cf2665af2b376f0b7f1/5fd99fbb0a7f2a25d23f2e23_sofia_pro_bold.otf') format('opentype');
font-weight : 700;
font-style : normal;
font-display : swap;
}@font-face {
font-family : 'Sofia Pro';
src : url('https://cdn.prod.website-files.com/5fd85cf2665af2b376f0b7f1/5fe00a05db893598d2adf914_Sofia%20Pro%20Light%20Az.otf') format('opentype');
font-weight : 300;
font-style : normal;
font-display : swap;
}/* devanagari */
@font-face {
font-family : 'Poppins';
font-style : italic;
font-weight : 400;
src : url(https://fonts.gstatic.com/s/poppins/v15/pxiGyp8kv8JHgFVrJJLucXtAOvWDSHFF.woff2) format('woff2');
unicode-range : U+0900-097F, U+1CD0-1CF6, U+1CF8-1CF9, U+200C-200D, U+20A8, U+20B9, U+25CC, U+A830-A839, U+A8E0-A8FB;
}/* latin-ext */
@font-face {
font-family : 'Poppins';
font-style : italic;
font-weight : 400;
src : url(https://fonts.gstatic.com/s/poppins/v15/pxiGyp8kv8JHgFVrJJLufntAOvWDSHFF.woff2) format('woff2');
unicode-range : U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
}/* latin */
@font-face {
font-family : 'Poppins';
font-style : italic;
font-weight : 400;
src : url(https://fonts.gstatic.com/s/poppins/v15/pxiGyp8kv8JHgFVrJJLucHtAOvWDSA.woff2) format('woff2');
unicode-range : U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}/* devanagari */
@font-face {
font-family : 'Poppins';
font-style : italic;
font-weight : 600;
src : url(https://fonts.gstatic.com/s/poppins/v15/pxiDyp8kv8JHgFVrJJLmr19VFteOYktMqlap.woff2) format('woff2');
unicode-range : U+0900-097F, U+1CD0-1CF6, U+1CF8-1CF9, U+200C-200D, U+20A8, U+20B9, U+25CC, U+A830-A839, U+A8E0-A8FB;
}/* latin-ext */
@font-face {
font-family : 'Poppins';
font-style : italic;
font-weight : 600;
src : url(https://fonts.gstatic.com/s/poppins/v15/pxiDyp8kv8JHgFVrJJLmr19VGdeOYktMqlap.woff2) format('woff2');
unicode-range : U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
}/* latin */
@font-face {
font-family : 'Poppins';
font-style : italic;
font-weight : 600;
src : url(https://fonts.gstatic.com/s/poppins/v15/pxiDyp8kv8JHgFVrJJLmr19VF9eOYktMqg.woff2) format('woff2');
unicode-range : U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}/* devanagari */
@font-face {
font-family : 'Poppins';
font-style : normal;
font-weight : 400;
src : url(https://fonts.gstatic.com/s/poppins/v15/pxiEyp8kv8JHgFVrJJbecnFHGPezSQ.woff2) format('woff2');
unicode-range : U+0900-097F, U+1CD0-1CF6, U+1CF8-1CF9, U+200C-200D, U+20A8, U+20B9, U+25CC, U+A830-A839, U+A8E0-A8FB;
}/* latin-ext */
@font-face {
font-family : 'Poppins';
font-style : normal;
font-weight : 400;
src : url(https://fonts.gstatic.com/s/poppins/v15/pxiEyp8kv8JHgFVrJJnecnFHGPezSQ.woff2) format('woff2');
unicode-range : U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
}/* latin */
@font-face {
font-family : 'Poppins';
font-style : normal;
font-weight : 400;
src : url(https://fonts.gstatic.com/s/poppins/v15/pxiEyp8kv8JHgFVrJJfecnFHGPc.woff2) format('woff2');
unicode-range : U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}/* devanagari */
@font-face {
font-family : 'Poppins';
font-style : normal;
font-weight : 600;
src : url(https://fonts.gstatic.com/s/poppins/v15/pxiByp8kv8JHgFVrLEj6Z11lFd2JQEl8qw.woff2) format('woff2');
unicode-range : U+0900-097F, U+1CD0-1CF6, U+1CF8-1CF9, U+200C-200D, U+20A8, U+20B9, U+25CC, U+A830-A839, U+A8E0-A8FB;
}/* latin-ext */
@font-face {
font-family : 'Poppins';
font-style : normal;
font-weight : 600;
src : url(https://fonts.gstatic.com/s/poppins/v15/pxiByp8kv8JHgFVrLEj6Z1JlFd2JQEl8qw.woff2) format('woff2');
unicode-range : U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
}/* latin */
@font-face {
font-family : 'Poppins';
font-style : normal;
font-weight : 600;
src : url(https://fonts.gstatic.com/s/poppins/v15/pxiByp8kv8JHgFVrLEj6Z1xlFd2JQEk.woff2) format('woff2');
unicode-range : U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}.jotform-form * {
font-family : 'Sofia Pro';
font-weight : 400;
color : #144d60;
border-radius: 0;
}.supernova .form-all {
box-shadow: none;
}.form-textbox,
.form-textarea,
.form-dropdown {
padding : .75rem;
margin-bottom : .25rem;
font-size : 1em;
}.form-textbox,
.form-textarea,
.form-captcha input {
border-color : #144d60;
}[data-type="control_textbox"] .form-input,
[data-type="control_textarea"] .form-input,
[data-type="control_fullname"] .form-input,
[data-type="control_phone"] .form-input,
[data-type="control_datetime"] .form-input,
[data-type="control_address"] .form-input,
[data-type="control_email"] .form-input,
[data-type="control_passwordbox"] .form-input,
[data-type="control_autocomp"] .form-input,
[data-type="control_textbox"] .form-input-wide,
[data-type="control_textarea"] .form-input-wide,
[data-type="control_fullname"] .form-input-wide,
[data-type="control_phone"] .form-input-wide,
[data-type="control_datetime"] .form-input-wide,
[data-type="control_address"] .form-input-wide,
[data-type="control_email"] .form-input-wide,
[data-type="control_passwordbox"] .form-input-wide,
[data-type="control_autocomp"] .form-input-wide {
max-width : 100%;
}.form-line.form-line-active {
background: white;
}.form-input-wide>div {
display : flex;
}.form-line[data-type="control_address"] div {
flex-wrap: wrap;
}.form-input-wide>div input {
max-width : calc(100% - 10px);
margin-right : 5px;
}.form-address-line .form-sub-label-container {
width: calc(90% - 10px);
margin-right: 10px;
}.form-single-column .form-checkbox-item, .form-single-column .form-radio-item {
width: auto;
margin-right: 5px;
}@media screen and (max-width: 480px){
.form-input-wide>div {
flex-wrap: wrap;
}
.form-input-wide>div input,
.form-address-line .form-sub-label-container,
[data-type=control_fullname] .form-sub-label-container:first-child,
.form-line[data-type="control_fullname"] .form-sub-label-container {
max-width: 100%;
margin-right: 0;
}
.form-line, .form-line.form-line-column {
padding: 2% 0;
}}.submit-button.jf-form-buttons {
margin : 0;
color : #fff;
font-size : 12px;
line-height : 17px;
font-family : 'Sofia Pro';
font-weight : 400;
letter-spacing : .2em;
font-style : normal;
text-transform : uppercase;
text-decoration : none;
display : inline-block;
border : 2px solid #144d60;
background : #144d60;
padding : 15px 30px;
-webkit-transition : .3s;
transition : .3s;
border-radius : 0;
text-shadow : none;
box-shadow : none;
}.submit-button.jf-form-buttons:hover {
background : #fff;
color : #144d60;
}