‹ Components

7.3

_ui-tag-cloud.scss

Tag cloud .ui-tag-cloud

Modifiers:

  • .small – Small variation
  • .large – Large variation
  • .ellipsed – Variation with a fixed width and ellipsis effect applied
  • .compact – Variation with a counters being hidden via CSS even if they’re in the HTML output 
<ul class='tag-cloud-label ui-tag-cloud'>
<li class='ui-tag-cloud-item'>
<a class='ui-tag-button' href='#'>
<i class='ui-tag-icon icon-tag-mini'></i>

Kunst

<span class='ui-tag-counter'>
12
</span>
</a>

</li>
<li class='ui-tag-cloud-item'>
<a class='ui-tag-button' href='#'>
<i class='ui-tag-icon icon-tag-mini'></i>

Fotografie

<span class='ui-tag-counter'>
34
</span>
</a>

</li>
<li class='ui-tag-cloud-item'>
<a class='ui-tag-button' href='#'>
<i class='ui-tag-icon icon-tag-mini'></i>

Design

<span class='ui-tag-counter'>
56
</span>
</a>

</li>
<li class='ui-tag-cloud-item'>
<a class='ui-tag-button' href='#'>
<i class='ui-tag-icon icon-tag-mini'></i>

Fotografie

<span class='ui-tag-counter'>
78
</span>
</a>

</li>
<li class='ui-tag-cloud-item'>
<a class='ui-tag-button' href='#'>
<i class='ui-tag-icon icon-tag-mini'></i>

Art

<span class='ui-tag-counter'>
90
</span>
</a>

</li>

</ul>
.small 
<ul class='small tag-cloud-label ui-tag-cloud'>
<li class='ui-tag-cloud-item'>
<a class='ui-tag-button small' href='#'>
<i class='ui-tag-icon icon-tag-mini'></i>

Kunst

<span class='ui-tag-counter'>
12
</span>
</a>

</li>
<li class='ui-tag-cloud-item'>
<a class='ui-tag-button small' href='#'>
<i class='ui-tag-icon icon-tag-mini'></i>

Fotografie

<span class='ui-tag-counter'>
34
</span>
</a>

</li>
<li class='ui-tag-cloud-item'>
<a class='ui-tag-button small' href='#'>
<i class='ui-tag-icon icon-tag-mini'></i>

Design

<span class='ui-tag-counter'>
56
</span>
</a>

</li>
<li class='ui-tag-cloud-item'>
<a class='ui-tag-button small' href='#'>
<i class='ui-tag-icon icon-tag-mini'></i>

Fotografie

<span class='ui-tag-counter'>
78
</span>
</a>

</li>
<li class='ui-tag-cloud-item'>
<a class='ui-tag-button small' href='#'>
<i class='ui-tag-icon icon-tag-mini'></i>

Art

<span class='ui-tag-counter'>
90
</span>
</a>

</li>

</ul>
.large 
<ul class='large tag-cloud-label ui-tag-cloud'>
<li class='ui-tag-cloud-item'>
<a class='ui-tag-button large' href='#'>
<i class='ui-tag-icon icon-tag'></i>

Kunst

<span class='ui-tag-counter'>
12
</span>
</a>

</li>
<li class='ui-tag-cloud-item'>
<a class='ui-tag-button large' href='#'>
<i class='ui-tag-icon icon-tag'></i>

Fotografie

<span class='ui-tag-counter'>
34
</span>
</a>

</li>
<li class='ui-tag-cloud-item'>
<a class='ui-tag-button large' href='#'>
<i class='ui-tag-icon icon-tag'></i>

Design

<span class='ui-tag-counter'>
56
</span>
</a>

</li>
<li class='ui-tag-cloud-item'>
<a class='ui-tag-button large' href='#'>
<i class='ui-tag-icon icon-tag'></i>

Fotografie

<span class='ui-tag-counter'>
78
</span>
</a>

</li>
<li class='ui-tag-cloud-item'>
<a class='ui-tag-button large' href='#'>
<i class='ui-tag-icon icon-tag'></i>

Art

<span class='ui-tag-counter'>
90
</span>
</a>

</li>

</ul>
<ul class='tag-cloud-label ui-tag-cloud'>
<li class='ui-tag-cloud-item'>
<a class='ui-tag-button' href='#'>
<i class='ui-tag-icon icon-tag-mini'></i>

Freizeit

</a>

</li>
<li class='ui-tag-cloud-item'>
<a class='ui-tag-button' href='#'>
<i class='ui-tag-icon icon-tag-mini'></i>

Mode

</a>

</li>
<li class='ui-tag-cloud-item'>
<a class='ui-tag-button' href='#'>
<i class='ui-tag-icon icon-tag-mini'></i>

Outdoor

</a>

</li>
<li class='ui-tag-cloud-item'>
<a class='ui-tag-button' href='#'>
<i class='ui-tag-icon icon-tag-mini'></i>

Sport

</a>

</li>
<li class='ui-tag-cloud-item'>
<a class='ui-tag-button' href='#'>
<i class='ui-tag-icon icon-tag-mini'></i>

Natur

</a>

</li>

</ul>
<ul class='tag-cloud-person ui-tag-cloud'>
<li class='ui-tag-cloud-item'>
<a class='ui-tag-button' href='#'>
<i class='ui-tag-icon icon-user-mini'></i>

Name, Surname

</a>

