<a class="file" title="Demo for Windows" href="file.zip" download="file.zip">
<span class="file__icon">
<svg class="icon icon--arrow-down-to-line" viewBox="0 0 200 200" aria-hidden="true">
<use xlink:href="/assets/icons/icons.dcaca1c147.svg#arrow-down-to-line"></use>
</svg> </span>
<span class="file__content">
<span class="file__title">
Demo for Windows
</span>
<span class="file__description">
Elastique Pitch Demo V2.2.5
</span>
</span>
</a>
{% set link = link | default(null) %}
{% set linkType = linkType ??? link_type(link) %}
{% set icon = icon ?? link_icon(link=link, type=linkType, always=true) %}
{% set iconPosition = iconPosition ?? 'before' %}
{% set tag = link ? 'a' : 'button' -%}
<{{ tag }} {{ html_attributes({
id: id ?? false,
class: 'file',
type: not link ? (type ??? 'button'),
title: title ?? false,
}, link_attributes(link, type=linkType), attrs ?? {}) }}>
{% if icon|default %}
<span class="file__icon">
{% include '@icon' with { icon: icon } only %}
</span>
{% endif %}
<span class="file__content">
{% if title|default %}
<span class="file__title">
{{ title | componentize(inline_only=true) }}
</span>
{% endif %}
{% if description|default %}
<span class="file__description">
{{ description | componentize(inline_only=true) }}
</span>
{% endif %}
</span>
</{{ tag }}>
{
"title": "Demo for Windows",
"link": "file.zip",
"description": "Elastique Pitch Demo V2.2.5"
}
.file {
--_file-border-color: var(--file-border-color, var(--color-gray-400));
--_file-border-style: var(--file-border-style, solid);
--_file-border-width: var(--file-border-width, 1px);
background-color: var(--file-background-color, var(--color-white));
border-color: var(--_file-border-color);
border-radius: var(--file-border-radius, var(--border-radius-large));
border-style: var(--_file-border-style);
border-width: var(--_file-border-width);
box-shadow: var(--file-box-shadow, var(--box-shadow-xxl));
color: var(--file-color, var(--color-steel-700));
display: grid;
grid-template-columns: 8rem auto;
min-block-size: var(--file-min-block-size, 8rem);
scale: 1;
text-align: start;
transition-property: background-color, border-color, color, scale;
&:is(button:not([disabled]), :any-link):is(:hover, :focus-visible) {
--_file-border-color: var(--file-border-color--engaged, var(--color-gray-800));
background-color: var(--file-background-color--enaged, var(--color-gray-050));
color: var(--file-color--engaged, var(--color-steel-900));
scale: 1.03;
}
}
.file__icon {
--icon-size: 4.8rem;
align-items: center;
border-inline-end-color: var(--_file-border-color);
border-inline-end-style: var(--_file-border-style);
border-inline-end-width: var(--_file-border-width);
color: var(--file-icon-color, var(--color-orange-500));
display: flex;
justify-content: center;
transition-property: border-color;
}
.file__content {
font-size: var(--file-font-size, var(--font-size-default));
line-height: var(--file-line-height, var(--line-height-regular));
padding-block: 1.6rem;
padding-inline: 2.4rem;
}
.file__title {
font-weight: var(--font-weight-bold);
}
.file__description {
display: block;
font-size: 0.8em;
margin-block-start: 0.4rem;
}
No notes defined.