DOTD Component Library

Downloads 

<div class="c-downloads">
      <a href="#" class="c-downloads__item">
          <span class="o-icon o-icon--md c-downloads__icon-type">
              <svg width="24" height="24" viewBox="0 0 24 24" fill="currentcolor" xmlns="http://www.w3.org/2000/svg">
                  <path d="M18.6643 7.69286L14.1643 3.19286C14.0357 3.06429 13.9071 3 13.7143 3H7.28571C6.57857 3 6 3.57857 6 4.28571V19.7143C6 20.4214 6.57857 21 7.28571 21H17.5714C18.2786 21 18.8571 20.4214 18.8571 19.7143V8.14286C18.8571 7.95 18.7929 7.82143 18.6643 7.69286ZM13.7143 4.54286L17.3143 8.14286H13.7143V4.54286ZM17.5714 19.7143H7.28571V4.28571H12.4286V8.14286C12.4286 8.85 13.0071 9.42857 13.7143 9.42857H17.5714V19.7143Z" />
                  <path d="M16.2857 15.8571H8.57143V17.1429H16.2857V15.8571Z" />
                  <path d="M16.2857 12H8.57143V13.2857H16.2857V12Z" />
              </svg>
          </span>
          <div class="c-downloads__title">
              <h5 class="o-heading o-heading--xxs c-downloads__heading">
                  Download Title
              </h5>
              <div class="o-dek o-dek--sm c-downloads__dek">
                  File (194kb)
              </div>
          </div>
          <span class="o-icon c-downloads__icon-download">
              <svg width="24" height="24" viewBox="0 0 24 24" fill="currentcolor" xmlns="http://www.w3.org/2000/svg">
                  <path d="M18.1429 17.1429V19.7143H5.28571V17.1429H4V19.7143C4 20.0553 4.13546 20.3823 4.37658 20.6234C4.6177 20.8645 4.94472 21 5.28571 21H18.1429C18.4838 21 18.8109 20.8645 19.052 20.6234C19.2931 20.3823 19.4286 20.0553 19.4286 19.7143V17.1429H18.1429Z" />
                  <path d="M18.1429 10.7143L17.2364 9.80786L12.3571 14.6807V3H11.0714V14.6807L6.19214 9.80786L5.28571 10.7143L11.7143 17.1429L18.1429 10.7143Z" />
              </svg>
          </span>
      </a>
      <a href="#" class="c-downloads__item">
          <span class="o-icon o-icon--md c-downloads__icon-type">
              <svg width="24" height="24" viewBox="0 0 24 24" fill="currentcolor" xmlns="http://www.w3.org/2000/svg">
                  <path d="M20.9998 13.2858V12.0001H17.1427V18.4286H18.4284V15.8572H20.3569V14.5715H18.4284V13.2858H20.9998Z" />
                  <path d="M13.9284 18.4286H11.357V12.0001H13.9284C14.4397 12.0007 14.93 12.204 15.2915 12.5656C15.6531 12.9271 15.8564 13.4173 15.857 13.9287V16.5001C15.8564 17.0114 15.6531 17.5016 15.2915 17.8631C14.93 18.2247 14.4397 18.428 13.9284 18.4286ZM12.6427 17.1429H13.9284C14.0989 17.1427 14.2623 17.0749 14.3828 16.9544C14.5033 16.8339 14.5711 16.6705 14.5713 16.5001V13.9287C14.5711 13.7582 14.5033 13.5948 14.3828 13.4743C14.2623 13.3538 14.0989 13.286 13.9284 13.2858H12.6427V17.1429Z" />
                  <path d="M8.78564 12.0001H5.5714V18.4286H6.8571V16.5001H8.78564C9.12649 16.4996 9.45325 16.364 9.69426 16.123C9.93528 15.882 10.0709 15.5552 10.0713 15.2144V13.2858C10.071 12.9449 9.93537 12.6181 9.69434 12.3771C9.45331 12.1361 9.12651 12.0005 8.78564 12.0001ZM6.8571 15.2144V13.2858H8.78564L8.78629 15.2144H6.8571Z" />
                  <path d="M15.857 10.7144V8.14301C15.8593 8.05852 15.8432 7.97454 15.8099 7.89685C15.7766 7.81916 15.7269 7.74962 15.6641 7.69302L11.1642 3.19308C11.1076 3.13029 11.0381 3.08053 10.9604 3.04723C10.8827 3.01394 10.7987 2.9979 10.7142 3.00022H4.2857C3.94502 3.00122 3.61858 3.137 3.37768 3.3779C3.13678 3.6188 3.001 3.94524 3 4.28592V19.7143C3 20.0553 3.13546 20.3823 3.37657 20.6234C3.61769 20.8645 3.94471 21 4.2857 21H14.5713V19.7143H4.2857V4.28592H9.42849V8.14301C9.42949 8.4837 9.56527 8.81014 9.80617 9.05104C10.0471 9.29193 10.3735 9.42771 10.7142 9.42871H14.5713V10.7144H15.857ZM10.7142 8.14301V4.54306L14.3141 8.14301H10.7142Z" />
              </svg>
          </span>
          <div class="c-downloads__title">
              <h5 class="o-heading o-heading--xxs c-downloads__heading">
                  Download Title
              </h5>
              <div class="o-dek o-dek--sm c-downloads__dek">
                  File (194kb)
              </div>
          </div>
          <span class="o-icon c-downloads__icon-download">
              <svg width="24" height="24" viewBox="0 0 24 24" fill="currentcolor" xmlns="http://www.w3.org/2000/svg">
                  <path d="M18.1429 17.1429V19.7143H5.28571V17.1429H4V19.7143C4 20.0553 4.13546 20.3823 4.37658 20.6234C4.6177 20.8645 4.94472 21 5.28571 21H18.1429C18.4838 21 18.8109 20.8645 19.052 20.6234C19.2931 20.3823 19.4286 20.0553 19.4286 19.7143V17.1429H18.1429Z" />
                  <path d="M18.1429 10.7143L17.2364 9.80786L12.3571 14.6807V3H11.0714V14.6807L6.19214 9.80786L5.28571 10.7143L11.7143 17.1429L18.1429 10.7143Z" />
              </svg>
          </span>
      </a>
      <a href="#" class="c-downloads__item">
          <span class="o-icon o-icon--md c-downloads__icon-type">
              <svg width="24" height="24" viewBox="0 0 24 24" fill="currentcolor" xmlns="http://www.w3.org/2000/svg">
                  <path d="M18.3357 14.5714L17.7514 20.1071L16.8571 14.5714H15.5714L14.6772 20.1071L14.0929 14.5714H13L13.8743 21H15.34L16.2143 15.6167L17.0886 21H18.5543L19.4286 14.5714H18.3357Z" />
                  <path d="M16.6688 7.68836L12.1688 3.18836C12.0483 3.06779 11.8848 3.00004 11.7143 3H5.28571C4.94483 3.00034 4.618 3.13591 4.37695 3.37695C4.13591 3.618 4.00034 3.94483 4 4.28571V19.7143C4.00039 20.0552 4.13598 20.382 4.37701 20.623C4.61804 20.864 4.94484 20.9996 5.28571 21H10.4286V19.7143H5.28571V4.28571H10.4286V8.14286C10.4289 8.48375 10.5645 8.81057 10.8055 9.05162C11.0466 9.29266 11.3734 9.42823 11.7143 9.42857H15.5714V12H16.8571V8.14286C16.8571 7.97237 16.7894 7.80889 16.6688 7.68836ZM11.7143 4.55192L15.3052 8.14286H11.7143V4.55192Z" />
              </svg>
          </span>
          <div class="c-downloads__title">
              <h5 class="o-heading o-heading--xxs c-downloads__heading">
                  Download Title
              </h5>
              <div class="o-dek o-dek--sm c-downloads__dek">
                  File (194kb)
              </div>
          </div>
          <span class="o-icon c-downloads__icon-download">
              <svg width="24" height="24" viewBox="0 0 24 24" fill="currentcolor" xmlns="http://www.w3.org/2000/svg">
                  <path d="M18.1429 17.1429V19.7143H5.28571V17.1429H4V19.7143C4 20.0553 4.13546 20.3823 4.37658 20.6234C4.6177 20.8645 4.94472 21 5.28571 21H18.1429C18.4838 21 18.8109 20.8645 19.052 20.6234C19.2931 20.3823 19.4286 20.0553 19.4286 19.7143V17.1429H18.1429Z" />
                  <path d="M18.1429 10.7143L17.2364 9.80786L12.3571 14.6807V3H11.0714V14.6807L6.19214 9.80786L5.28571 10.7143L11.7143 17.1429L18.1429 10.7143Z" />
              </svg>
          </span>
      </a>
      <a href="#" class="c-downloads__item">
          <span class="o-icon o-icon--md c-downloads__icon-type">
              <svg width="24" height="24" viewBox="0 0 24 24" fill="currentcolor" xmlns="http://www.w3.org/2000/svg">
                  <path fill-rule="evenodd" clip-rule="evenodd" d="M3 4.5C3 4.08579 3.33579 3.75 3.75 3.75H9.75C9.98607 3.75 10.2084 3.86115 10.35 4.05L12.375 6.75H20.25C20.6642 6.75 21 7.08579 21 7.5V18C21 18.5967 20.7629 19.169 20.341 19.591C19.919 20.0129 19.3467 20.25 18.75 20.25H5.25C4.65326 20.25 4.08097 20.0129 3.65901 19.591C3.23705 19.169 3 18.5967 3 18V4.5ZM4.5 5.25V18C4.5 18.1989 4.57902 18.3897 4.71967 18.5303C4.86032 18.671 5.05109 18.75 5.25 18.75H18.75C18.9489 18.75 19.1397 18.671 19.2803 18.5303C19.421 18.3897 19.5 18.1989 19.5 18V8.25H12C11.7639 8.25 11.5416 8.13885 11.4 7.95L9.375 5.25H4.5Z" />
              </svg>
          </span>
          <div class="c-downloads__title">
              <h5 class="o-heading o-heading--xxs c-downloads__heading">
                  Download Title
              </h5>
              <div class="o-dek o-dek--sm c-downloads__dek">
                  File (194kb)
              </div>
          </div>
          <span class="o-icon c-downloads__icon-download">
              <svg width="24" height="24" viewBox="0 0 24 24" fill="currentcolor" xmlns="http://www.w3.org/2000/svg">
                  <path d="M18.1429 17.1429V19.7143H5.28571V17.1429H4V19.7143C4 20.0553 4.13546 20.3823 4.37658 20.6234C4.6177 20.8645 4.94472 21 5.28571 21H18.1429C18.4838 21 18.8109 20.8645 19.052 20.6234C19.2931 20.3823 19.4286 20.0553 19.4286 19.7143V17.1429H18.1429Z" />
                  <path d="M18.1429 10.7143L17.2364 9.80786L12.3571 14.6807V3H11.0714V14.6807L6.19214 9.80786L5.28571 10.7143L11.7143 17.1429L18.1429 10.7143Z" />
              </svg>
          </span>
      </a>
  </div>
 
