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" ></i></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" ></i>
    	</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" ></i>
    	</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" ></i>
    	</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" ></i>
    	</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!')" />
    </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" ></i>
    	</figcaption>
    	<dl>
    		<dt>Dungeon</dt>
    		<dd>Hidden Shrine of Tamoachan</dd>
    	</dl>
    	<del onclick="ts.ui.Notification.info('I am not visible anyway.')" />
    </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...')" />
    		</figure>
    	</li>
    </ul>
    • Acererak
      Lich
      Acererak
    • Xanathar
      Beholder
      Xanathar

If you find a bug or need a feature…

  • Create GitHub Issue…