Copy environment

Download Button

<a href="http://www.kalale.ee/galerii/1EAA/11970439583333" download class="button button--icon     download-button
     ">
    <span class="button__pseudo-icon">
        <svg class="icon  button__icon">
            <use xlink:href="../../inc/svg/global.49d3f64de1a3f5ccf16c763316702027.svg#download-light"></use>
        </svg>

    </span>

    <span class="button__inner" data-text="">
        <span class="button__text">

            <svg class="icon  button__icon">
                <use xlink:href="../../inc/svg/global.49d3f64de1a3f5ccf16c763316702027.svg#download-light"></use>
            </svg>

        </span>
    </span>
</a>
{% set BEM %}
    download-button
    {% if modifier %} {{ modifier }}{% endif %}
    {%- if class %} {{ class }}{% endif %}
{% endset %}

{% include '@button' with {class: BEM, modifier: 'button--icon' , data: {icon: 'download-light', link: data.link, download: 'true'}} %}
{
  "language": "en-US",
  "data": {
    "link": "http://www.kalale.ee/galerii/1EAA/11970439583333"
  }
}
  • Content:
    .download-button {
        position: absolute; /* stylelint-disable-line plugin/no-unsupported-browser-features */
        top: 24px;
        right: 16px;
        z-index: map_get($zindex, downloadButton);
        background-color: var(--color-background);
        transition: background-color $transition-duration $transition-easing;
    
        @include bp(sm-min) {
            position: fixed; /* stylelint-disable-line plugin/no-unsupported-browser-features */
            top: 84px;
            right: 32px;
        }
    }
    
  • URL: /components/raw/download-button/download-button.scss
  • Filesystem Path: src/patterns/components/download-button/download-button.scss
  • Size: 479 Bytes
  • Handle: @download-button--default
  • Filesystem Path: src/patterns/components/download-button/download-button.twig
  • References (1): @button
  • Referenced by (1): @detail-preview