{% set base_class = downloads.base_class|default('c-downloads') %}
{% if downloads.items %}
  <div class="{{ bem(base_class, downloads.element, downloads.modifiers, downloads.extra) }}">
    {% for item in downloads.items %}
      <a href="{{ item.link }}" class="{{ bem(base_class, 'item') }}">
        {% set downloads_icon = {
          'pdf': 'document-pdf',
          'word': 'document-word',
          'folder': 'folder',
        }[item.modifiers]|default('document') %}
        {% include "@icon" with {
          "icon": {
            "name": downloads_icon,
            "modifiers": "md",
            "extra": bem(base_class, 'icon-type')
          }
        } %}
        <div class="{{ bem(base_class, 'title') }}">
          {% include "@heading" with {
            "heading": {
              "level": "5",
              "size": "xxs",
              "text": item.title,
              "extra": bem(base_class, 'heading')
            }
          } %}
          {% include "@dek" with {
            "dek": {
              "text": item.dek,
              "modifiers": "sm",
              "extra": bem(base_class, 'dek')
            }
          } %}
        </div>
        {% include "@icon" with {
          "icon": {
            "name": "download",
            "size": "md",
            "extra": bem(base_class, 'icon-download')
          }
        } %}
      </a>
    {% endfor %}
  </div>
{% endif %}
 
