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:
This is how the code from above will look in action:
…of course, it's quite a big tag, normally you'd present it like this:
Key-only
If you want to show an all uppercased key
only, use a single DT
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>
-
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>
-
- Lich
- Acererak
- 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>
-
-
- Lich
- Acererak
-
- Beholder
- Xanathar
-
If you find a bug or need a feature…