Forms

Appearance of form elements

Buttons have been seen previously. Form elements are kept simple. Here is an example form containing some of them:

Fruit --please select-- Apple Orange Banana Papaya Other

Name

Email

Phone

Widget type: Recusandae Blanditis Excepturi

Message

I agree to the terms and conditions

Send Reset Disabled

One thing to note here is that the reset button has a bg-error class so as to make it red, and most elements have been placed into a grid or into columns using the grid and cols classes. Both of these will be discussed later.

Outlined button variants: