University of Staffordshire Pattern Library

Tag

No notes defined.

<ul class="list--inline">
    <li><span class="tag">tag</span></li>
    <li><span class="tag">long tag</span></li>
    <li><span class="tag">really long tag</span></li>
    <li><span class="tag">even looooonger tag</span></li>
</ul>

<ul class="list--inline">
    <li><a href="#" class="tag">link</a></li>
    <li><a href="#" class="tag">long link</a></li>
    <li><a href="#" class="tag">really long tag</a></li>
    <li><a href="#" class="tag">even looooonger tag</a></li>
</ul>

<ul class="list--inline">
    <li><span class="tag  tag--narrow">narrow tags</span></li>
    <li><span class="tag  tag--narrow">have less padding</span></li>
    <li><span class="tag  tag--narrow">at the sides</span></li>
</ul>

<ul class="list--inline">
    <li><span class="tag  tag--red">red tag</span></li>
    <li><span class="tag  tag--dark-blue">dark blue tag</span></li>
    <li><span class="tag  tag--digital-blue">digital blue tag</span></li>
    <li><span class="tag  tag--neon">neon tag</span></li>
    <li><span class="tag  tag--red  tag--not-rounded">red tag without rounded edges</span></li>
</ul>

<span class="tag">solitary tag</span>

<a href="#" class="tag">solitary linked tag</a>
 
<ul class="list--inline">
  <li><span class="tag">tag</span></li>
  <li><span class="tag">long tag</span></li>
  <li><span class="tag">really long tag</span></li>
  <li><span class="tag">even looooonger tag</span></li>
</ul>

<ul class="list--inline">
  <li><a href="#" class="tag">link</a></li>
  <li><a href="#" class="tag">long link</a></li>
  <li><a href="#" class="tag">really long tag</a></li>
  <li><a href="#" class="tag">even looooonger tag</a></li>
</ul>

<ul class="list--inline">
  <li><span class="tag  tag--narrow">narrow tags</span></li>
  <li><span class="tag  tag--narrow">have less padding</span></li>
  <li><span class="tag  tag--narrow">at the sides</span></li>
</ul>

<ul class="list--inline">
  <li><span class="tag  tag--red">red tag</span></li>
  <li><span class="tag  tag--dark-blue">dark blue tag</span></li>
  <li><span class="tag  tag--digital-blue">digital blue tag</span></li>
  <li><span class="tag  tag--neon">neon tag</span></li>
  <li><span class="tag  tag--red  tag--not-rounded">red tag without rounded edges</span></li>
</ul>

<span class="tag">solitary tag</span>

<a href="#" class="tag">solitary linked tag</a>
  • Content: 
    .tag--narrow {
    padding: 0.35em 0.5em;
}

.tag--not-rounded {
    border-radius: 0;
}

@each $name, $value in $tag-bg-colors {
    .tag--#{$name} {
        background-color: #{$value};
        color: black;
        @if ($name == 'red') {
            color: white;
        }
        @else if (choose-contrast-color($value) == white) {
            color: white;
        }
        
    }
}
  • URL: /components/raw/tag/_tag.scss
  • Filesystem Path: src\components\tag\_tag.scss
  • Size: 409 Bytes