@e-fellows/website-2022

Download-Liste 

<dl id="download-list-75657-22390" class="download-list">
    <div class="download-list__download">
        <dt class="download-list__download-label">
            <svg class="icon icon--calendar download-list__download-icon" viewBox="0 0 200 200" aria-hidden="true">
                <use xlink:href="/assets/icons/icons.3bafb6df0d.svg#calendar"></use>
            </svg>
            Bewerbungsschluss
        </dt>

        <dd class="download-list__download-text-button">
            <div class="download-list__download-text">
                27. APR 2022 18 Uhr
            </div>

            <div class="download-list__download-button">
                <a class="icon-button" href="#">
                    <span class="icon-button__icon">
                        <svg class="icon icon--download" viewBox="0 0 200 200" aria-hidden="true">
                            <use xlink:href="/assets/icons/icons.3bafb6df0d.svg#download"></use>
                        </svg> </span>

                    <span class="icon-button__text u-underline">Herunterladen</span>

                </a>
            </div>
        </dd>
    </div>
    <div class="download-list__download">
        <dt class="download-list__download-label">
            <svg class="icon icon--calendar download-list__download-icon" viewBox="0 0 200 200" aria-hidden="true">
                <use xlink:href="/assets/icons/icons.3bafb6df0d.svg#calendar"></use>
            </svg>
            Veranstaltungstermin
        </dt>

        <dd class="download-list__download-text-button">
            <div class="download-list__download-text">
                27. APR 2022 18 Uhr
            </div>

            <div class="download-list__download-button">
                <a class="icon-button" href="#">
                    <span class="icon-button__icon">
                        <svg class="icon icon--download" viewBox="0 0 200 200" aria-hidden="true">
                            <use xlink:href="/assets/icons/icons.3bafb6df0d.svg#download"></use>
                        </svg> </span>

                    <span class="icon-button__text u-underline">Herunterladen</span>

                </a>
            </div>
        </dd>
    </div>
</dl>
 
{% set id = id ??? html_id('download-list') %}
{% set level = level ?? 2 %}

<dl {{ html_attributes({
  id: id,
  class: 'download-list',
}, attrs ?? {}) }}>
  {% for download in downloads %}
    <div class="download-list__download">
      <dt class="download-list__download-label">
        {% if download.icon|default %}
          {% include '@icon' with {
            icon: download.icon,
            class: 'download-list__download-icon',
          } %}
        {% endif %}

        {{ download.label }}
      </dt>

      <dd class="download-list__download-text-button">
        {% if download.text|default %}
          <div class="download-list__download-text">
            {{ download.text | componentize }}
          </div>
        {% endif %}

        <div class="download-list__download-button">
          {% include '@icon-button' with {
            icon: 'download',
            text: 'Download' | t('site'),
          } | merge(download.button) only %}
        </div>
      </dd>
    </div>
  {% endfor %}
</dl>
 
{
  "downloads": [
    {
      "icon": "calendar",
      "label": "Bewerbungsschluss",
      "text": "27. APR 2022 18 Uhr",
      "button": {
        "link": "#"
      }
    },
    {
      "icon": "calendar",
      "label": "Veranstaltungstermin",
      "text": "27. APR 2022 18 Uhr",
      "button": {
        "link": "#"
      }
    }
  ]
}
  • Content: 
    :root {
  --download-list-icon-size: 1.5em;
  --download-list-column-gap: 2rem;
  --download-list-row-gap: 3rem;
}

.download-list {
  display: grid;
  gap: var(--download-list-row-gap);
}

.download-list__download {
  line-height: var(--line-height-body);
  padding-inline-start: calc(var(--download-list-column-gap) + var(--download-list-icon-size));
  position: relative;
}

.download-list__download-icon {
  font-size: var(--download-list-icon-size);
  inset-block-start: 0;
  inset-inline-start: 0;
  position: absolute;
}

.download-list__download-label {
  font-weight: var(--font-weight-semibold);
}

.download-list__download-text-button {
  margin-block-start: 0.4em;
}

.download-list__download-button {
  margin-block-start: 1em;
}
  • URL: /components/raw/download-list/download-list.scss
  • Filesystem Path: src/components/2-molecules/download-list/download-list.scss
  • Size: 743 Bytes

No notes defined.