England Football

Tag Cloud 

<div class="tag-cloud--container">
    <div class="tag-cloud">
        <div class="tag-cloud__item">
            <span>Article</span>
        </div>
        <div class="tag-cloud__item">
            <span>All ages</span>
        </div>
        <div class="tag-cloud__item">
            <span>Guide</span>
        </div>
        <div class="tag-cloud__item">
            <span>Physical</span>
        </div>
        <div class="tag-cloud__item">
            <span>Psychological</span>
        </div>
        <div class="tag-cloud__item">
            <span>Social</span>
        </div>
    </div>
</div>

No notes defined.

{
  "tags": [
    {
      "name": "Article"
    },
    {
      "name": "All ages"
    },
    {
      "name": "Guide"
    },
    {
      "name": "Physical"
    },
    {
      "name": "Psychological"
    },
    {
      "name": "Social"
    }
  ]
}
  • Content: 
    export default parentElement => {
  const MOBILE_BREAKPOINT = 820;

  const removeTagCloudMargin = () => {
    if (window.innerWidth < MOBILE_BREAKPOINT) {
      // change tag cloud's max width and apply negative transform
      const self = parentElement;

      self.style.maxWidth = `${window.screen.availWidth}px`;
    }
  };

  // Execute function
  removeTagCloudMargin();

  // If window rezizes, re-execute function
  window.addEventListener('resize', removeTagCloudMargin);
};
  • URL: /components/raw/tag-cloud/tag-cloud.js
  • Filesystem Path: src/library/components/tag-cloud/tag-cloud.js
  • Size: 486 Bytes
  • Content: 
    $tag-cloud_margin: 3.2rem;

.tag-cloud {
  display: flex;
  position: absolute;
  transform: translateX(-3.2rem);

  &--container {
    position: relative;
    min-height: 3.6rem;
  }

  &__item {
    border-radius: 10rem;
    background-color: $white;
    border: 0.2rem solid $light-blue;
    padding: 0.6rem 1.6rem;
    scroll-snap-align: start;
    display: inherit;
    margin-right: 0.5rem;

    span {
      font-family: $text-font-ef;
      font-size: 1.4rem;
      font-style: normal;
      font-weight: 400;
      line-height: 2rem;
      letter-spacing: 0.02em;
      text-align: left;
      white-space: nowrap;
      color: $color-primary;
    }
  }
}

@media screen and (max-width: $mq-small) {
  .tag-cloud {
    overflow-x: scroll;
    max-width: 100vw !important;
    padding-bottom: 1rem;
    //scroll-snap-type: x mandatory;
    & > :first-child {
      margin-left: $tag-cloud_margin;
    }

    & > :last-child {
      margin-right: $tag-cloud_margin;
    }
  }
}

@media screen and (min-width: $mq-small) {
  .tag-cloud {
    position: initial;
    transform: none;
    flex-wrap: wrap;
    max-width: 58.4rem;
  }
}
  • URL: /components/raw/tag-cloud/tag-cloud.scss
  • Filesystem Path: src/library/components/tag-cloud/tag-cloud.scss
  • Size: 1.2 KB 
<div class="tag-cloud--container">
  <div class="tag-cloud">
    {{#each tags}}
    <div class="tag-cloud__item">
        <span>{{name}}</span>
    </div>
    {{/each}}
  </div>
</div>