Let’s assume you have several decks with several cards on them. And you share the same Note type between them. Wouldn’t it be nice to have different styles for each deck? or even within the same deck (different categories, i.e. mammals, reptiles, birds, etc.)?
This could be addressed by having many similar Note types with slightly different styles… OR using Tags we can create a Note type that dynamically has different styles on it.
How to reach this? Let’s see a super basic implementation:
Front template
<div class="{{Tags}}">
{{Front}}
</div>
Style template
.card {
font-family: arial;
font-size: 20px;
text-align: center;
color: black;
background-color: white;
}
.red {
background: red;
}
.yellow {
background: yellow;
}
.green {
background: green;
}
And then we create a card and add the tag “green” to it, the field {{Tags}} will be resolved as:
<div class="green">
And voila! The card will have a green background on the front side. With this method, you can have different styles within a deck with the same Note type. And as the note type will be shared between decks, you can customize all your desks with one Note type.
It doesn’t matter if there are other tags, all of them will be added to the class name. But as we only specify a style for one of the tags, the other tags won’t affect the card whatsoever. And the Notes that don’t have any tags will be rendered with the default style.
And this is the result (remember that this is a super simple example!):
If you are studying anatomy you can have different colours/styles for the different systems (skeletal, muscular, nervous, respiratory, digestive, etc.), same for language exams (grammar, nouns, verbs, etc), citizenship exams (historical facts, politics, important holidays).
To wrap up, remember you can have more than one tag (to handle colour, font size, alignment, padding, etc.) and if you play with them correctly you can have a lot of different styles only using one card.
Hope you find this useful (or at least, interesting)!