PDJ Brandbox

store-grid 

<section class="store-grid">
    <div class="store-grid__inner">
        <div class="store-grid__item">
            <div class="store-grid__item__inner">
                <span class="store-grid__label">Name online store</span>
                <span class="store-grid__link"><a href="https://www.onlinestore.com" class="link link--colored">
                        <span class="link__label">www.onlinestore.com</span>
                    </a>
                </span>
            </div>
        </div>
        <div class="store-grid__item">
            <div class="store-grid__item__inner">
                <span class="store-grid__label">Name online store</span>
                <span class="store-grid__link"><a href="https://www.onlinestore.com" class="link link--colored">
                        <span class="link__label">www.onlinestore.com</span>
                    </a>
                </span>
            </div>
        </div>
        <div class="store-grid__item">
            <div class="store-grid__item__inner">
                <span class="store-grid__label">Name online store</span>
                <span class="store-grid__link"><a href="https://www.onlinestore.com" class="link link--colored">
                        <span class="link__label">www.onlinestore.com</span>
                    </a>
                </span>
            </div>
        </div>
        <div class="store-grid__item">
            <div class="store-grid__item__inner">
                <span class="store-grid__label">Name online store</span>
                <span class="store-grid__link"><a href="https://www.onlinestore.com" class="link link--colored">
                        <span class="link__label">www.onlinestore.com</span>
                    </a>
                </span>
            </div>
        </div>
        <div class="store-grid__item">
            <div class="store-grid__item__inner">
                <span class="store-grid__label">Name online store</span>
                <span class="store-grid__link"><a href="https://www.onlinestore.com" class="link link--colored">
                        <span class="link__label">www.onlinestore.com</span>
                    </a>
                </span>
            </div>
        </div>
        <div class="store-grid__item">
            <div class="store-grid__item__inner">
                <span class="store-grid__label">Name online store</span>
                <span class="store-grid__link"><a href="https://www.onlinestore.com" class="link link--colored">
                        <span class="link__label">www.onlinestore.com</span>
                    </a>
                </span>
            </div>
        </div>
        <div class="store-grid__item">
            <div class="store-grid__item__inner">
                <span class="store-grid__label">Name online store</span>
                <span class="store-grid__link"><a href="https://www.onlinestore.com" class="link link--colored">
                        <span class="link__label">www.onlinestore.com</span>
                    </a>
                </span>
            </div>
        </div>
        <div class="store-grid__item">
            <div class="store-grid__item__inner">
                <span class="store-grid__label">Name online store</span>
                <span class="store-grid__link"><a href="https://www.onlinestore.com" class="link link--colored">
                        <span class="link__label">www.onlinestore.com</span>
                    </a>
                </span>
            </div>
        </div>
        <div class="store-grid__item">
            <div class="store-grid__item__inner">
                <span class="store-grid__label">Name online store</span>
                <span class="store-grid__link"><a href="https://www.onlinestore.com" class="link link--colored">
                        <span class="link__label">www.onlinestore.com</span>
                    </a>
                </span>
            </div>
        </div>
        <div class="store-grid__item">
            <div class="store-grid__item__inner">
                <span class="store-grid__label">Name online store</span>
                <span class="store-grid__link"><a href="https://www.onlinestore.com" class="link link--colored">
                        <span class="link__label">www.onlinestore.com</span>
                    </a>
                </span>
            </div>
        </div>
        <div class="store-grid__item">
            <div class="store-grid__item__inner">
                <span class="store-grid__label">Name online store</span>
                <span class="store-grid__link"><a href="https://www.onlinestore.com" class="link link--colored">
                        <span class="link__label">www.onlinestore.com</span>
                    </a>
                </span>
            </div>
        </div>
        <div class="store-grid__item">
            <div class="store-grid__item__inner">
                <span class="store-grid__label">Name online store</span>
                <span class="store-grid__link"><a href="https://www.onlinestore.com" class="link link--colored">
                        <span class="link__label">www.onlinestore.com</span>
                    </a>
                </span>
            </div>
        </div>
        <div class="store-grid__item">
            <div class="store-grid__item__inner">
                <span class="store-grid__label">Name online store</span>
                <span class="store-grid__link"><a href="https://www.onlinestore.com" class="link link--colored">
                        <span class="link__label">www.onlinestore.com</span>
                    </a>
                </span>
            </div>
        </div>
        <div class="store-grid__item">
            <div class="store-grid__item__inner">
                <span class="store-grid__label">Name online store</span>
                <span class="store-grid__link"><a href="https://www.onlinestore.com" class="link link--colored">
                        <span class="link__label">www.onlinestore.com</span>
                    </a>
                </span>
            </div>
        </div>
        <div class="store-grid__item">
            <div class="store-grid__item__inner">
                <span class="store-grid__label">Name online store</span>
                <span class="store-grid__link"><a href="https://www.onlinestore.com" class="link link--colored">
                        <span class="link__label">www.onlinestore.com</span>
                    </a>
                </span>
            </div>
        </div>
        <div class="store-grid__item">
            <div class="store-grid__item__inner">
                <span class="store-grid__label">Name online store</span>
                <span class="store-grid__link"><a href="https://www.onlinestore.com" class="link link--colored">
                        <span class="link__label">www.onlinestore.com</span>
                    </a>
                </span>
            </div>
        </div>
        <div class="store-grid__item">
            <div class="store-grid__item__inner">
                <span class="store-grid__label">Name online store</span>
                <span class="store-grid__link"><a href="https://www.onlinestore.com" class="link link--colored">
                        <span class="link__label">www.onlinestore.com</span>
                    </a>
                </span>
            </div>
        </div>
        <div class="store-grid__item">
            <div class="store-grid__item__inner">
                <span class="store-grid__label">Name online store</span>
                <span class="store-grid__link"><a href="https://www.onlinestore.com" class="link link--colored">
                        <span class="link__label">www.onlinestore.com</span>
                    </a>
                </span>
            </div>
        </div>
        <div class="store-grid__item">
            <div class="store-grid__item__inner">
                <span class="store-grid__label">Name online store</span>
                <span class="store-grid__link"><a href="https://www.onlinestore.com" class="link link--colored">
                        <span class="link__label">www.onlinestore.com</span>
                    </a>
                </span>
            </div>
        </div>
        <div class="store-grid__item">
            <div class="store-grid__item__inner">
                <span class="store-grid__label">Name online store</span>
                <span class="store-grid__link"><a href="https://www.onlinestore.com" class="link link--colored">
                        <span class="link__label">www.onlinestore.com</span>
                    </a>
                </span>
            </div>
        </div>
    </div>
