Application toolkit - Legend indicator
A component to indicate properties of elements.
Basic
A base form of the legend indicator.
Open this basic legend indicator example in new window
Copy basic legend indicator code
Close basic legend indicator code
<div class="inline-flex items-center">
<span class="w-2 h-2 inline-block bg-hs2-primary rounded-full mr-2"></span>
<span class="text-gray-600 dark:text-gray-400">Legend indicator</span>
</div>Colour variations
Predefined solid color legend indicator styles.
Open this colour variations legend indicator example in new window
Copy colour variations legend indicator code
Close colour variations legend indicator code
<div class="flex flex-col gap-2">
<div class="inline-flex items-center">
<span class="w-2 h-2 inline-block bg-hs2-primary rounded-full mr-2 dark:bg-white"></span>
<span class="text-gray-600 dark:text-gray-400">Primary</span>
</div>
<div class="inline-flex items-center">
<span class="w-2 h-2 inline-block bg-hs2-secondary rounded-full mr-2"></span>
<span class="text-gray-600 dark:text-gray-400">Secondary</span>
</div>
<div class="inline-flex items-center">
<span class="w-2 h-2 inline-block bg-hs2-info rounded-full mr-2"></span>
<span class="text-gray-600 dark:text-gray-400">Info</span>
</div>
<div class="inline-flex items-center">
<span class="w-2 h-2 inline-block bg-hs2-success rounded-full mr-2"></span>
<span class="text-gray-600 dark:text-gray-400">Success</span>
</div>
<div class="inline-flex items-center">
<span class="w-2 h-2 inline-block bg-hs2-warning rounded-full mr-2"></span>
<span class="text-gray-600 dark:text-gray-400">Warning</span>
</div>
<div class="inline-flex items-center">
<span class="w-2 h-2 inline-block bg-hs2-danger rounded-full mr-2"></span>
<span class="text-gray-600 dark:text-gray-400">Danger</span>
</div>
<div class="inline-flex items-center">
<span class="w-2 h-2 inline-block bg-white rounded-full mr-2"></span>
<span class="text-gray-600 dark:text-gray-400">Light</span>
</div>
</div>