Tags
The Tags component provides a reusable pattern for tags in the interface.
Basic tags
Plain tags rendered as spans, prefixed with the default # character.
#
Environment
#
Sustainability
#
Urban planning
#
Transport
<div class="c-tags" id="6ac9f6d08976d" data-component="tags">
<span class="c-tags__tag"># Environment</span> <span class="c-tags__tag"># Sustainability</span> <span class="c-tags__tag"># Urban planning</span> <span class="c-tags__tag"># Transport</span>
</div>
@tags([
'tags' => [
['label' => 'Environment'],
['label' => 'Sustainability'],
['label' => 'Urban planning'],
['label' => 'Transport'],
]
])
@endtags
Tags with links
When each tag item includes an href, the tag is rendered as a clickable anchor element.
<div class="c-tags" id="6ac9f6d089829" data-component="tags">
<a class="c-link c-tags__tag" href="https://getmunicipio.com" target="_top" data-component="link"># Environment</a> <a class="c-link c-tags__tag" href="https://getmunicipio.com" target="_top"
data-component="link"># Sustainability</a> <a class="c-link c-tags__tag" href="https://getmunicipio.com" target="_top" data-component="link"># Urban planning</a> <a class="c-link c-tags__tag" href=
"https://getmunicipio.com" target="_top" data-component="link"># Transport</a>
</div>
@tags([
'tags' => [
['label' => 'Environment', 'href' => 'https://getmunicipio.com'],
['label' => 'Sustainability', 'href' => 'https://getmunicipio.com'],
['label' => 'Urban planning', 'href' => 'https://getmunicipio.com'],
['label' => 'Transport', 'href' => 'https://getmunicipio.com'],
]
])
@endtags
Pill-shaped tags
Applying tagsStyle 'pill' gives each tag a rounded, pill-shaped appearance with a card background and shadow.
#
Environment
#
Sustainability
#
Urban planning
#
Transport
<div class="c-tags c-tags--pill" id="6ac9f6d089d61" data-component="tags">
<span class="c-tags__tag"># Environment</span> <span class="c-tags__tag"># Sustainability</span> <span class="c-tags__tag"># Urban planning</span> <span class="c-tags__tag"># Transport</span>
</div>
@tags([
'tagsStyle' => 'pill',
'tags' => [
['label' => 'Environment'],
['label' => 'Sustainability'],
['label' => 'Urban planning'],
['label' => 'Transport'],
]
])
@endtags
Compressed tags
Setting compress to a number shows only the first N tags and hides the rest behind an expandable indicator.
#
Environment
#
Sustainability
#
Urban planning
#
Transport
#
Housing
#
Culture
#
Education
...(4)
<div class="c-tags" id="6ac9f6d089df3" data-component="tags">
<span class="c-tags__tag"># Environment</span> <span class="c-tags__tag"># Sustainability</span> <span class="c-tags__tag"># Urban planning</span> <span class="c-tags__tag is-hidden">#
Transport</span> <span class="c-tags__tag is-hidden"># Housing</span> <span class="c-tags__tag is-hidden"># Culture</span> <span class="c-tags__tag is-hidden"># Education</span> <span class=
"c-tags__tag c-tags__tag-more" data-js-compressed="3" data-js-compressed-class="is-hidden">...(4)</span>
</div>
@tags([
'compress' => 3,
'tags' => [
['label' => 'Environment'],
['label' => 'Sustainability'],
['label' => 'Urban planning'],
['label' => 'Transport'],
['label' => 'Housing'],
['label' => 'Culture'],
['label' => 'Education'],
]
])
@endtags
Formatted tags
With format enabled, tag labels are lowercased and word-spacing is reduced for a compact typographic style.
#
ENVIRONMENT
#
SUSTAINABILITY
#
URBAN PLANNING
#
TRANSPORT
<div class="c-tags c-tags--format" id="6ac9f6d089e9b" data-component="tags">
<span class="c-tags__tag"># ENVIRONMENT</span> <span class="c-tags__tag"># SUSTAINABILITY</span> <span class="c-tags__tag"># URBAN PLANNING</span> <span class="c-tags__tag"># TRANSPORT</span>
</div>
@tags([
'format' => true,
'tags' => [
['label' => 'ENVIRONMENT'],
['label' => 'SUSTAINABILITY'],
['label' => 'URBAN PLANNING'],
['label' => 'TRANSPORT'],
]
])
@endtags
Tags with colour markers
Enabling tagsMarker replaces the # prefix with a small filled circle icon coloured by each tag's color value.
<div class="c-tags" id="6ac9f6d089f31" data-component="tags">
<span class="c-tags__tag"><!-- icon.blade.php -->
<span class="c-icon u-margin__right--05 c-icon--circle c-icon--material c-icon--material-circle c-icon--svg-material c-icon--size-xs" style="color:green;stroke:green;" role="img" data-nosnippet=""
translate="no" aria-label="Icon: Undefined" aria-hidden="false" data-component="icon"><svg aria-hidden="true" focusable="false" xmlns="http://www.w3.org/2000/svg" viewbox="0 0 960 960" fill=
"currentcolor" style="fill:var(--icon-color, currentColor)">
<path d=
"M480 880Q397 880 324.0 848.5Q251 817 197.0 763.0Q143 709 111.5 636.0Q80 563 80 480Q80 397 111.5 324.0Q143 251 197.0 197.0Q251 143 324.0 111.5Q397 80 480 80Q563 80 636.0 111.5Q709 143 763.0 197.0Q817 251 848.5 324.0Q880 397 880 480Q880 563 848.5 636.0Q817 709 763.0 763.0Q709 817 636.0 848.5Q563 880 480 880ZM480 800Q614 800 707.0 707.0Q800 614 800 480Q800 346 707.0 253.0Q614 160 480 160Q346 160 253.0 253.0Q160 346 160 480Q160 614 253.0 707.0Q346 800 480 800ZM480 480Q480 480 480.0 480.0Q480 480 480 480Q480 480 480.0 480.0Q480 480 480 480Q480 480 480.0 480.0Q480 480 480 480Q480 480 480.0 480.0Q480 480 480 480Z">
</path></svg></span> Environment</span> <span class="c-tags__tag"><!-- icon.blade.php -->
<span class="c-icon u-margin__right--05 c-icon--circle c-icon--material c-icon--material-circle c-icon--svg-material c-icon--size-xs" style="color:blue;stroke:blue;" role="img" data-nosnippet=""
translate="no" aria-label="Icon: Undefined" aria-hidden="false" data-component="icon"><svg aria-hidden="true" focusable="false" xmlns="http://www.w3.org/2000/svg" viewbox="0 0 960 960" fill=
"currentcolor" style="fill:var(--icon-color, currentColor)">
<path d=
"M480 880Q397 880 324.0 848.5Q251 817 197.0 763.0Q143 709 111.5 636.0Q80 563 80 480Q80 397 111.5 324.0Q143 251 197.0 197.0Q251 143 324.0 111.5Q397 80 480 80Q563 80 636.0 111.5Q709 143 763.0 197.0Q817 251 848.5 324.0Q880 397 880 480Q880 563 848.5 636.0Q817 709 763.0 763.0Q709 817 636.0 848.5Q563 880 480 880ZM480 800Q614 800 707.0 707.0Q800 614 800 480Q800 346 707.0 253.0Q614 160 480 160Q346 160 253.0 253.0Q160 346 160 480Q160 614 253.0 707.0Q346 800 480 800ZM480 480Q480 480 480.0 480.0Q480 480 480 480Q480 480 480.0 480.0Q480 480 480 480Q480 480 480.0 480.0Q480 480 480 480Q480 480 480.0 480.0Q480 480 480 480Z">
</path></svg></span> Transport</span> <span class="c-tags__tag"><!-- icon.blade.php -->
<span class="c-icon u-margin__right--05 c-icon--circle c-icon--material c-icon--material-circle c-icon--svg-material c-icon--size-xs" style="color:orange;stroke:orange;" role="img" data-nosnippet=
"" translate="no" aria-label="Icon: Undefined" aria-hidden="false" data-component="icon"><svg aria-hidden="true" focusable="false" xmlns="http://www.w3.org/2000/svg" viewbox="0 0 960 960" fill=
"currentcolor" style="fill:var(--icon-color, currentColor)">
<path d=
"M480 880Q397 880 324.0 848.5Q251 817 197.0 763.0Q143 709 111.5 636.0Q80 563 80 480Q80 397 111.5 324.0Q143 251 197.0 197.0Q251 143 324.0 111.5Q397 80 480 80Q563 80 636.0 111.5Q709 143 763.0 197.0Q817 251 848.5 324.0Q880 397 880 480Q880 563 848.5 636.0Q817 709 763.0 763.0Q709 817 636.0 848.5Q563 880 480 880ZM480 800Q614 800 707.0 707.0Q800 614 800 480Q800 346 707.0 253.0Q614 160 480 160Q346 160 253.0 253.0Q160 346 160 480Q160 614 253.0 707.0Q346 800 480 800ZM480 480Q480 480 480.0 480.0Q480 480 480 480Q480 480 480.0 480.0Q480 480 480 480Q480 480 480.0 480.0Q480 480 480 480Q480 480 480.0 480.0Q480 480 480 480Z">
</path></svg></span> Housing</span> <span class="c-tags__tag"><!-- icon.blade.php -->
<span class="c-icon u-margin__right--05 c-icon--circle c-icon--material c-icon--material-circle c-icon--svg-material c-icon--size-xs" style="color:purple;stroke:purple;" role="img" data-nosnippet=
"" translate="no" aria-label="Icon: Undefined" aria-hidden="false" data-component="icon"><svg aria-hidden="true" focusable="false" xmlns="http://www.w3.org/2000/svg" viewbox="0 0 960 960" fill=
"currentcolor" style="fill:var(--icon-color, currentColor)">
<path d=
"M480 880Q397 880 324.0 848.5Q251 817 197.0 763.0Q143 709 111.5 636.0Q80 563 80 480Q80 397 111.5 324.0Q143 251 197.0 197.0Q251 143 324.0 111.5Q397 80 480 80Q563 80 636.0 111.5Q709 143 763.0 197.0Q817 251 848.5 324.0Q880 397 880 480Q880 563 848.5 636.0Q817 709 763.0 763.0Q709 817 636.0 848.5Q563 880 480 880ZM480 800Q614 800 707.0 707.0Q800 614 800 480Q800 346 707.0 253.0Q614 160 480 160Q346 160 253.0 253.0Q160 346 160 480Q160 614 253.0 707.0Q346 800 480 800ZM480 480Q480 480 480.0 480.0Q480 480 480 480Q480 480 480.0 480.0Q480 480 480 480Q480 480 480.0 480.0Q480 480 480 480Q480 480 480.0 480.0Q480 480 480 480Z">
</path></svg></span> Culture</span>
</div>
@tags([
'tagsMarker' => true,
'tags' => [
['label' => 'Environment', 'color' => 'green'],
['label' => 'Transport', 'color' => 'blue'],
['label' => 'Housing', 'color' => 'orange'],
['label' => 'Culture', 'color' => 'purple'],
]
])
@endtags
API
|
Parameter
|
Default
|
Type
|
Description
|
|
style
|
default
|
string
|
-
|
|
componentElement
|
div
|
string
|
-
|
|
beforeLabel
|
#
|
string
|
-
|
|
icon
|
[]
|
array
|
-
|
|
afterLabel
|
|
string
|
-
|
|
format
|
false
|
string|boolean
|
-
|
|
compress
|
false
|
boolean
|
-
|
CSS API
|
Variable
|
Default
|
Type
|
Values
|
Description
|
|
--c-tags--base
|
var(--base)
|
range
|
-
|
Main unit that drives radius and spacing scales.
|
|
--c-tags--color--surface
|
var(--color--surface)
|
color
|
-
|
Surface
|
|
--c-tags--corner-shape
|
var(--corner-shape)
|
select
|
square, round, squircle, circular, bevel, scoop
|
Corner Shape
|
|
--c-tags--color--surface-contrast
|
var(--color--surface-contrast)
|
color
|
-
|
Used for text and icons on surface backgrounds with less contrast.
|
|
--c-tags--color--surface-border
|
var(--color--surface-border)
|
color
|
-
|
Manual companion token for borders on surface elements.
|
|
--c-tags--border-width
|
var(--border-width)
|
range
|
-
|
Size
|
|
--c-tags--shadow-color
|
var(--shadow-color)
|
rgba
|
-
|
Shadow Color
|
|
--c-tags--shadow-amount
|
var(--shadow-amount)
|
range
|
-
|
Multiplier for elevation shadows. 0 = none, 1 = default.
|