</section>
 
<section class="store-grid">
  <div class="store-grid__inner">
    {{#each stores }}
      <div class="store-grid__item">
        <div class="store-grid__item__inner">
          <span class="store-grid__label">{{this.name}}</span>
          <span class="store-grid__link">{{render '@link--colored' this.link}}</span>
        </div>
      </div>
    {{/each}}
  </div>
</section>
 
stores:
  - name: Name online store
    link:
      label: www.onlinestore.com
      url: https://www.onlinestore.com
      modifier: colored
  - name: Name online store
    link:
      label: www.onlinestore.com
      url: https://www.onlinestore.com
      modifier: colored
  - name: Name online store
    link:
      label: www.onlinestore.com
      url: https://www.onlinestore.com
      modifier: colored
  - name: Name online store
    link:
      label: www.onlinestore.com
      url: https://www.onlinestore.com
      modifier: colored
  - name: Name online store
    link:
      label: www.onlinestore.com
      url: https://www.onlinestore.com
      modifier: colored
  - name: Name online store
    link:
      label: www.onlinestore.com
      url: https://www.onlinestore.com
      modifier: colored
  - name: Name online store
    link:
      label: www.onlinestore.com
      url: https://www.onlinestore.com
      modifier: colored
  - name: Name online store
    link:
      label: www.onlinestore.com
      url: https://www.onlinestore.com
      modifier: colored
  - name: Name online store
    link:
      label: www.onlinestore.com
      url: https://www.onlinestore.com
      modifier: colored
  - name: Name online store
    link:
      label: www.onlinestore.com
      url: https://www.onlinestore.com
      modifier: colored
  - name: Name online store
    link:
      label: www.onlinestore.com
      url: https://www.onlinestore.com
      modifier: colored
  - name: Name online store
    link:
      label: www.onlinestore.com
      url: https://www.onlinestore.com
      modifier: colored
  - name: Name online store
    link:
      label: www.onlinestore.com
      url: https://www.onlinestore.com
      modifier: colored
  - name: Name online store
    link:
      label: www.onlinestore.com
      url: https://www.onlinestore.com
      modifier: colored
  - name: Name online store
    link:
      label: www.onlinestore.com
      url: https://www.onlinestore.com
      modifier: colored
  - name: Name online store
    link:
      label: www.onlinestore.com
      url: https://www.onlinestore.com
      modifier: colored
  - name: Name online store
    link:
      label: www.onlinestore.com
      url: https://www.onlinestore.com
      modifier: colored
  - name: Name online store
    link:
      label: www.onlinestore.com
      url: https://www.onlinestore.com
      modifier: colored
  - name: Name online store
    link:
      label: www.onlinestore.com
      url: https://www.onlinestore.com
      modifier: colored
  - name: Name online store
    link:
      label: www.onlinestore.com
      url: https://www.onlinestore.com
      modifier: colored
  • Content: 
    .store-grid {
  overflow: hidden;
}

.store-grid__inner {
  @media (min-width: 750px) {
    display: flex;
    flex-wrap: wrap;
    margin: calc(var(--gap) * -4);
  }
}

.store-grid__item {
  margin-top: calc(var(--gap) * 8);

  @media (min-width: 750px) {
    flex: 0 0 calc(100% / 3);
    margin-top: 0;
  }

  @media (min-width: 1100px) {
    flex: 0 0 25%;
  }

  &:first-child {
    margin-top: 0;
  }
}

.store-grid__item__inner {
  @media (min-width: 750px) {
    padding: calc(var(--gap) * 4);
  }
}

.store-grid__label {
  display: block;
  font-weight: 500;
}

.store-grid__link {
  font-weight: 400;
}
  • URL: /components/raw/store-grid/store-grid.scss
  • Filesystem Path: ../src/04_organisms/store-grid/store-grid.scss
  • Size: 613 Bytes

No notes defined.