CompanyCard

In this first iteration, the CompanyCard is simply a HTML rendering that you can feed with JSON in various ways.

You can initialize a CompanyCard with the attribute data-ts="CompanyCard".

<div data-ts="CompanyCard" id="mycard"></div>

Even without any data, the card takes on a cardlike appearance.

If you are using Angular or jQuery, you might like to feed the card through a JavaScript API, as we will see, you can however also embed the data directly in the markup.

Embedded JSON

Server-side devs and UX designers might like to embed the JSON in the HTML. Because this is JSON, you should use double quotes and omit trailing commas.

- ```
<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>
```

Encoded JSON

You can also embed the JSON in an attribute data-ts.render. The JSON string must be encoded in the format returned by method encodeURIComponent(json); Remember to trim() the JSON string before you encode it.

<div data-ts="CompanyCard" data-ts.render="%7B%22id%22%3A%226bf17754-f9de-4e31-aa31-bd3ff765b9c2%22%2C%22data%22%3A%7B%22name%22%3A%22Tradeshift%22%2C%22logo%22%3A%22assets%2Flogo.png%22%2C%22size%22%3A%22100%E2%80%93249%22%2C%22location%22%3A%22San%20Francisco%2C%20California%22%2C%22industry%22%3A%22Software%20%26%20IT%22%2C%22connection%22%3A2%7D%7D"></div>

Render programatically

You can grab a hold of the card and instruct it to render() some JSON data.

```
ts.ui.get('#mycard', card => {
	card.render({
		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
		}
	});
});
```

We notice that the connection status is indicated by a number. The number matches an index in the following array, which declares the label and icon.

ts.ui.CompanyCard.connectionTypes = [
	['Your company', 'ts-icon-network'],
	['Request sent', 'ts-icon-network'],
	['Connected', 'ts-icon-network'],
	['Registration in progress', 'ts-icon-network'],
	['In your Google Contacts', 'ts-icon-network'],
	['Via email only', 'ts-icon-network']
];

This array is crowdsourced. You can modify the array in your app, simply by copy-pasting the code above into your initialization script. You can also use numbers (instead of strings) to indicate size and industry.

card.render({
	id: '6bf17754-f9de-4e31-aa31-bd3ff765b9c2',
	data: {
		name: 'Tradeshift',
		size: 3,
		industry: 6
	}
});

If you provide a number instead of a string, we'll look it up in these lists.

ts.ui.CompanyCard.companySizes = [
	'1',
	'1–10',
	'1–100',
	'100–249',
	'250-500',
	'500-1000'
];
ts.ui.CompanyCard.industryTypes = [
	'Airline',
	'Corporation',
	'Educational Organization',
	'Government Organization',
	'Local Business',
	'NGO',
	'Software & IT',
	'Performing Group',
	'Sports Team'
];

You are also welcome to overwrite these arrays in your app. That's it for now.