Tag System

Brandmine's tag system provides consistent categorization and filtering across content.

Tag System Overview

Our tag system provides a multi-dimensional categorization framework that helps users discover and filter content. The system uses visual differentiation to indicate tag types while maintaining a cohesive design language.

Tag Categories

Our tagging system includes four distinct categories, each with visual differentiation:

Hotels & Resorts Artisanal Spirits
Sector Tags - Product and service categories with teal styling
Artisanal Excellence Premium Positioning
Attribute Tags - Brand qualities with orange styling
Export Ready Investment Ready
Growth Tags - Business readiness indicators with indigo styling
Russia China
Country Tags - Geographic indicators with light indigo styling
html 
<!-- Sector Tags -->
<div class="sector-tags">
  <a href="/en/discover/sectors/hotels-resorts/" class="tag sector-tag">Hotels & Resorts</a>
  <a href="/en/discover/sectors/artisanal-spirits/" class="tag sector-tag">Artisanal Spirits</a>
</div>

<!-- Attribute Tags -->
<div class="attribute-tags">
  <a href="/en/discover/attributes/artisanal-excellence/" class="tag attribute-tag">Artisanal Excellence</a>
  <a href="/en/discover/attributes/premium-positioning/" class="tag attribute-tag">Premium Positioning</a>
</div>

<!-- Signal Tags -->
<div class="signal-tags">
  <a href="/en/discover/signals/export-ready/" class="tag signal-tag">Export Ready</a>
  <a href="/en/discover/signals/investment-ready/" class="tag signal-tag">Investment Ready</a>
</div>

<!-- Market Tags -->
<div class="market-tags">
  <a href="/en/discover/markets/russia/" class="tag market-tag">Russia</a>
  <a href="/en/discover/markets/china/" class="tag market-tag">China</a>
</div>

Tag States

Tags include hover states for improved interaction feedback:

Normal State
Default appearance for sector tags
Hover State
When user hovers over a sector tag
Normal State
Default appearance for attribute tags
Hover State
When user hovers over an attribute tag
css 
.sector-tag {
  background-color: var(--primary-100);
  color: var(--primary-700);
  border: 1px solid var(--primary-200);
}

.sector-tag:hover {
  background-color: var(--primary-200);
  color: var(--primary-800);
}

.attribute-tag {
  background-color: var(--secondary-100);
  color: var(--secondary-700);
  border: 1px solid var(--secondary-200);
}

.attribute-tag:hover {
  background-color: var(--secondary-200);
  color: var(--secondary-800);
}

Tag Lists

Tags are typically grouped by category in list format:

Hotels & Resorts Artisanal Spirits
Artisanal Excellence Premium Positioning
Export Ready
html 
<div class="tag-list">
  <div class="sector-tags">
    <a href="/en/discover/sectors/hotels-resorts/" class="tag sector-tag">Hotels & Resorts</a>
    <a href="/en/discover/sectors/artisanal-spirits/" class="tag sector-tag">Artisanal Spirits</a>
  </div>
  <div class="attribute-tags">
    <a href="/en/discover/attributes/artisanal-excellence/" class="tag attribute-tag">Artisanal Excellence</a>
    <a href="/en/discover/attributes/premium-positioning/" class="tag attribute-tag">Premium Positioning</a>
  </div>
  <div class="signal-tags">
    <a href="/en/discover/signals/export-ready/" class="tag signal-tag">Export Ready</a>
  </div>
</div>

Tag Clouds

Tag clouds display all tags in a category for browsing and discovery:

Sectors

Hotels & Resorts Artisanal Spirits Gourmet Foods Natural Beauty

Attributes

