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;
}