Inline components

These components depend on special markup structures and some may expose features though a JavaScript API. Other than specifying the data-ts attribute as shown, there is no need to initialize the components in any special way.

Button

A true classic, available in several flavors.

    • <button data-ts="Button" class="ts-primary">
      	<span>Primary</span>
      </button>
      <button data-ts="Button" class="ts-secondary">
      	<span>Secondary</span>
      </button>
      <button data-ts="Button" class="ts-tertiary">
      	<span>Tertiary</span>
      </button>
    • <button data-ts="Button" class="ts-primary ts-micro">
      	<span>Primary</span>
      </button>
      <button data-ts="Button" class="ts-secondary ts-micro">
      	<span>Secondary</span>
      </button>
      <button data-ts="Button" class="ts-tertiary ts-micro">
      	<span>Tertiary</span>
      </button>

CompanyCard

A unified way to show companies.

    • <div data-ts="CompanyCard">
      	<script type="application/json">
      		{
      			"id": "6bf17754-f9de-4e31-aa31-bd3ff765b9c2",
      			"data": {
      				"name": "Tradeshift",
      				"logo": "assets/logo.png",
      				"size": "100–249",
      				"location": "San Francisco, California",
      				"industry": "Software & IT",
      				"connection": 2
      			}
      		}
      	</script>
      </div>

Form

Another classic, can't have webapps without them.

    • <form data-ts="Form">
      	<fieldset>
      		<label>
      			<span>Text</span>
      			<input type="text" required />
      		</label>
      	</fieldset>
      </form>
    • <form data-ts="Form">
      	<fieldset>
      		<label>
      			<span>Textarea</span>
      			<textarea></textarea>
      		</label>
      	</fieldset>
      </form>
    • <form data-ts="Form">
      	<fieldset>
      		<label>
      			<span>Date</span>
      			<input type="date"
      				value="2015-01-01"
      				min="2014-01-01"
      				max="2016-01-01"/>
      		</label>
      	</fieldset>
      </form>
    • <form data-ts="Form">
      	<fieldset>
      		<label>
      			<span>Select</span>
      			<select>
      				<option value="a" selected>One</option>
      				<option value="b">Two</option>
      				<option value="c">Three</option>
      			</select>
      		</label>
      	</fieldset>
      </form>
    • <form data-ts="Form">
      	<fieldset>
      		<label>
      			<span>Select multiple</span>
      			<select multiple>
      				<option value="a" selected>One</option>
      				<option value="b" selected>Two</option>
      				<option value="c">Three</option>
      				<option value="d">Four</option>
      				<option value="e">Five</option>
      			</select>
      			<button>Cool, apply changes!</button>
      		</label>
      	</fieldset>
      </form>
    • <form data-ts="Form">
      	<fieldset>
      		<span>Choose wisely</span>
      		<label>
      			<input type="radio" name="radio" checked/>
      			<span>Red pill</span>
      		</label>
      		<label>
      			<input type="radio" name="radio"/>
      			<span>Blue pill</span>
      		</label>
      	</fieldset>
      </form>
  • Choose wisely
    • <form data-ts="Form">
      	<fieldset>
      		<span>Legally Binding Contract</span>
      		<label>
      			<input type="checkbox"/>
      			<span>I agree to something</span>
      		</label>
      		<label>
      			<input type="checkbox" checked/>
      			<span>I agree to something (by default)</span>
      		</label>
      	</fieldset>
      </form>
  • Legally Binding Contract
    • <form data-ts="Form">
      	<fieldset>
      		<span>Settings Page</span>
      		<label>
      			<span>Secret Feature</span>
      			<input type="checkbox"/>
      		</label>
      		<label>
      			<span>Secret Feature (On by default)</span>
      			<input type="checkbox" checked/>
      		</label>
      	</fieldset>
      </form>
  • Settings Page

Icons

We support a range of icons. Here are a few randomly selected ones.

    • <i class="ts-icon-apps" ></i>
      <i class="ts-icon-myapps" ></i>
      <i class="ts-icon-archive" ></i>
      <i class="ts-icon-broadcastmessage" ></i>
      <i class="ts-icon-cart" ></i>
      <i class="ts-icon-discovery" ></i>
      <i class="ts-icon-dispute" ></i>
      <i class="ts-icon-halt" ></i>
      <i class="ts-icon-heart" ></i>
      <i class="ts-icon-pay" ></i>
      <i class="ts-icon-timer" ></i>
      <i class="ts-icon-send" ></i>

Menu

Not to be confused with the main navigation, this is simply a list of selectable items.

    • <menu data-ts="Menu">
      	<li>
      		<button>
      			<span>I have an icon on my right</span>
      			<sub>And a second line!</sub>
      			<i class="ts-icon-rating"></i>
      		</button>
      	</li>
      	<li>
      		<button>
      			<i class="ts-icon-rating"></i>
      			<span>I have an icon on my left, but skipped the second line!</span>
      		</button>
      	</li>
      </menu>

Note

A nice way to inform the user about something on the page. This is not for status messages! It also works on page-level.

    • <div data-ts="Note">
      	<i class="ts-icon-heart"></i>
      	<p>You love the Note!</p>
      </div>
  • You love the Note!

Search

Unified search experience.

    • <div data-ts="Search" id="mysearch" class="ts-inset"></div>

TabBar

An easy way to show tabs. Also works on page-level.

    • <script>
      	var tabbar = ts.ui.get('#tabbar-example');
      	tabbar.tabs([
      		{
      			label: "Tab One",
      			onselect : function() {
      				ts.ui.Notification.success(this.label);
      			}
      		},
      		{
      			label: "Tab Two",
      			onselect : function() {
      				ts.ui.Notification.success(this.label);
      			}
      		}
      	]);
      </script>

Table

Ranging from spreadsheet-style editing to just showing some tabular data.

    • <script>
      	var table = ts.ui.get('#table-example');
      	table.cols([
      		{label: 'Level', type: 'ts-number'},
      		{label: 'Character', flex: 2},
      		{label: 'Alignment', flex: 2},
      	]);
      	table.rows([
      		[21, 'Paladin Knight', 'Lawful Good'],
      		[13, 'Barbarian Queen', 'Neutral Evil'],
      		[11, 'Global Senior Vice President of Sales', 'Chaotic Evil']
      	]);
      </script>

Tags & Labels

A set of interactive keywords that help to label, organize, and categorize objects.

    • <script>
      	const data = ts.ui.encode(
      		[
      			['Vision', ['Blindsight', 'Truesight', 'Darkvision']]
      		]
      	);
      	ts.ui.ready(() => {
      		ts.ui.get('#tag-clickable', tag => {
      			tag.onclick = () => {
      				ts.ui.Notification.success('Do you see?');
      			};
      		});
      	});
      </script>

Time

Human readable time formatting.

    • <time data-ts="Time" datetime="2016-06-22 12:00:00"></time>

UserImage

Little avatars for the users.

    • <img data-ts="UserImage" src="assets/jim.png" alt="Jim Bob Johnson"/>
      <img data-ts="UserImage" alt="Karl Benson"/>
      <img data-ts="UserImage" alt="Marshall Garrett"/>
      <img data-ts="UserImage" alt="Kelvin Castro"/>
      <img data-ts="UserImage" alt="Natalie Carr"/>
      <img data-ts="UserImage" alt="Ray Chavez"/>
  • Jim Bob Johnson Karl Benson Marshall Garrett Kelvin Castro Natalie Carr Ray Chavez