No notes defined.

{% if items.length %}
  <ul class="uol-chips">
    {% for item in items %}
      <li class="uol-chips__item">

        <a {% if item.url %}href="{{item.url}}"{% endif %} class="uol-chips__button">
          <span class="uol-chips__text" role="text">
            <span class="hide-accessible">Cancel</span>
            {{ item.label }}
          </span>
          <span class="uol-chips__delete-icon">
            <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" focusable="false" aria-hidden="true">
              <path fill="#000000" fill-rule="nonzero" d="M19,6.41L17.59,5L12,10.59L6.41,5L5,6.41L10.59,12L5,17.59L6.41,19L12,13.41L17.59,19L19,17.59L13.41,12L19,6.41Z"></path>
            </svg>
          </span>
        </a>

      </li>
    {% endfor %}
  </ul>
{% endif %}
<ul class="uol-chips">

    <li class="uol-chips__item">

        <a class="uol-chips__button">
            <span class="uol-chips__text" role="text">
                <span class="hide-accessible">Cancel</span>
                Option 1
            </span>
            <span class="uol-chips__delete-icon">
                <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" focusable="false" aria-hidden="true">
                    <path fill="#000000" fill-rule="nonzero" d="M19,6.41L17.59,5L12,10.59L6.41,5L5,6.41L10.59,12L5,17.59L6.41,19L12,13.41L17.59,19L19,17.59L13.41,12L19,6.41Z"></path>
                </svg>
            </span>
        </a>

    </li>

    <li class="uol-chips__item">

        <a class="uol-chips__button">
            <span class="uol-chips__text" role="text">
                <span class="hide-accessible">Cancel</span>
                Option 2
            </span>
            <span class="uol-chips__delete-icon">
                <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" focusable="false" aria-hidden="true">
                    <path fill="#000000" fill-rule="nonzero" d="M19,6.41L17.59,5L12,10.59L6.41,5L5,6.41L10.59,12L5,17.59L6.41,19L12,13.41L17.59,19L19,17.59L13.41,12L19,6.41Z"></path>
                </svg>
            </span>
        </a>

    </li>

    <li class="uol-chips__item">

        <a class="uol-chips__button">
            <span class="uol-chips__text" role="text">
                <span class="hide-accessible">Cancel</span>
                Option 4
            </span>
            <span class="uol-chips__delete-icon">
                <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" focusable="false" aria-hidden="true">
                    <path fill="#000000" fill-rule="nonzero" d="M19,6.41L17.59,5L12,10.59L6.41,5L5,6.41L10.59,12L5,17.59L6.41,19L12,13.41L17.59,19L19,17.59L13.41,12L19,6.41Z"></path>
                </svg>
            </span>
        </a>

    </li>

    <li class="uol-chips__item">

        <a class="uol-chips__button">
            <span class="uol-chips__text" role="text">
                <span class="hide-accessible">Cancel</span>
                Option 5 with a really long title that goes onto a second line
            </span>
            <span class="uol-chips__delete-icon">
                <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" focusable="false" aria-hidden="true">
                    <path fill="#000000" fill-rule="nonzero" d="M19,6.41L17.59,5L12,10.59L6.41,5L5,6.41L10.59,12L5,17.59L6.41,19L12,13.41L17.59,19L19,17.59L13.41,12L19,6.41Z"></path>
                </svg>
            </span>
        </a>

    </li>

</ul>
  • Content:
    .uol-chips {
      @extend %text-size-paragraph;
    
      list-style-type: none;
      margin: 0;
      padding: 0;
      display: flex;
      flex-wrap: wrap;
      margin-left: -#{$spacing-1};
      margin-right: -#{$spacing-1};
    }
    
      .uol-chips__item {
        margin: 0 6px 12px;
        list-style-type: none;
        display: inline-block;
      }
    
      .uol-chips__link {
        text-decoration: none;
      }
    
      .uol-chips__button {
        @extend .uol-typography-paragraph;
    
        flex: 1 1 auto;
        display: flex;
        align-items: center;
        border: 0;
        padding: $spacing-2 $spacing-1;
        background-color: #699B9D;
        color: $color-font--dark;
        border-radius: 4px;
        text-align: left;
        text-decoration: none;
    
        @include media(">=uol-media-l") {
          padding: $spacing-1;
        }
    
        &:focus {
          // focus highlight applies to child icon
          outline: none;
        }
      }
    
        .uol-chips__text {
          padding: 0 $spacing-2 0 $spacing-1;
          pointer-events: none;
        }
    
        .uol-chips__delete-icon {
          height: 28px;
          margin-right: $spacing-1;
          pointer-events: none;
    
          svg {
            box-sizing: border-box;
            border: 2px solid $color-brand-2--dark;
            width: 28px;
            height: 28px;
            border-radius: 100%;
            // margin-left: $spacing-2;
            background-color: $color-white;
            pointer-events: none;
    
            path {
              fill: $color-brand-2--dark;
            }
    
            .uol-chips__button:hover & {
              box-shadow:
                0 3px 6px rgba(#000,0.15),
                0 2px 4px rgba(#000,0.12);
            }
    
            .uol-chips__button:focus & {
              background-color: $color-alert--info;
              border-color: $color-white;
              box-shadow: none;
    
              path {
                fill: $color-white;
              }
            }
          }
        }
    
    // Chips contained by search results
    
    .uol-search-results__results {
      .uol-chips {
        padding: $spacing-5 0 $spacing-6;
      }
    }
    
    .uol-chips-ds-container {
      background-image: linear-gradient(152deg, #eae8e6 25%, #f3f2f1 25%, #f3f2f1 50%, #eae8e6 50%, #eae8e6 75%, #f3f2f1 75%, #f3f2f1 100%);
      background-size: 213.01px 113.26px;
      border: 1px solid rgba(201,200,197,.6);
      padding: 24px;
      margin: 0 0 32px 0;
    
      @include media(">=uol-media-m") {
        margin: 0 0 48px 0;
      }
    }
    
  • URL: /components/raw/uol-chips/_chips.scss
  • Filesystem Path: src/library/02-components/chips/_chips.scss
  • Size: 2.2 KB
{
  "items": [
    {
      "value": "option 1",
      "label": "Option 1"
    },
    {
      "value": "option 2",
      "label": "Option 2"
    },
    {
      "value": "option 4",
      "label": "Option 4"
    },
    {
      "value": "option 5 with a really long title that goes onto a second line",
      "label": "Option 5 with a really long title that goes onto a second line"
    }
  ]
}