Watson Platform Component Library

Content

Buttons

    
<!-- BUTTONS -->
<button class="base--button">Button</button>

<!-- SUBMIT AND RESET BUTTONS -->
<button class="base--button base--button_submit" type="submit">Submit Button</button>
<button class="base--button base--button_reset" type="reset">Reset Button</button>

<!-- COLOR BUTTONS -->
<button class="base--button base--button_black">Black Button</button>
<button class="base--button base--button_teal">Teal Button</button>

Tab Panels

Tab 1
Tab 2

This is panel 1

This is panel 2

    
<div class="tab-panels" role="tabpanel">
  <ul class="tab-panels--tab-list" role="tablist">
    <li class="tab-panels--tab-list-item base--li" role="presentation">
      <a class="tab-panels--tab base--a active" href="#panel1" aria-controls="panel1" role="tab">Tab 1</a>
    </li>
    <li class="tab-panels--tab-list-item base--li" role="presentation">
      <a class="tab-panels--tab base--a" href="#panel2" aria-controls="panel2" role="tab">Tab 2</a>
    </li>
  </ul>
  <div class="tab-panels--tab-content">
    <div id="panel1" class="tab-panels--tab-pane active" role="tab-panel">
      This is panel 1
    </div>
    <div id="panel2" class="tab-panels--tab-pane" role="tab-panel">
      This is panel 2
    </div>
  </div>
</div>

Clickable Tabs

  Clickable Tab

<div class="clickable-tab">
  Clickable Tab
</div>

Clickable Tabs as Radio Buttons

Option 1 Option 2

    
<input role="radio" class="base--radio" type="radio" id="tab-1" name="tab-radio" value="1">
<label class="base--inline-label clickable-tab" for="tab-1">
  Option 1
</label>

<input role="radio" class="base--radio" type="radio" id="tab-2" name="tab-radio" value="2">
<label class="base--inline-label clickable-tab" for="tab-2">
  Option 2
</label>

Rounded Tags

  tag 1

  tag 2

<div class="metatag">
  tag 1
</div>
<div class="metatag">
  tag 2
</div>

Loader

  
<div class="loader-container">
  <svg viewBox="25 25 50 50" class="loader">
    <circle cx="50" cy="50" r="20" class="loader--path"></circle>
  </svg>
</div>

<div class="loader-container loader-container_small">
  <svg viewBox="25 25 50 50" class="loader">
    <circle cx="50" cy="50" r="20" class="loader--path"></circle>
  </svg>
</div>

HR

    
<hr class="base--hr">
<hr class="base--hr base--hr_small">

Checkboxes

Option 1

    
<input role="checkbox" class="base--checkbox" type="checkbox" id="cb1" name="cb" value="some cb">
<label class="base--inline-label" for="cb1">Option 1</label>

Radio Buttons

Option 1 Option 2

    
<input role="radio" class="base--radio" type="radio" id="rb1" name="rb" value="">
<label class="base--inline-label" for="rb1">Option 1</label>
<input role="radio" class="base--radio" type="radio" id="rb2" name="rb" value="">
<label class="base--inline-label" for="rb2">Option 2</label>

Table

    

  
      First Name
      Last Name
      Role
    

  
      Westley
      --
      The Man in Black
    

      Princess
      Buttercup
      The Princess Bride
    

      Prince
      Humperdinck
      The Obnoxious Prince
    

      Donald
      Trump
      President
    

      John
      Doe
      Placeholder
    



  
  

        
<table class="base--table">
  <thead class="base--thead">
    <tr class="base--tr">
      <td class="base--td">First Name</td>
      <td class="base--td">Last Name</td>
      <td class="base--td">Role</td>
    </tr>
  </thead>
  <tbody class="base--tbody">
    <tr class="base--tr">
      <td class="base--td">Westley</td>
      <td class="base--td">--</td>
      <td class="base--td">The Man in Black</td>
    </tr>
    <tr class="base--tr">
      <td class="base--td">Princess</td>
      <td class="base--td">Buttercup</td>
      <td class="base--td">The Princess Bride</td>
    </tr>
    <tr class="base--tr">
      <td class="base--td">Prince</td>
      <td class="base--td">Humperdinck</td>
      <td class="base--td">The Obnoxious Prince</td>
    </tr>
    <tr class="base--tr">
      <td class="base--td">Donald</td>
      <td class="base--td">Trump</td>
      <td class="base--td">President</td>
    </tr>
    <tr class="base--tr">
      <td class="base--td">John</td>
      <td class="base--td">Doe</td>
      <td class="base--td">Placeholder</td>
    </tr>
  </tbody>
</table>
    
    
  

First Name	Last Name	Role
Westley	--	The Man in Black
Princess	Buttercup	The Princess Bride
Prince	Humperdinck	The Obnoxious Prince
Donald	Trump	President
John	Doe	Placeholder

Lists

    
List item 1
List item 2
List item 3