{
  "downloads": {
    "items": [
      {
        "modifiers": "document",
        "title": "Download Title",
        "dek": "File (194kb)",
        "link": "#"
      },
      {
        "modifiers": "pdf",
        "title": "Download Title",
        "dek": "File (194kb)",
        "link": "#"
      },
      {
        "modifiers": "word",
        "title": "Download Title",
        "dek": "File (194kb)",
        "link": "#"
      },
      {
        "modifiers": "folder",
        "title": "Download Title",
        "dek": "File (194kb)",
        "link": "#"
      }
    ]
  }
}
  • Content: 
    /* ------------------------------------*\
  $DOWNLOADS
\*------------------------------------ */

.c-downloads {
  display: flex;
  flex-direction: column;
  gap: var(--dotd-space-xs);

  &__item {
    display: flex;
    align-items: center;
    gap: var(--dotd-space);
    padding: var(--dotd-space-xs) var(--dotd-space);
    box-shadow: none;
    background-color: var(--dotd-color-body-background);
    border: var(--dotd-border-width-md) solid var(--dotd-color-border-default-weak);
    transition: all var(--dotd-animation-duration) var(--dotd-animation-timing);

    &:hover,
    &:focus {
      background-color: var(--dotd-color-background-default-strong);
      box-shadow: var(--dotd-box-shadow);
      color: inherit;

      .c-downloads__title {
        color: var(--dotd-color-content-secondary-default);
      }
    }
  }

  &__icon-type {
    color: var(--dotd-color-content-primary-default);
  }

  &__icon-download {
    color: var(--dotd-color-content-secondary-default);
    padding: 0;
  }

  &__title {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: var(--dotd-space-sm);
    transition: all var(--dotd-animation-duration) var(--dotd-animation-timing);
  }
}
  • URL: /components/raw/downloads/_downloads.scss
  • Filesystem Path: components/02-molecules/downloads/_downloads.scss
  • Size: 1.2 KB

No notes defined.