PDJ Brandbox

search-info 

<div class="search-info">
    <div class="search-info__item">
        <span class="search-info__amount">
            <strong>55 results</strong> found
        </span>
    </div>

    <div class="search-info__item">
        <div class="search-info__per-page">
            <div class="search-info__label">
                Results per page
            </div>

            <div class="search-info__select">
                <div class="select select--small">
                    <select name="" class="select__input">
                        <option value="10">10</option>
                        <option value="20">20</option>
                        <option value="50">50</option>
                    </select>

                    <div class="select__trigger">
                        <span class="select__symbol">
                            <svg class="icon-chevron" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16">
                                <path fill="currentColor" d="M11.172 9.82L13 8 9.906 4.99 6.04 1.21c-.281-.28-.703-.28-.914 0l-.914.91c-.281.28-.281.7 0 .91L9.273 8l-5.062 4.97c-.281.28-.281.7 0 .91l.914.91c.281.28.703.28.914 0l5.133-4.97z" />
                            </svg>

                        </span>
                    </div>
                </div>

            </div>
        </div>
    </div>
</div>
 
<div class="search-info">
  <div class="search-info__item">
    <span class="search-info__amount">
      <strong>55 results</strong> found
    </span>
  </div>

  <div class="search-info__item">
    <div class="search-info__per-page">
      <div class="search-info__label">
        Results per page
      </div>

      <div class="search-info__select">
        {{render '@select' }}
      </div>
    </div>
  </div>
</div>
 
/* No context defined. */
  • Content: 
    .search-info {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  width: 100%;
  color: inherit;
  font-size: var(--p--2);
  line-height: 1;
}

.search-info__item {
  flex: 0 0 auto;
}

.search-info__amount {
  color: var(--color--neutrals-5);
}

.search-info__per-page {
  display: flex;
  align-items: center;
}

.search-info__label {
  flex: 0 0 auto;
  margin-right: var(--gap--4);
}

.search-info__select {
  flex: 0 0 auto;
}
  • URL: /components/raw/search-info/search-info.scss
  • Filesystem Path: ../src/03_molecules/search-info/search-info.scss
  • Size: 476 Bytes

No notes defined.