Web Design Guide 2024-10-28 08:44:01 | 2.0.0

Download: Default 

<a class="link__download" href="#">
    <div class=" download ">
        <div class="download__content">
            <span class="download__date ">10.01.12</span>
            <span class="download__headline h4">Drinks menu REHAU ART 01/2015</span>
            <div class="download__text">
                <p>Here you get newest information about best drinks ever!</p>
            </div>

        </div>
        <div class="download__cta">
            <div class="download__mime">
                <div class=" media ">
                    <img class="media__item" src="/images/mime/download_pdf.svg" alt=>
                </div>

            </div>
            <p class="download__info">
                <span class="download__link link">DOWNLOAD</span>
                <br>(PDF, 137 KB)
            </p>
        </div>
    </div>
</a>
 
<a class="link__download" href="#">
  <div class="{{mixes}} download {{modifiers}}">
    {{#content}}
      <div class="download__content">
        {{#date}}<span class="download__date {{modifiers}}">{{{text}}}</span>{{/date}}
        {{#headline}}<span class="download__headline {{modifiers}}">{{{text}}}</span>{{/headline}}
        {{#text}}
          <div class="download__text">
            <p>{{{.}}}</p>
          </div>
        {{/text}}
        {{#number}}<span class="download__number h4">{{{.}}}</span>{{/number}}
      </div>
      {{#if tags}}
        <div class="download__tags">
          {{#each tags}}
            <div class="download__tag"><span>{{label}}:</span>{{#each tags}}{{.}}{{#unless @last}}, {{/unless}}{{/each}}
            </div>
          {{/each}}
        </div>
      {{/if}}
    {{/content}}
    {{#info}}
      <div class="download__cta">
        <div class="download__mime">
          {{render '@atoms-media--image' this}}
        </div>
        <p class="download__info">
          <span class="download__link link">{{{download}}}</span>
          <br>{{{pdf}}}
        </p>
      </div>
  </div>
  {{/info}}
</a>
 
{
  "content": {
    "headline": {
      "modifiers": "h4",
      "text": "Drinks menu REHAU ART 01/2015"
    },
    "date": {
      "text": "10.01.12"
    },
    "text": "Here you get newest information about best drinks ever!"
  },
  "modifiers": null,
  "info": {
    "download": "DOWNLOAD",
    "pdf": "(PDF, 137 KB)",
    "src": "/images/mime/download_pdf.svg"
  }
}
  • Content: 
    .download {
  $root: &;

  padding: $base-padding 0;
  color: $black;

  @include breakpoint(large) {
    padding-right: $base-padding;
  }

  &__date {
    @include typography-level('teaser-date');

    color: $gray-darker;
  }

  &__number {
    display: none;
  }

  &__headline {
    color: $black;
  }

  &__cta {
    display: flex;
    flex-flow: row;
    align-items: center;
    margin-top: $base-margin / 2;
  }

  &__mime {
    width: 3.2rem;
    margin-right: $base-margin;

    .media {
      height: 3.2rem;

      &::before {
        display: none;
      }
    }
  }

  &__tags {
    display: none;
  }

  &__tag {
    @include typography-level('download-tag');

    color: $gray-darker;

    span {
      margin-right: 0.5rem;
      font-weight: $font-weight-bold;
      color: $black;
    }
  }

  &__info {
    @include typography-level('download-info');

    text-transform: uppercase;
  }

  &__link {
    @include typography-level('download-link');

    color: $primary;
  }

  &--horizontal {
    @include breakpoint(large) {
      display: flex;
      flex-flow: row;
      align-items: flex-end;

      #{$root}__content {
        width: 50%;
      }
    }

    &.-inverted {
      flex-flow: row nowrap;
      align-items: center;
      padding: 2 * $base-padding 0;
      border-bottom: 1px solid $gray-lighter;

      @include breakpoint(small) {
        //important order: need to be before medium breakpoint
        #{$root}__content,
        #{$root}__cta {
          flex: 0 0 auto;
        }
      }

      @include breakpoint(medium) {
        display: flex;

        #{$root}__content {
          flex: 1 1 0;
          padding: 0 2.4 * $base-margin;
        }

        #{$root}__cta {
          justify-content: center;
          order: 1;
          width: #{percentage(3 / 12)};
          margin: 0;
        }
      }

      @include breakpoint(large) {
        #{$root}__cta {
          width: #{percentage(2 / 12)};
        }

        #{$root}__content {
          padding: 0 3.2 * $base-padding;
        }
      }

      #{$root}__content {
        order: 2;
        width: auto;
      }

      #{$root}__tags {
        display: block;
        order: 3;
        width: #{percentage(4 / 12)};
      }
    }
  }

  &--compact {
    padding-top: 0;
    border-bottom: 1px solid $gray-lighter;

    #{$root}__content {
      display: flex;

      &::after {
        $symbol-next: map-get($icons, 'download');
        @include icon-content-extended($symbol-next);
        order: 3;
      }
    }

    #{$root}__headline {
      flex: 1 1 0;
      order: 0;
    }

    #{$root}__number {
      display: block;
      order: 1;
    }

    #{$root}__date {
      order: 2;
    }

    #{$root}__date,
    #{$root}__number {
      padding: 0 $base-padding;
    }

    #{$root}__cta,
    #{$root}__text {
      display: none;
    }
  }
}

.link__download {
  $root: '.download';

  display: block;

  .download {
    pointer-events: none;
  }

  &:hover,
  &:focus {
    text-decoration: none;

    .link {
      text-decoration: underline;
    }

    .download {
      &__link {
        text-decoration: underline;
      }
    }
  }
}
  • URL: /components/raw/molecules-download/_download.scss
  • Filesystem Path: src/components/02-ui-components/02-molecules/11-download/_download.scss
  • Size: 3.2 KB

There are no notes for this item.