Artisanal Excellence Premium Positioning Founder-Led Heritage Brand
html 
<div class="tag-cloud">
  <h3>Sectors</h3>
  <div class="sector-cloud">
    <a href="/en/discover/sectors/hotels-resorts/" class="tag sector-tag">Hotels & Resorts</a>
    <a href="/en/discover/sectors/artisanal-spirits/" class="tag sector-tag">Artisanal Spirits</a>
    <a href="/en/discover/sectors/gourmet-foods/" class="tag sector-tag">Gourmet Foods</a>
    <a href="/en/discover/sectors/natural-beauty/" class="tag sector-tag">Natural Beauty</a>
  </div>
  
  <h3>Attributes</h3>
  <div class="attribute-cloud">
    <a href="/en/discover/attributes/artisanal-excellence/" class="tag attribute-tag">Artisanal Excellence</a>
    <a href="/en/discover/attributes/premium-positioning/" class="tag attribute-tag">Premium Positioning</a>
    <a href="/en/discover/attributes/founder-led/" class="tag attribute-tag">Founder-Led</a>
    <a href="/en/discover/attributes/heritage-brand/" class="tag attribute-tag">Heritage Brand</a>
  </div>
</div>

Tag Pages

Tag pages display content related to a specific tag with header information:

SECTOR

Hotels & Resorts

Luxury and boutique accommodation providers across the BRICS+ region offering distinctive hospitality experiences.

Related Content

Top 10 Boutique Hotels in Moscow

Explore the most distinctive luxury accommodations in Russia's capital city...

Read More

Emerging Trends in BRICS Hospitality

How hotels across Brazil, Russia, India, China and South Africa are innovating...

Read More
html 
<div class="tag-header">
  <span class="tag-type">SECTOR</span>
  <h1>Hotels & Resorts</h1>
  <p class="tag-description">Luxury and boutique accommodation providers across the BRICS+ region offering distinctive hospitality experiences.</p>
</div>

<div class="tag-posts">
  <h2>Related Content</h2>
  <div class="post-grid">
    
  </div>
</div>

Badge-Enhanced Tags

For future implementation, tags can include badge icons:

Export Ready Future badge implementation
html 
<a href="/en/tags/growth/export-ready/" class="tag growth-tag with-badge">
  <span class="badge-icon" style="background-image: url('/assets/images/badges/export-ready.svg')"></span>
  Export Ready
</a>

Multilingual Tag System

All tags are implemented consistently across languages:

English
Hotels & Resorts
Russian
Отели и Курорты
Chinese
酒店和度假村
yaml 
# _data/tag_translations.yml

hotels-resorts:
  en: "Hotels & Resorts"
  ru: "Отели и Курорты"
  zh: "酒店和度假村"
  
artisanal-excellence:
  en: "Artisanal Excellence"
  ru: "Мастерство Ремесленников"
  zh: "工艺精湛"

Implementation Guidelines

Tag Usage

  1. Consistent categorization - Use appropriate tag categories for each content type:
    • Sector tags for industry categories
    • Attribute tags for brand qualities
    • Growth tags for business readiness
    • Country tags for geographic context
  2. Tag grouping - Group tags by category for clarity: 
    <div class="tag-list">
  <div class="sector-tags"><!-- Sector tags --></div>
  <div class="attribute-tags"><!-- Attribute tags --></div>
  <div class="growth-tags"><!-- Growth tags --></div>
  <div class="country-tags"><!-- Country tags --></div>
</div>
  3. Multilingual implementation - Use proper tag translation data: 
    <a href="/en/discover/sectors/hotels-resorts/" class="tag sector-tag">
     
</a>

Tag Display Patterns

Common tag display patterns:

<!-- Post meta information with tags -->
<div class="post-meta">
  <div class="tag-list">
    
  </div>
</div>

<!-- Tag cloud for sidebar -->
<div class="sidebar-section">
  <h3>Popular Topics</h3>
  <div class="tag-cloud">
    <h4>Sectors</h4>
    <div class="sector-cloud">
      
    </div>
  </div>
</div>

<!-- Tag filtering interface -->
<div class="filter-section">
  <h3>Filter by Category</h3>
  <div class="sector-cloud filter-cloud">
    
  </div>
</div>

Best Practices

  1. Visual differentiation - Maintain distinct styling for each tag category
  2. Consistent spacing - Use standard spacing between tags and tag groups
  3. Responsive behavior - Ensure tags wrap properly on smaller screens
  4. Multilingual consistency - Maintain parallel structure across languages
  5. Clear hierarchy - Use heading elements to label tag sections appropriately
  6. Tag clouds - Include tag clouds for easy content browsing
  7. Interactive filtering - Support filtering content by tags when appropriate