Buttons & Forms

Buttons and Form elements have a top level class (style) and are expanded to differing styles through the use of combo classes. Edit the top level class first to define common styles.

Buttons

There are four pre-set button classes available. The baseline .button class is where the designer should make common button style decisions, and then define specific variants based off this through combo classes (.is--light etc.) The designer is encouraged to create further variants as needed following the same process.

Regular

.button

Forms

Forms, form fields, and form text areas can be edited below. Specific form field styling should be defined on the baseline .c-text-input class (height, hover state, corner radius etc.), with edits to the .is--text-area combo to define more specific style choices, such as height.

Standard form elements

Max file size 10MB.
Uploading...
fileuploaded.jpg
Upload failed. Max size for files is 10 MB.
Thank you! Your submission has been received!
Oops! Something went wrong while submitting the form.

Custom form elements

Implementation tip
Use a custom select to use different styling from the browser's default select field styling, e.g. different arrow graphic, different border radius, different padding.

There is an Embed element as a sibling to the custom select element above. To use custom selects in your project, copy this Embed element and place it at the top of your site's Header symbol. This will disable the browser's default styling both inside the Designer and on the published site.


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