Tags

Tags represent a set of interactive keywords that help to label, organize, and categorize objects.

Tag Markup

When building the HTML for the tag yourself, this is how it should look:

<!--
	Always use a FIGURE element,
	You can add `ts-tag-locked` or `ts-tag-clickable` as a class.
-->
<figure data-ts="Tag" class="ts-tag-clickable" onclick="ts.ui.Notification.success('I was clicked.')">
	<!--
		If you want to have an icon or `UserImage` use a FIGCAPTION.
	-->
	<figcaption><i class="ts-icon-dispute" /></figcaption>
	<!--
		You can have zero or more DL elements for your keys & values.
	-->
	<dl>
		<!--
			You can start your DL with one or more DT or DD elements,
		-->
		<dt>Magic-user</dt>
		<dt>Human</dt>
		<!--
			and have zero or more DD elements following it.
		-->
		<dd>Merlin</dd>
		<dd>Rincewind</dd>
	</dl>
	<!--
		In case you want to add more key/value sets, start another DL
	-->
	<dl>
		<dt>Beholder</dt>
		<dd>Xanathar</dd>
	</dl>
	<!--
		It is possible to have only a single DD in a DL.
	-->
	<dl>
		<dd>Acererak</dd> <!-- (Even though this is against the spec) -->
	</dl>
	<!--
		It is possible to have only a single DT in a DL
	-->
	<dl>
		<dt>Non-magical characters</dt>
		<!--
			No such thing as non-magical, no DD is needed here =)
		-->
	</dl>
	<!--
		Finally, an optional DEL element will serve as your delete button
	 -->
	<del onclick="ts.ui.Notification.success('I am getting deleted.')"></del>
</figure>

This is how the code from above will look in action:

Magic-user
Human
Merlin
Rincewind
Beholder
Xanathar
Acererak
Non-magical characters

…of course, it's quite a big tag, normally you'd present it like this:

Magic-user
Human
Merlin
Rincewind
Beholder
Xanathar
Acererak
Non-magical characters

Key-only

If you want to show an all uppercased key only, use a single DT

<figure data-ts="Tag">
	<dl>
		<dt>Dragons!</dt>
	</dl>
</figure>
Dragons!

Icon-only

If you only want to show a single icon, use a single FIGCAPTION.

<figure data-ts="Tag">
	<figcaption>
		<i class="ts-icon-timer" />
	</figcaption>
</figure>

This also works with the UserImage, just make sure to use a size of 22x22 pixels.

<figure data-ts="Tag">
	<figcaption>
		<img
			data-ts="UserImage"
			src="assets/xanathar.png"
			alt="Xanathar"
			width="22"
			height="22"
		/>
	</figcaption>
</figure>
Xanathar

Value-only

If you fancy a simpler approach with lighter font weights and lowercase characters, use a single DD. 

<figure data-ts="Tag">
	<dl>
		<dd>Roll a d20</dd>
	</dl>
</figure>
Roll a d20

Key-Value

If you need a key with a value attached to it, use a DT and a DD. 

<figure data-ts="Tag">
	<dl>
		<dt>Area of Origin</dt>
		<dd>The Sword Coast</dd>
	</dl>
</figure>
Area of Origin
The Sword Coast

Key with multiple values

You can have a single key with multiple values, just keep adding DD elements. 

<figure data-ts="Tag">
	<dl>
		<dt>The Teeming Hive of Evil</dt>
		<dd>Skullport</dd>
		<dd>Port of Shadows</dd>
	</dl>
</figure>
The Teeming Hive of Evil
Skullport
Port of Shadows

Multiple keys with single value

Of course you could flip it around and use several keys for a single value. 

<figure data-ts="Tag">
	<dl>
		<dt>Facial Tentacles</dt>
		<dt>Potent Psionics</dt>
		<dd>Mind Flayer</dd>
	</dl>
</figure>
Facial Tentacles
Potent Psionics
Mind Flayer

Multiple keys with multiple values

It comes naturally that you can have several keys together with several values. 

<figure data-ts="Tag">
	<dl>
		<dt>Magic-user</dt>
		<dt>Undead</dt>
		<dd>Lich</dd>
		<dd>Vampire</dd>
	</dl>
</figure>
Magic-user
Undead
Lich
Vampire

Multiple sets of key-values

Due to the high intensity of the CSS code, we don't support adding commas, colons and dashes to a DL with several sets of DT and DD elements without separation. If that is what you'd like to do, please choose a method from below.

If you want to have several key/value sets in a single tag, you have two options:

You can follow the W3C spec and just use separate DL elements:

<figure data-ts="Tag">
	<dl>
		<dt>Acererak</dt>
	</dl>
	<dl>
		<dt>Hobbies</dt>
		<dd>Building Dungeons</dd>
	</dl>
	<dl>
		<dt>Alignment</dt>
		<dd>Lawful</dd>
		<dd>Evil</dd>
	</dl>
