UI Elements

Edit the variables within the variables panel to the change affect the entire library. Here you can also gain a quick overview of all the variables you are currently using in your project.

Buttons

Note: Use SVG in <embed> with {{fill="currentColor"}} for icon buttons
Button
(hover and focus states included)
class
button
Button
class
button .is-small
Button
class
button .is-icon
Button
class
button .is-secondary
Button
class
button .is-secondary .is-small
Button
class
button .is-secondary .is-icon
Button
class
button .is-tertiary
Button
class
button .is-tertiary .is-small
Button
class
button .is-tertiary .is-icon
Button
class
button .is-link
Button
class
button .is-link .is-icon
Button
Button Hover States
variable
button-hover-primary
Button
variable
button-hover-secondary
Button
variable
button-hover-tertiary
Button
Button Focus States
class
button
Button
class
button .is-secondary
Button
class
button .is-tertiary
Button
class
button .is-link
Button
Button Group
class
button-group
ButtonButton

Category Tags

class
category-tag
Category Tag
Category Tag

Icon Size

Icons are sourced from the open source Box Icons collection. Access versions of these icons which have been formatted for Webflow at Relume Icons.
Note: Use SVG in <embed> with {{fill="currentColor"}} for icon buttons
class
icon-1x1-xsmall
class
icon-1x1-small
class
icon-1x1-medium
class
icon-1x1-large

Form Elements

Inputs
class
form_field-label
.form_field-label
class
form_input
class
form_input .is-select-input
Text Area
class
form_input .is-text-area
Checkbox/Radio
class
form_checkbox
class
form_checkbox-icon
class
form_checkbox-label
class
form_radio
class
form_radio-icon
class
form_radio-label
Thank you! Your submission has been received!
Oops! Something went wrong while submitting the form.

HubSpot Form Elements in Webflow

This page represents HTML structure of some of the HubSpot form elements, use the power of Webflow designer to define CSS styles for a raw HubSpot form embed.

Some Form Elements
hs-form
form-columns-1
form-columns-2
hs-form is main form class.
form-columns-1 is class of wrapper with 1 column for inputs.
form-columns-2 is class of wrapper with 2 columns for inputs.
input and label
hs-input
Field Description / Help text
hs-field-desc
This is help text for the field
Field error message
hs-error-msgs inputs-list
hs-error-msg
  • Error message label
hs-error-msgs inputs-list is an HTML list element.
hs-error-msg is a text span inside HTML List Item element.
Text area Input
hs-input hs-fieldtype-textarea
hs-fieldtype-textarea is added as combo class.
Checkboxes
hs-form-booleancheckbox
hs-form-booleancheckbox-display
inputs-list
hs-input
Note: HubSpot uses basic HTML checkboxes, Webflow checkboxes work differently than the default HTML checkboxes, hence in order to style HubSpot checkboxes you need custom CSS.
you can use Webflow checkbox to style and then copy CSS from it.
Radio Buttons
inputs-list
hs-form-radio
hs-form-radio-display
inputs-list
hs-input
Success message
submitted-message
This is form success message
RecaptCHA
hs-recaptcha
Submit button
hs_submit
hs-button
Thank you! Your submission has been received!
Oops! Something went wrong while submitting the form.

Live Example

Webflow Form

Thank you! Your submission has been received!
Oops! Something went wrong while submitting the form.

HubSpot form

Please insert your own HubSpot code inside the embed :)

Success!

Thank you! We have received your submission.