List item 1
List item 2
List item 3

List item 1
List item 2
List item 3


  
  

        
<ul class="base--ul">
  <li class="base--li">List item 1</li>
  <li class="base--li">List item 2</li>
  <li class="base--li">List item 3</li>
</ul>
<ul class="base--ul base--ul_inline">
  <li class="base--li">List item 1</li>
  <li class="base--li">List item 2</li>
  <li class="base--li">List item 3</li>
</ul>
<ul class="base--ul base--ul_no-bullets">
  <li class="base--li">List item 1</li>
  <li class="base--li">List item 2</li>
  <li class="base--li">List item 3</li>
</ul>
    
    
  

TextArea

    
<textarea class="base--textarea" name="text-area" id="textarea1" cols="30" rows="10"></textarea>

Dropdown Select

    
<select name="pick-a-value" id="any-value" class="base--select">
  <option value="value1">Value 1</option>
  <option value="value2">Value 2</option>
  <option value="value3">Value 3</option>
</select>

Basic Input

    
<input type="" id="input1" class="base--input"></input>
<input type="" id="input2" placeholder="This is placeholder text" class="base--input"></input>
<input type="" id="input3" placeholder="Can't touch this" class="base--input" disabled></input>

Color Input

    
<input type="color" id="input4" class="base--color-input" disabled></input>

Date Input

    
<input type="date" id="input5" class="base--date-input"></input>
<input type="date" id="input6" placeholder="Can't click me" class="base--date-input" disabled></input>

Date Time Local Input

    
<input type="datetime-local" id="input7" class="base--datetime-local-input"></input>
<input type="datetime-local" id="input8" placeholder="Can't click me" class="base--datetime-local-input" disabled></input>

File Input

    
<input type="file" id="input12" class="base--file-input"></input>
<input type="file" id="input13" placeholder="This is a placeholder file" class="base--file-input"></input>
<input type="file" id="input14" placeholder="Can't click me" class="base--file-input" disabled></input>

Hidden Input

    
<input type="hidden" id="input15" class="base--hidden-input"></input>
<input type="hidden" id="input16" placeholder="This is placeholder hidden" class="base--hidden-input"></input>
<input type="hidden" id="input17" placeholder="Can't click me" class="base--hidden-input" disabled></input>

Month Input

    
<input type="month" id="input18" class="base--month-input"></input>
<input type="month" id="input19" placeholder="Placeholder Month" class="base--month-input" ></input>
<input type="month" id="input20" placeholder="Can't click me" class="base--month-input" disabled></input>

Number Input

    
<input type="number" id="input21" class="base--number-input"></input>
<input type="number" id="input22" placeholder="This is placeholder number" class="base--number-input"></input>
<input type="number" id="input23" placeholder="Can't touch this" class="base--number-input" disabled></input>

Password Input

    
<input type="password" id="input24" class="base--password-input"></input>
<input type="password" id="input25" placeholder="This is placeholder password" class="base--password-input"></input>
<input type="password" id="input26" placeholder="Can't touch this" class="base--password-input" disabled></input>

Range Input

    
<input type="range" id="input27" class="base--range-input"></input>
<input type="range" id="input28" class="base--range-input" disabled></input>

Search Input

    
<input type="search" id="input29" class="base--search-input"></input>
<input type="search" id="input30" placeholder="This is placeholder search" class="base--search-input"></input>
<input type="search" id="input31" placeholder="Can't touch this" class="base--search-input" disabled></input>

Telephone Input

    
<input type="tel" id="input32" class="base--tel-input"></input>
<input type="tel" id="input33" placeholder="8882121881" class="base--tel-input"></input>
<input type="tel" id="input34" placeholder="123-343-9938" pattern="\d{3}[\-]\d{3}[\-]\d{4}" class="base--tel-input"></input>
<input type="tel" id="input35" placeholder="8882121881" class="base--tel-input" disabled></input>

Text Input

    
<input type="text" id="input36" class="base--text-input"></input>
<input type="text" id="input37" placeholder="This is placeholder text" class="base--text-input"></input>
<input type="text" id="input38" placeholder="Can't touch this" class="base--text-input" disabled></input>

Time Input

    
<input type="time" id="input39" class="base--time-input"></input>
<input type="time" id="input40" placeholder="This is placeholder time" class="base--time-input"></input>
<input type="time" id="input41" placeholder="Can't Click me" class="base--time-input" disabled></input>

Url Input

    
<input type="url" id="input42" class="base--url-input"></input>
<input type="url" id="input43" placeholder="Placeholder URL" class="base--url-input"></input>
<input type="url" id="input44" placeholder="Placeholder URL" class="base--url-input" disabled></input>

Week Input

    
<input type="week" id="input45" class="base--week-input"></input>
<input type="week" id="input46" placeholder="This is placeholder week" class="base--week-input"></input>
<input type="week" id="input47" placeholder="Can't click me" class="base--week-input" disabled></input>