Tags often represent information like category, state, or additional information. Here's a Christmas tag for you.
The example component is visible below.
Christmas time 🎁 Christmas time 🎁 Christmas time 🎁
A few notes about this tag component:
- CSS Variables are used for colors,
- the alignment is achieved with flex centering,
- Alpha, Beta, Gamma naming convention is used for the variations.
The code:
<span class="advent-tag advent-tag--alpha">Christmas time 🎁</span>
<span class="advent-tag advent-tag--beta">Christmas time 🎁</span>
<span class="advent-tag advent-tag--gamma">Christmas time 🎁</span>.advent-tag {
--color-xmas-bg: #f7efef;
--color-xmas-color: #639565;
--color-xmas-border: transparent;
background-color: var(--color-xmas-bg);
color: var(--color-xmas-color);
font-size: 1rem;
display: inline-flex;
align-items: center;
justify-content: center;
border: .3em solid var(--color-xmas-border);
border-radius: .6em;
padding: .3em .9em;
}
.advent-tag--beta {
--color-xmas-bg: #f7efef;
--color-xmas-color: #639565;
--color-xmas-border: #639565;
}
.advent-tag--gamma {
--color-xmas-color: #d72621;
--color-xmas-border: #d72621;
}