Digital Style Guide

Welcome to the digital style guide for your brand.

Forms #

Checkboxes

(↓) Download | </> Show code

<label><input type="checkbox" name="name" value="value">Static</label>
<label><input type="checkbox" name="name" value="value" checked="checked">Selected</label>
<label><input type="checkbox" name="name" value="value" disabled="disabled">Disabled</label>

Dropdown

(↓) Download | </> Show code

<select>
	<option>This is a dropdown</option>
	<option>Option 1</option>
	<option>Option 2</option>
	<option>Option 3</option>
</select>

Input text

(↓) Download | </> Show code

<div class="form__field">
    <input placeholder="This is a static input field" name="name" type="text">
</div>
<div class="form__field">
    <input placeholder="This is a required input field" name="name" type="text" required>
</div>
<div class="form__field">
    <input placeholder="This is a disabled input field" name="name" type="text" disabled>
</div>

Radio buttons

(↓) Download | </> Show code

<label><input type="radio" name="name" value="value">Static</label>
<label><input type="radio" name="name" value="value" checked="checked">Selected</label>
<label><input type="radio" name="name" value="value" disabled="disabled">Disabled</label>

Textarea

(↓) Download | </> Show code

<textarea cols="50" rows="5" name="name">This is some copy within a text area</textarea>