diff --git a/pages/_includes/cards/form/layout.html b/pages/_includes/cards/form/layout.html
new file mode 100644
index 000000000..51ba06422
--- /dev/null
+++ b/pages/_includes/cards/form/layout.html
@@ -0,0 +1,59 @@
+{% assign horizontal = include.horizontal | default: false %}
+<div class="card">
+	<div class="card-header">
+		<h3 class="card-title">{{ include.title | default: 'Basic form' }}</h3>
+	</div>
+	<div class="card-body">
+		<form>
+			<div class="form-group mb-3 {% if horizontal %}row{% endif %}">
+				<label class="form-label{% if horizontal %} col-3 col-form-label{% endif %}">Email address</label>
+				<div {% if horizontal %}class="col"{% endif %}>
+					<input type="email" class="form-control" aria-describedby="emailHelp" placeholder="Enter email">
+					<small class="form-hint">We'll never share your email with anyone else.</small>
+				</div>
+			</div>
+
+			<div class="form-group mb-3 {% if horizontal %}row{% endif %}">
+				<label class="form-label{% if horizontal %} col-3 col-form-label{% endif %}">Password</label>
+				<div {% if horizontal %}class="col"{% endif %}>
+					<input type="password" class="form-control" placeholder="Password">
+					<small class="form-hint">
+						Your password must be 8-20 characters long, contain letters and numbers, and must not contain
+						spaces, special characters, or emoji.
+					</small>
+				</div>
+			</div>
+
+			<div class="form-group mb-3 {% if horizontal %}row{% endif %}">
+				<label class="form-label{% if horizontal %} col-3 col-form-label{% endif %}">Select</label>
+				<div {% if horizontal %}class="col"{% endif %}>
+					<select class="form-select">
+						<option>Option 1</option>
+					</select>
+				</div>
+			</div>
+
+			<div class="form-group {% if horizontal %}row{% else %}mb-3{% endif %}">
+				<label class="form-label{% if horizontal %} col-3 col-form-label pt-0{% endif %}">Checkboxes</label>
+				<div {% if horizontal %}class="col"{% endif %}>
+					<label class="form-check">
+						<input class="form-check-input" type="checkbox" checked="">
+						<span class="form-check-label">Option 1</span>
+					</label>
+					<label class="form-check">
+						<input class="form-check-input" type="checkbox">
+						<span class="form-check-label">Option 2</span>
+					</label>
+					<label class="form-check">
+						<input class="form-check-input" type="checkbox" disabled="">
+						<span class="form-check-label">Option 3</span>
+					</label>
+				</div>
+			</div>
+
+			<div class="form-footer">
+				<button type="submit" class="btn btn-primary">Submit</button>
+			</div>
+		</form>
+	</div>
+</div>
\ No newline at end of file
diff --git a/pages/_includes/parts/form/select.html b/pages/_includes/parts/form/select.html
index 4fbecb50e..6115d6cc8 100644
--- a/pages/_includes/parts/form/select.html
+++ b/pages/_includes/parts/form/select.html
@@ -1,9 +1,9 @@
 {% assign options = include.options | default: "One,Two,Three" | split: "," %}
 <div class="mb-3">
-   <div class="form-label">{{ include.label | default: 'Select' }}</div>
-   <select class="form-select"{% if include.multiple %} multiple{% endif %}>
-	   {% for option in options %}
-      <option value="{{ forloop.index }}">{{ option }}</option>
-	   {% endfor %}
-   </select>
+	<div class="form-label">{{ include.label | default: 'Select' }}</div>
+	<select class="form-select" {% if include.multiple %} multiple{% endif %}>
+		{% for option in options %}
+		<option value="{{ forloop.index }}">{{ option }}</option>
+		{% endfor %}
+	</select>
 </div>
diff --git a/pages/form-elements.html b/pages/form-elements.html
index 5a394bfe1..1e206a8ed 100644
--- a/pages/form-elements.html
+++ b/pages/form-elements.html
@@ -40,4 +40,12 @@ menu: forms
 			</div>
 		</form>
 	</div>
+
+	<div class="col-md-6">
+		{% include cards/form/layout.html %}
+	</div>
+
+	<div class="col-md-6">
+		{% include cards/form/layout.html horizontal=true title="Horizontal form" %}
+	</div>
 </div>
diff --git a/pages/tmp3.html b/pages/tmp3.html
index dc2386690..80c1c28b8 100644
--- a/pages/tmp3.html
+++ b/pages/tmp3.html
@@ -2,200 +2,11 @@
 ---
 
 <div class="row">
-
 	<div class="col-md-6">