</li>
<li class='ui-tag-cloud-item'>
<a class='ui-tag-button' href='#'>
<i class='ui-tag-icon icon-user-mini'></i>

Name, Surname

</a>

</li>
<li class='ui-tag-cloud-item'>
<a class='ui-tag-button' href='#'>
<i class='ui-tag-icon icon-user-mini'></i>

Name, Surname

</a>

</li>
<li class='ui-tag-cloud-item'>
<a class='ui-tag-button' href='#'>
<i class='ui-tag-icon icon-user-mini'></i>

Name, Surname

</a>

</li>
<li class='ui-tag-cloud-item'>
<a class='ui-tag-button' href='#'>
<i class='ui-tag-icon icon-user-mini'></i>

Name, Surname

</a>

</li>

</ul>
<ul class='tag-cloud-group ui-tag-cloud'>
<li class='ui-tag-cloud-item'>
<a class='ui-tag-button' href='#'>
<i class='ui-tag-icon icon-group-mini'></i>

Group 1

</a>

</li>
<li class='ui-tag-cloud-item'>
<a class='ui-tag-button' href='#'>
<i class='ui-tag-icon icon-group-mini'></i>

Group 2

</a>

</li>
<li class='ui-tag-cloud-item'>
<a class='ui-tag-button' href='#'>
<i class='ui-tag-icon icon-group-mini'></i>

Group 3

</a>

</li>
<li class='ui-tag-cloud-item'>
<a class='ui-tag-button' href='#'>
<i class='ui-tag-icon icon-group-mini'></i>

Group 4

</a>

</li>
<li class='ui-tag-cloud-item'>
<a class='ui-tag-button' href='#'>
<i class='ui-tag-icon icon-group-mini'></i>

Group 5

</a>

</li>

</ul>
<ul class='ui-tag-cloud'>
<li class='ui-tag-cloud-item'>
<a class='ui-tag-button' href='#'>
Term 1

</a>

</li>
<li class='ui-tag-cloud-item'>
<a class='ui-tag-button' href='#'>
Term 2

</a>

</li>
<li class='ui-tag-cloud-item'>
<a class='ui-tag-button' href='#'>
Term 3

</a>

</li>
<li class='ui-tag-cloud-item'>
<a class='ui-tag-button' href='#'>
Term 4

</a>

</li>
<li class='ui-tag-cloud-item'>
<a class='ui-tag-button' href='#'>
Term 5

</a>

</li>

</ul>
.ellipsed 
<ul class='ellipsed tag-cloud-label ui-tag-cloud'>
<li class='ui-tag-cloud-item'>
<a class='ui-tag-button ellipsed' href='#' title='Title of a long tag'>
<i class='ui-tag-icon icon-tag-mini'></i>

A rather long tag name to test ellipsed tag clouds

<span class='ui-tag-counter'>
12
</span>
</a>

</li>
<li class='ui-tag-cloud-item'>
<a class='ui-tag-button ellipsed' href='#' title='Title of a long tag'>
<i class='ui-tag-icon icon-tag-mini'></i>

A rather long tag name to test ellipsed tag clouds

<span class='ui-tag-counter'>
34
</span>
</a>

</li>
<li class='ui-tag-cloud-item'>
<a class='ui-tag-button ellipsed' href='#' title='Title of a long tag'>
<i class='ui-tag-icon icon-tag-mini'></i>

A rather long tag name to test ellipsed tag clouds

<span class='ui-tag-counter'>
56
</span>
</a>

</li>
<li class='ui-tag-cloud-item'>
<a class='ui-tag-button ellipsed' href='#' title='Title of a long tag'>
<i class='ui-tag-icon icon-tag-mini'></i>

A rather long tag name to test ellipsed tag clouds

<span class='ui-tag-counter'>
78
</span>
</a>

</li>
<li class='ui-tag-cloud-item'>
<a class='ui-tag-button ellipsed' href='#' title='Title of a long tag'>
<i class='ui-tag-icon icon-tag-mini'></i>

A rather long tag name to test ellipsed tag clouds

<span class='ui-tag-counter'>
90
</span>
</a>

</li>

</ul>
.compact 
<ul class='compact tag-cloud-group ui-tag-cloud'>
<li class='ui-tag-cloud-item'>
<a class='ui-tag-button compact' href='#'>
<i class='ui-tag-icon icon-group-mini'></i>

Group Name

<span class='ui-tag-counter'>
12
</span>
</a>

</li>
<li class='ui-tag-cloud-item'>
<a class='ui-tag-button compact' href='#'>
<i class='ui-tag-icon icon-group-mini'></i>

Group Name

<span class='ui-tag-counter'>
34
</span>
</a>

</li>
<li class='ui-tag-cloud-item'>
<a class='ui-tag-button compact' href='#'>
<i class='ui-tag-icon icon-group-mini'></i>

Group Name

<span class='ui-tag-counter'>
56
</span>
</a>

</li>
<li class='ui-tag-cloud-item'>
<a class='ui-tag-button compact' href='#'>
<i class='ui-tag-icon icon-group-mini'></i>

Group Name

<span class='ui-tag-counter'>
78
</span>
</a>

</li>
<li class='ui-tag-cloud-item'>
<a class='ui-tag-button compact' href='#'>
<i class='ui-tag-icon icon-group-mini'></i>

Group Name

<span class='ui-tag-counter'>
90
</span>
</a>

</li>

</ul>