Form

The form layout should only be used when dealing with forms, not any other use case is valid. Everything should be wrapped with a <form>. Each has input fields which are wrapped within an l-form__grid in combination with the l-grid l-grid--with-spacing component. For consistency these form input fields are always wrapped using the l-grid layout component. Each submit button should be placed at the end of the form, in a l-form__footer element.

A form can be split up in <fieldset>, each fieldset is required to have a <legend>. A <legend> cannot exist without a <fieldset>. These will always be used together.

Default

px 

			
				<form class="l-form">
	l-form
	<div class="l-form__grid">
		<div class="l-grid l-grid--with-spacing">
			<div class="l-grid__col-12-12">l-form__grid l-grid l-grid--with-spacing</div>
			<div class="l-grid__col-6-12">l-grid__col-6-12</div>
			<div class="l-grid__col-6-12">l-grid__col-6-12</div>
			<div class="l-grid__col-4-12">l-grid__col-4-12</div>
			<div class="l-grid__col-4-12">l-grid__col-4-12</div>
			<div class="l-grid__col-4-12">l-grid__col-4-12</div>
		</div>
	</div>
	<div class="l-form__grid">
		<div class="l-grid l-grid--with-spacing">
			<div class="l-grid__col-12-12">l-form__grid l-grid l-grid--with-spacing</div>
			<div class="l-grid__col-6-12">l-grid__col-6-12</div>
			<div class="l-grid__col-6-12">l-grid__col-6-12</div>
			<div class="l-grid__col-3-12">l-grid__col-3-12</div>
			<div class="l-grid__col-3-12">l-grid__col-3-12</div>
			<div class="l-grid__col-6-12">l-grid__col-6-12</div>
		</div>
	</div>
	<div class="l-form__footer">
		l-form__footer
	</div>
</form>

With fieldsets

px 

			
				<form class="l-form">
	l-form
	<fieldset class="l-form__fieldset">
		l-form__fieldset
		<legend class="l-form__fieldset-title">l-form__fieldset-title</legend>
		<div class="l-form__grid">
			<div class="l-grid l-grid--with-spacing">
				<div class="l-grid__col-12-12">l-form__grid l-grid l-grid--with-spacing</div>
				<div class="l-grid__col-6-12">l-grid__col-6-12</div>
				<div class="l-grid__col-6-12">l-grid__col-6-12</div>
				<div class="l-grid__col-4-12">l-grid__col-4-12</div>
				<div class="l-grid__col-4-12">l-grid__col-4-12</div>
				<div class="l-grid__col-4-12">l-grid__col-4-12</div>
			</div>
		</div>
	</fieldset>
	<fieldset class="l-form__fieldset">
		l-form__fieldset
		<legend class="l-form__fieldset-title">l-form__fieldset-title</legend>
		<div class="l-form__grid">
			<div class="l-grid l-grid--with-spacing">
				<div class="l-grid__col-12-12">l-form__grid l-grid l-grid--with-spacing</div>
				<div class="l-grid__col-6-12">l-grid__col-6-12</div>
				<div class="l-grid__col-6-12">l-grid__col-6-12</div>
				<div class="l-grid__col-3-12">l-grid__col-3-12</div>
				<div class="l-grid__col-3-12">l-grid__col-3-12</div>
				<div class="l-grid__col-6-12">l-grid__col-6-12</div>
			</div>
			</dov>
	</fieldset>
	<div class="l-form__footer">
		l-form__footer
	</div>
</form>