-		<div class="card">
-			<div class="card-header"><strong>Basic form</strong></div>
-			<div class="card-body">
-				<form>
-					<div class="form-group mb-3"><label class="text-muted">Email
-							address</label><input type="email" class="form-control" aria-describedby="emailHelp"
-							placeholder="Enter email"> <small class="form-text text-muted">We'll never share
-							your email with anyone else.</small></div>
-					<div class="form-group mb-3"><label class="text-muted">Password</label><input type="password"
-							class="form-control" placeholder="Password"> <small class="d-block form-text text-muted"
-							style="line-height: 1.42;">
-							Your password must be 8-20 characters long,contain letters and numbers, and must not contain
-							spaces, special characters, or emoji.</small>
-					</div>
-					<div class="form-group mb-3">
-						<div class="form-check"><input type="checkbox" class="form-check-input"><label
-								class="form-check-label">Check me out</label></div>
-					</div><button type="submit" class="btn btn-primary">Submit</button>
-				</form>
-			</div>
-		</div>
+		{% include cards/form/layout.html %}
 	</div>
 
 	<div class="col-md-6">
-		<div class="card">
-			<div class="card-header"><strong>Horizontal form</strong></div>
-			<div class="card-body">
-				<form>
-					<div class="form-group row mb-3"><label class="col-sm-3 col-form-label text-muted">Email</label>
-						<div class="col-sm-9"><input type="email" class="form-control" placeholder="Email">
-						</div>
-					</div>
-					<div class="form-group row mb-3"><label class="col-sm-3 col-form-label text-muted">Password</label>
-						<div class="col-sm-9"><input type="password" class="form-control" placeholder="Password"></div>
-					</div>
-					<div class="form-group row mb-3"><label class="col-sm-3 col-form-label text-muted">Select</label>
-						<div class="col-sm-9"><select class="form-control">
-								<option>Choose...</option>
-							</select></div>
-					</div>
-					<div class="form-group mb-3">
-						<div class="row">
-							<div class="col-sm-3 col-form-label pt-0 text-muted">Radios</div>
-							<div class="col-sm-9">
-								<div class="form-check">
-									<input class="form-check-input" type="radio" name="radios" value="option1" checked>
-									Option one is this and that
-								</div>
-								<div class="form-check">
-									<input class="form-check-input" type="radio" name="radios" value="option2"> Option two can be
-									something else
-								</div>
-							</div>
-						</div>
-					</div>
-					<div class="form-group row mb-3">
-						<div class="col-sm-3 col-form-label pt-0 text-muted">Checkbox</div>
-						<div class="col-sm-9">
-							<div class="form-check"><label class="form-check-label"><input class="form-check-input"
-										type="checkbox"> Check me out</label></div>
-						</div>
-					</div><button type="submit" class="btn btn-primary mt-1">Submit</button>
-				</form>
-			</div>
-		</div>
+		{% include cards/form/layout.html horizontal=true title="Horizontal form" %}
 	</div>
