Just.Design System

v0.0.28

Introduction Approach and team

Guidelines

Assets Colour Palette Colour Usage Colour Usage - Coral Fonts Icons Typography

Components

Button Checkbox Date Dropdown Input Keyline Link Radio

Patterns

Footer Grid Header Modal

Downloads FAQ

Dropdown

Default

Choose a Plan:

Code

<label>Choose a Plan:</label>

<select class="dropdown">
    <option value=""></option>
    <option value="dog">FPP</option>
    <option value="cat">Aviva</option>
    <option value="hamster">Just</option>
    <option value="parrot">Wayne Enterprises</option>
    <option value="spider">Luthorcorp</option>
    <option value="goldfish">Queen Inc.</option>
</select>

Activated

Choose a Plan:

<label>Choose a Plan:</label>

<select class="dropdown dropdown--active">
    <option value=""></option>
    <option value="dog">FPP</option>
    <option value="cat">Aviva</option>
    <option value="hamster">Just</option>
    <option value="parrot">Wayne Enterprises</option>
    <option value="spider">Luthorcorp</option>
    <option value="goldfish">Queen Inc.</option>
</select>

Hover

Choose a Plan:

<label>Choose a Plan:</label>

<select class="dropdown dropdown--hover">
    <option value=""></option>
    <option value="dog">FPP</option>
    <option value="cat">Aviva</option>
    <option value="hamster">Just</option>
    <option value="parrot">Wayne Enterprises</option>
    <option value="spider">Luthorcorp</option>
    <option value="goldfish">Queen Inc.</option>
</select>

Error

Choose a Plan:

Inline error message

<label>Choose a Plan:</label>

<select class="dropdown dropdown--error">
    <option value=""></option>
    <option value="dog">FPP</option>
    <option value="cat">Aviva</option>
    <option value="hamster">Just</option>
    <option value="parrot">Wayne Enterprises</option>
    <option value="spider">Luthorcorp</option>
    <option value="goldfish">Queen Inc.</option>
</select>
<span class="input-message input-message--error">Inline error message</span>

Disabled

Choose a Plan:

<label>Choose a Plan:</label>

<select class="dropdown" disabled>
    <option value=""></option>
    <option value="dog">FPP</option>
    <option value="cat">Aviva</option>
    <option value="hamster">Just</option>
    <option value="parrot">Wayne Enterprises</option>
    <option value="spider">Luthorcorp</option>
    <option value="goldfish">Queen Inc.</option>
</select>