</figure>
Acererak
Hobbies
Building Dungeons
Alignment
Lawful
Evil

Or you can follow the WHATWG spec and place DIV elements around each set:

<figure data-ts="Tag">
	<dl>
		<div>
			<dt>Acererak</dt>
		</div>
		<div>
			<dt>Hobbies</dt>
			<dd>Building Dungeons</dd>
		</div>
		<div>
			<dt>Alignment</dt>
			<dd>Lawful</dd>
			<dd>Evil</dd>
		</div>
	</dl>
</figure>
Acererak
Hobbies
Building Dungeons
Alignment
Lawful
Evil

Optional icon

Just like above, you can add an icon next to any combinaton of keys and values.

<figure data-ts="Tag">
	<figcaption>
		<i class="ts-icon-rating" />
	</figcaption>
	<dl>
		<dt>Dungeon</dt>
		<dd>Tomb of Horrors</dd>
	</dl>
</figure>
Dungeon
Tomb of Horrors

Optional clickability

If you want to make your tag look like it can be clicked, add the ts-tag-clickable class to the FIGURE.

Don't forget to set some sort of click handler on the FIGURE element.

<figure data-ts="Tag" class="ts-tag-clickable" onclick="ts.ui.Notification.success('Do you see?')">
	<figcaption>
		<i class="ts-icon-view" />
	</figcaption>
	<dl>
		<dt>Vision</dt>
		<dd>Blindsight</dd>
		<dd>Truesight</dd>
		<dd>Darkvision</dd>
	</dl>
</figure>
Vision
Blindsight
Truesight
Darkvision

Optional delete button

If you want to be able to remove a tag, add a DEL element as the last child.

When the DEL element is clicked, the tag will be removed from the DOM after a setTimeout. Don't try to read anything through the DOM at this point.

<figure data-ts="Tag">
	<figcaption>
		<i class="ts-icon-discovery" />
	</figcaption>
	<dl>
		<dt>Languages</dt>
		<dd>Sylvan</dd>
		<dd>Common</dd>
		<dd>Draconic</dd>
		<dd>Giant</dd>
	</dl>
	<del onclick="ts.ui.Notification.info('Tag disintegrated!')"></del>
</figure>
Languages
Sylvan
Common
Draconic
Giant

Optional locked look

If you want to lock down a tag, use the ts-tag-locked class on the FIGURE.

A locked tag will have its DEL button hidden.

<figure data-ts="Tag" class="ts-tag-locked">
	<figcaption>
		<i class="ts-icon-location" />
	</figcaption>
	<dl>
		<dt>Dungeon</dt>
		<dd>Hidden Shrine of Tamoachan</dd>
	</dl>
	<del onclick="ts.ui.Notification.info('I am not visible anyway.')"></del>
</figure>
Dungeon
Hidden Shrine of Tamoachan

List of Tags

Whenever you put tags one after another, they will be displayed in an inline fashion. 

<figure data-ts="Tag" class="ts-tag-locked">
	<figcaption>
		<img
			data-ts="UserImage"
			src="assets/Acererak.png"
			alt="Acererak"
			width="22"
			height="22"
		/>
	</figcaption>
	<dl>
		<dt>Lich</dt>
		<dd>Acererak</dd>
	</dl>
</figure>
<figure data-ts="Tag">
	<figcaption>
		<img
			data-ts="UserImage"
			src="assets/xanathar.png"
			alt="Xanathar"
			width="22"
			height="22"
		/>
	</figcaption>
	<dl>
		<dt>Beholder</dt>
		<dd>Xanathar</dd>
	</dl>
	<del onclick="ts.ui.Notification.warning('I hope you know what you\'re doing...')"></del>
</figure>
Acererak
Lich
Acererak
Xanathar
Beholder
Xanathar

List of Tags (maximized)

If you would rather have them stack like block elements, place them inside a UL element with data-ts="Tags". 

<ul data-ts="Tags">
	<li>
		<figure data-ts="Tag" class="ts-tag-locked">
			<figcaption>
				<img
					data-ts="UserImage"
					src="assets/Acererak.png"
					alt="Acererak"
					width="22"
					height="22"
				/>
			</figcaption>
			<dl>
				<dt>Lich</dt>
				<dd>Acererak</dd>
			</dl>
		</figure>
	</li>
	<li>
		<figure data-ts="Tag">
			<figcaption>
				<img
					data-ts="UserImage"
					src="assets/xanathar.png"
					alt="Xanathar"
					width="22"
					height="22"
				/>
			</figcaption>
			<dl>
				<dt>Beholder</dt>
				<dd>Xanathar</dd>
			</dl>
			<del onclick="ts.ui.Notification.warning('I hope you know what you\'re doing...')"></del>
		</figure>
	</li>
</ul>
  • Acererak
    Lich
    Acererak
  • Xanathar
    Beholder
    Xanathar