-
-	<div class="col-lg-12">
-		<div class="card">
-			<div class="card-header"><strong>Column sizing</strong></div>
-			<div class="card-body">
-				<div class="row row-sm">
-					<div class="col-3"><input type="text" class="form-control" placeholder=".col-3"></div>
-					<div class="col-4"><input type="text" class="form-control" placeholder=".col-4"></div>
-					<div class="col-5"><input type="text" class="form-control" placeholder=".col-5"></div>
-				</div>
-			</div>
-		</div>
-		<div class="card">
-			<div class="card-header"><strong>Inline form</strong></div>
-			<div class="card-body">
-				<form class="form-inline" role="form"><label class="sr-only">Name</label><input type="text"
-						class="form-control mb-2 mr-sm-2" placeholder="Jane Doe"><label class="sr-only">Username</label>
-					<div class="input-group mb-2 mr-sm-2">
-						<div class="input-group">
-							<div class="input-group-prepend">
-								<span class="input-group-text">@</span>
-							</div>
-							<input type="text" class="form-control" placeholder="username" value="">
-						</div>
-					</div>
-					<div class="form-check mb-2 mr-sm-2"><input class="form-check-input" type="checkbox"><label
-							class="form-check-label">Remember me</label>
-					</div><button type="submit" class="btn btn-primary mb-2">Sign in</button>
-				</form>
-			</div>
-		</div>
-	</div>
-
-	<div class="col-md-6">
-		<div class="card">
-			<div class="card-header"><strong>Billing form</strong></div>
-			<div class="card-body">
-				<form>
-					<div class="form-row mb-3">
-						<div class="form-group col-md-6"><label class="text-muted">First Name</label><input type="text"
-								class="form-control" placeholder="First name"></div>
-						<div class="form-group col-md-6"><label class="text-muted">Last Name</label><input type="text"
-								class="form-control" placeholder="Last name"></div>
-					</div>
-					<div class="form-row mb-3">
-						<div class="form-group col-md-6"><label class="text-muted">Email</label><input type="email"
-								class="form-control" placeholder="Email"></div>
-						<div class="form-group col-md-6"><label class="text-muted">Password <small>(Register
-									account)</small></label><input type="password" class="form-control" placeholder="Password">
-						</div>
-					</div>
-					<div class="form-group mb-3"><label class="text-muted">Address</label><input type="text"
-							class="form-control" placeholder="1234 Main St"></div>
-					<div class="form-row mb-3">
-						<div class="form-group col-md-6"><label class="text-muted">City</label><input type="text"
-								class="form-control"></div>
-						<div class="form-group col-md-4"><label class="text-muted d-block">State</label>
-							<select class="form-control"><option selected="selected">Choose...</option><option>...</option></select>
-						</div>
-						<div class="form-group col-md-2"><label class="text-muted">Zip</label><input type="text"
-								class="form-control"></div>
-					</div><button type="submit" class="btn btn-primary">Submit</button>
-				</form>
-			</div>
-		</div>
-	</div>
-
-	<div class="col-md-6">
-		<div class="card">
-			<div class="card-header"><strong>Event form</strong></div>
-			<div class="card-body">
-				<form>
-					<div class="form-group row mb-3"><label class="col-sm-3 col-form-label text-muted">Title</label>
-						<div class="col-sm-9"><input type="text" class="form-control" placeholder="Title">
-						</div>
-					</div>
-					<div class="form-group row mb-3"><label class="col-sm-3 col-form-label text-muted">Event type</label>
-						<div class="col-sm-9">
-							<div class="mt-2">
-								<div class="form-check form-check-inline">
-									<input class="form-check-input" type="radio" name="radio2" value="Appointment">
-									<label class="form-check-label">Appointment</label>
-								</div>
-								<div class="form-check form-check-inline">
-									<input class="form-check-input" type="radio" name="radio2" value="Event">
-									<label class="form-check-label">Event</label>
-								</div>
-								<div class="form-check form-check-inline">
-									<input class="form-check-input" type="radio" name="radio2" value="Important">
-									<label class="form-check-label">Important</label>
-								</div>
-							</div>
-						</div>
-					</div>
-					<div class="form-group row"><label class="col-sm-3 col-form-label text-muted">Start</label>
-						<div class="col-sm-4 mb-3"><input type="text" class="form-control" placeholder="Date"></div>
-						<div class="col-sm-4 mb-3"><input type="text" class="form-control" placeholder="Time"></div>
-					</div>
-					<div class="form-group row"><label class="col-sm-3 col-form-label text-muted">End</label>
-						<div class="col-sm-4 mb-3"><input type="text" class="form-control" placeholder="Date">
-						</div>
-						<div class="col-sm-4 mb-3"><input type="text" class="form-control" placeholder="Time">
-						</div>
-					</div>
-					<div class="form-group row mb-3"><label class="col-sm-3 col-form-label text-muted">Participate</label>
-						<div class="col-sm-9">
-							<div class="d-flex">
-								<div class="avatar-list avatar-list-stacked">
-									{% for person in site.data.people limit: 5 offset: 30 %}
-									{% include ui/avatar.html person=person element="a" %}
-									{% endfor %}
-								</div>
-								<a href="#"
-									class="btn btn-pill btn-icon btn-primary ml-3">{% include ui/icon.html icon="plus" %}</a>
-							</div>
-						</div>
-					</div>
-					<div class="form-group row mb-3"><label class="col-sm-3 col-form-label text-muted">Description</label>
-						<div class="col-sm-9"><textarea class="form-control" rows="6"></textarea></div>
-					</div>
-					<div class="form-group row"><label class="col-sm-3"></label>
-						<div class="col-sm-9"><button type="button" class="btn btn-primary btn-pill">Save</button></div>
-					</div>
-				</form>
-			</div>
-		</div>
-	</div>
-
 </div>
\ No newline at end of file
diff --git a/scss/ui/_forms.scss b/scss/ui/_forms.scss
index 14e4b842a..a307c0dc2 100644
--- a/scss/ui/_forms.scss
+++ b/scss/ui/_forms.scss
@@ -26,14 +26,27 @@ Form label
 Form hint
  */
 .form-hint {
+  display: block;
   font-size: $small-font-size;
   color: $text-muted;
-  margin: 0 0 .75rem;
   line-height: $line-height-sm;
 
+  &:last-child {
+    margin-bottom: 0;
+  }
+
+  & + .form-control {
+    margin-top: .25rem;
+  }
+
   .form-label + & {
     margin-top: -.5rem;
   }
+
+  .form-control + &,
+  .form-select + & {
+    margin-top: .25rem;
+  }
 }
 
 /**