Forms

Default (vertical)

The default form is stacked vertically (labels above inputs).

Example:

1. Fieldset title

  • There is space for notes here.

Code:

<form>
 <fieldset>
  <h3>Fieldset title</h3>
   <ul>
    <li>
     <label for="example-1">Label:</label>
     <input name="example-1" id="example-1" type="text" tabIndex="1">
    </li>
    <li>
     <label for="example-2">Label:</label>
     <select name="example-2" id="example-2" tabIndex="2">
      <option value="" selected="selected">Select</option>
      <option value="1">Option 1</option>
      <option value="2">Option 2</option>
     </select>
    </li>
    <li>
     <label for="example-3">Label:</label>
     <textarea name="example-3" id="example-3" cols="20" rows="6" tabIndex="3"></textarea>
    </li>
    <li>
     <input name="example-4" id="example-4" type="checkbox" value="1" tabindex="4">
     <label for="example-4">Example of a checkbox label</label>
    </li>
   </ul>
 </fieldset>
 <fieldset class="fieldset-submit">
  <ul>
   <li>There is space for notes here.</li>
   <li>
    <input type="submit" value="Submit" tabindex="5">
   </li> 
  </ul>
 </fieldset>
</form>

Buttons

The main button style can be used in form submission buttons and other important call to actions. Apply using the class .link-cta-ubuntu.

Example:

Main button

Code:

<a href="#" class="link-cta-ubuntu">Main button</a>

Note: Avoid using more than one call to action button per page.

Inverted button

On full-orange and full-aubergine rows, you can use the class .link-cta-inverted to invert the colours of the button and give it a white background.

Example:


Code:

<a href="#" class="link-cta-inverted">Inverted button</a>

Large buttons

Where a large button is needed (for example, download pages or homepages), use the class .cta-large on any button style to increase font and padding size.

Example:

Large Ubuntu button


Code:

<a href="#" class="link-cta-ubuntu cta-large">Large Ubuntu button</a>

Deactivated button

If necessary, apply using the class .cta-deactivated.

Example:

Deactivated button

Code:

<a href="#" class="link-cta-ubuntu cta-deactivated">Deactivated button</a>