HomeComponents

Cloud / Tags

Tag

Default
With close X
Full width
Basic tag
Tag with close
Tag full width
Tag full width with close

Usage

<!-- Tag -->
<div class="ui-tag">...</div>

<!-- With X -->
<!-- Add a modifier class "ui-tag--close" on the tag element and a button with class "ui-tag__close" -->
<div class="ui-tag ui-tag--close">...<button class="ui-tag__close"></button></div>

<!-- Full width -->
<!-- Each tag can individually have a "ui-tag--fullwidth" modifier class -->
<div class="ui-tag ui-tag--fullwidth">...</div>
<div class="ui-tag ui-tag--fullwidth ui-tag--close">...<button class="ui-tag__close"></button></div>

Cloud

  • HTML
  • CSS
  • Javascript
  • ES6
  • React
  • Accessibility
  • AEM
  • Responsive Web Design
  • HTML
  • CSS
  • Javascript
  • ES6
  • React
  • Accessibility
  • AEM
  • Responsive Web Design
  • HTML
  • Javascript
  • ES6
  • Responsive Web Design

Usage

<!-- Cloud -->
<ul class="ui-cloud">
  <li class="ui-tag">...</li>
  <li class="ui-tag">...</li>
  <li class="ui-tag">...</li>
</ul>

<!-- Cloud with X -->
<ul class="ui-cloud">
  <li class="ui-tag ui-tag--close">...<button class="ui-tag__close"></button></li>
  <li class="ui-tag ui-tag--close">...<button class="ui-tag__close"></button></li>
  <li class="ui-tag ui-tag--close">...<button class="ui-tag__close"></button></li>
</ul>

<!-- Cloud full width -->
<!-- Apply a class "ui-cloud--fullwidth" to the cloud component and all tags will be fullwidth -->
<ul class="ui-cloud ui-cloud--fullwidth">
  <li class="ui-tag">...</li>
  <li class="ui-tag">...<button class="ui-tag__close"></button></li>
  <li class="ui-tag">...</li>
</ul>
Refinitiv © 2020