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

Date

Default

Day Month Year

Code

<div>
    <div class="flex">
      <label for="day-1" class="label">Day</label>
      <label for="month-1" class="label">Month</label>
      <label for="year-1" class="label">Year</label>
    </div>
  <div class="flex">
    <input id="day-1"class="input mr-2" type="text" placeholder="DD" maxlength="2">
    <input id="month-1" class="input mr-2" type="text" placeholder="MM" maxlength="2">
    <input id="year-1" class="input mr-2" type="text" placeholder="YYYY" maxlength="4">
  </div>
</div>

Active

Day Month Year

Code

<div>
    <div class="flex">
      <label for="day-2" class="label">Day</label>
      <label for="month-2" class="label">Month</label>
      <label for="year-2" class="label">Year</label>
    </div>
   <div class="flex">
    <input id="day-2" class="input input--active mr-2" type="text" placeholder="DD" maxlength="2">
    <input id="month-2" class="input input--active mr-2" type="text" placeholder="MM" maxlength="2">
    <input id="year-2" class="input input--active mr-2" type="text" placeholder="YYYY" maxlength="4">
  </div>
</div>

Hover

Day Month Year

Code

<div>
     <div class="flex">
      <label for="day-3" class="label">Day</label>
      <label for="month-3" class="label">Month</label>
      <label for="year-3" class="label">Year</label>
    </div>
    <div class= "flex">
    <input id="day-3" class="input input--hover mr-2" type="text" placeholder="DD" maxlength="2">
    <input id="month-3" class="input input--hover mr-2" type="text" placeholder="MM" maxlength="2">
    <input id="year-3"class="input input--hover mr-2" type="text" placeholder="YYYY" maxlength="4">
  </div>
</div>

Error

Day Month Year

Inline error message

Code

<div>
    <div class="flex">
      <label for="day-4" class="label">Day</label>
      <label for="month-4" class="label">Month</label>
      <label for="year-4" class="label">Year</label>
    </div>
    <div class="flex">
    <input id="day-4" class="input input--error mr-2" type="text" placeholder="DD" maxlength="2">
    <input id="month-4" class="input input--error mr-2" type="text" placeholder="MM" maxlength="2">
    <input id="year-4" class="input input--error mr-2" type="text" placeholder="YYYY" maxlength="4">
  </div>
    <span class="input-message input-message--error">Inline error message<span>
</div>

Disabled

Day Month Year

Code

<div>
    <div class="flex">
      <label for="day-5" class="label">Day</label>
      <label for="month-5" class="label">Month</label>
      <label for="year-5" class="label">Year</label>
    </div>
   <div class="flex">
    <input id="day-5" class="input mr-2" disabled type="text" placeholder="DD" maxlength="2">
    <input id="month-5" class="input mr-2" disabled type="text" placeholder="MM" maxlength="2">
    <input id="year-5" class="input mr-2" disabled type="text" placeholder="YYYY" maxlength="4">
  </div>
</div>