<form action="#" method="post" class="onboarding-form">
<h1>Onboarding form</h1>
<div class="form-item ">
<label for="c77b0838-e11b-c1f0-ab90-dd39641ba2fd">
Input field
</label>
<input type="text" id="c77b0838-e11b-c1f0-ab90-dd39641ba2fd" value="">
</div>
<div class="submit-area ">
<button type="button">
<span>
<span>Submit</span>
</span>
</button>
</div>
</form>
<form action="#" method="post" class="onboarding-form">
{{#> @partial-block}}
<h1>Onboarding form</h1>
{{> @form-item-input id=(random)}}
{{> @submit-area}}
{{/ @partial-block}}
</form>
{
"label": "Input field",
"submit-button": {
"text": "Submit"
}
}
/**
* Onboarding form
*
* Used for login & registration forms
*/
@media screen {
.onboarding-form {
max-width: 20rem;
margin: 0 auto;
}
}
A basic form element that is centered with a pre-configured max-width.