1. Brand

2. Typography

2.1 Body Text

Bacon ipsum dolor amet cupim alcatra tri-tip strip steak pork chop pastrami pig cow. Frankfurter pork loin spare ribs meatloaf, jowl bacon boudin beef capicola. Pork chop meatloaf salami picanha spare ribs chicken ground round strip steak landjaeger burgdoggen turducken tenderloin pastrami rump ham. Burgdoggen swine capicola drumstick cupim shoulder. Sausage corned beef swine beef meatloaf biltong andouille short ribs tail t-bone flank. Cow pork loin alcatra, fatback strip steak flank doner salami. T-bone meatloaf venison cupim tri-tip ribeye jerky.

<p>Bacon ipsum dolor amet cupim alcatra tri-tip strip steak pork chop pastrami pig cow. Frankfurter pork loin spare ribs meatloaf, jowl bacon boudin beef capicola. Pork chop meatloaf salami picanha spare ribs chicken ground round strip steak landjaeger burgdoggen turducken tenderloin pastrami rump ham. Burgdoggen swine capicola drumstick cupim shoulder. Sausage corned beef swine beef meatloaf biltong andouille short ribs tail t-bone flank. Cow pork loin alcatra, fatback strip steak flank doner salami. T-bone meatloaf venison cupim tri-tip ribeye jerky.</p>

2.2 Colours

2.3 Headings

<h1>h1. Heading 1</h1>

<h2>h2. Heading 2</h2>

<h3>h3. Heading 3</h3>

<h4>h4. Heading 4</h4>

<h5>h5. Heading 5</h5>

<h6>h6. Heading 6</h6>

3. Colour Palette

4. Forms

4.1 Form Controls

<form action="" method="get" class="form">
  <div class="form__field">
    <label for="example-text-input">Text Input</label>
    <input id="example-text-input" type="text" placeholder="Text Here"/>
  </div>
  <div class="form__field">
    <label for="example-disabled-input">Disabled Input</label>
    <input id="example-disabled-input" type="text" placeholder="Text Here" disabled/>
  </div>
  <div class="form__field">
    <label for="example-email-input">Email Input</label>
    <input id="example-email-input" type="email" placeholder="Email Here">
  </div>
  <div class="form__field">
    <label for="example-password-input">Password Input</label>
    <input id="example-password-input" type="password" placeholder="Password Here">
  </div>
  <div class="form__field">
    <label for="example-form-control-select">Select</label>
    <select id="example-form-control-select">
      <option>1</option>
      <option>2</option>
      <option>3</option>
      <option>4</option>
      <option>5</option>
    </select>
  </div>
  <div data-vue="design-guide">
    <div class="form__field">
      <dropdown
        label="Color"
        :value="{title: 'Red', value: 'red'}"
        :options="[
          {title: 'Red', value: 'red'},
          {title: 'Green', value: 'green'},
          {title: 'Blue', value: 'blue'}
        ]"
        :settings="{
          searchable: false,
          clearable: false,
          clearSearchOnSelect: false,
          placeholder: 'Select your color'
        }">
        <template #selected="{ option }">
          <span class="option option--color" :style="`--color:${option.value}`" v-text="option.title"></span>
        </template>
        <template #options="{ option }">
          <span class="option option--color" :style="`--color:${option.value}`" v-text="option.title"></span>
        </template>
      </dropdown>
    </div>
    <div class="form__field">
      <dropdown
        v-if="false"
        label="Multi-Color"
        v-model="value"
        :value="{title: 'Red', value: 'red'}"
        :options="[
          {title: 'Red', value: 'red'},
          {title: 'Green', value: 'green'},
          {title: 'Blue', value: 'blue'}
        ]"
        :settings="{
          searchable: false,
          multiple: true,
          placeholder: 'Select your colors'
        }">
        <template #selected="{ option }">
          <span class="option option--color" :style="`--color:${option.value}`" v-text="option.title"></span>
        </template>
        <template #options="{ option }">
          <span class="option option--color" :style="`--color:${option.value}`" v-text="option.title"></span>
        </template>
      </dropdown>
    </div>
  </div>
  <div class="form__field">
    <label for="example-form-control-textarea1">Example textarea</label>
    <textarea id="example-form-control-textarea1" rows="3"></textarea>
  </div>
  <div class="form__field">
    <label for="minimal-text-input">Text Input</label>
    <input class="minimal" id="minimal-text-input" type="text" placeholder="Text Here"/>
  </div>
  <div class="form__field">
    <label for="helper-text-input">Helper Input</label>
    <input class="minimal" id="helper-text-input" type="text" placeholder="Text Here"/>
    <span class="message">Optional Helper Text</span>
  </div>
  <div class="form__field">
    <label for="icon-text-input">Icon Input</label>
    <div class="input input--icon">
      <input class="minimal" id="icon-text-input" type="text" placeholder="Text Here"/>
      <span class="icon icon--chevron-right" aria-hidden="true"></span>
    </div>
  </div>
  <div class="form__field">
    <label for="disabled-text-input">Disabled Input</label>
    <input class="minimal" id="disabled-text-input" type="text" placeholder="Text Here" disabled/>
  </div>
  <div class="form__field">
    <label for="minimal-email-input">Email Input</label>
    <input class="minimal" id="minimal-email-input" type="email" placeholder="Email Here">
    <span class="message message--error">Invalid email</span>
  </div>
  <div class="form__field">
    <label for="minimal-password-input">Password Input</label>
    <input class="minimal" id="minimal-password-input" type="password" placeholder="Password Here">
  </div>
  <div class="form__field">
    <label>
      <input type="checkbox" value="">
      Check this out! Example checkbox
    </label>
  </div>
  <div class="form__field">
    <label>
      <input type="checkbox" value="" disabled>
      Disabled checkbox
    </label>
  </div>
  <div class="form__field">
    <label>
      <input type="radio" name="exampleRadios" id="example-radios1" value="option1" checked>
      Example Radio Button 1
    </label>
    <label>
      <input type="radio" name="exampleRadios" id="example-radios2" value="option2">
      Example Radio Button 2
    </label>
    <label>
      <input type="radio" name="exampleRadios" id="example-radios3" value="option3" disabled>
      Disabled Radio Button 3
    </label>
  </div>
  <div class="form__field">
    <input class="option option--pill" type="radio" name="pillRadios" id="pill-radios1" value="option1" checked>
    <label for="pill-radios1">Option 1</label>
    <input class="option option--pill" type="radio" name="pillRadios" id="pill-radios2" value="option2">
    <label for="pill-radios2">Option 2</label>
    <input class="option option--pill" type="radio" name="pillRadios" id="pill-radios3" value="option3" disabled>
    <label for="pill-radios3">Option 3</label>
  </div>
</form>

4.2 Validation States

5. Buttons

<a href="#" role="button">Link</a>
<a href="#" class="action action--primary" role="button">Button Link</a>
<button type="button" class="action action--primary">Primary</button>
<button type="button" class="action action--secondary">Secondary</button>
<button type="button" class="action action--tertiary">Tertiary</button>
<button type="button" class="action action--link">Link</button>
<button type="button" disabled>Disabled</button>
<button type="submit">Submit</button>
<input type="button" value="Input">
<input type="submit" value="Submit">
<input type="reset" value="Reset">

6. Components

7. Spacing

8. Iconography

9. Imagery

Static

Lazy Loaded with srcset

10. Dos and Don'ts