<a class="tile" href="#">
<span class="tile__text u-underline u-line-clamp">A tile</span>
<span class="tile__icon">
<svg class="icon icon--arrow-right" viewBox="0 0 200 200" aria-hidden="true">
<use xlink:href="/assets/icons/icons.dcaca1c147.svg#arrow-right"></use>
</svg> </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' : 'div' -%}
<{{ tag }} {{ html_attributes({
id: id ?? false,
class: 'tile',
}, link_attributes(link, type=linkType), attrs ?? {}) }}>
{% if text|default %}
<span class="tile__text u-underline u-line-clamp">
{{- text -}}
</span>
{% endif %}
{% if link|default %}
<span class="tile__icon">
{% include '@icon' with { icon: icon } only %}
</span>
{% endif %}
</{{ tag }}>
{
"text": "A tile"
}
@property --_tile-background-offset {
inherits: true;
initial-value: 0;
syntax: '<length>';
}
.tile {
--_tile-background-offset: 0;
--_tile-border-opacity: 0;
--_tile-border-radius: var(--tile-border-radius, var(--border-radius-large));
--_tile-border-color: var(--tile-border-color, var(--color-orange-500));
aspect-ratio: var(--tile-aspect-ratio, 1.5);
color: var(--tile-color, var(--primary-text-color));
container-name: tile;
container-type: inline-size;
display: flex;
flex-direction: column;
flex-shrink: 0;
font-size: var(--tile-font-size, var(--font-size-headline-6));
font-weight: var(--tile-font-weight, var(--font-weight-bold));
gap: var(--tile-gap, 1.6rem);
inline-size: var(--tile-inline-size, 100%);
isolation: isolate;
justify-content: flex-end;
line-height: var(--tile-line-height, var(--line-height-regular));
margin-inline: var(--tile-margin-inline, auto);
max-inline-size: var(--tile-max-inline-size, 40rem);
padding-block: var(--tile-padding-block, 2.4rem);
padding-inline: var(--tile-padding-inline, 2.4rem);
position: relative;
scale: var(--tile-scale, 1);
text-align: var(--tile-text-align, left);
transition-property: scale;
z-index: 2;
&:is(:any-link):is(:hover, :focus-visible, :active) {
--_tile-background-offset: -0.5rem;
--_tile-border-opacity: 1;
--_tile-border-color: var(--tile-border-color--engaged, var(--color-gray-800));
scale: var(--tile-scale--engaged, 1);
}
&:is(:any-link):is(:active) {
scale: var(--tile-scale-active, 0.95);
}
&::before,
&::after {
border-radius: var(--_tile-border-radius);
content: '';
inset: var(--_tile-background-offset, 0);
position: absolute;
transition-property: inset, opacity;
will-change: inset;
}
&::before {
background-color: var(--tile-background-color, var(--color-orange-050));
border-color: var(--_tile-border-color);
border-style: var(--tile-border-style, solid);
border-width: var(--tile-border-width, 2px);
z-index: -1;
}
&::after {
box-shadow: var(--box-shadow-xxl);
opacity: var(--_tile-border-opacity);
pointer-events: none;
z-index: 9;
}
}
.tile__text {
--line-clamp: 3;
--underline-offset: 0.2em;
--underline-height: 1px;
hyphens: manual;
@supports (text-wrap: pretty) {
hyphens: auto;
text-wrap: pretty;
}
}
.tile__icon {
--icon-size: var(--tile-icon-inner-size, 2.2rem);
align-items: center;
aspect-ratio: 1;
background-color: var(--tile-icon-background-color, var(--color-orange-500));
border-radius: 50%;
color: var(--tile-icon-color, var(--color-white));
display: flex;
inline-size: var(--tile-icon-size, 4rem);
justify-content: center;
transition-property: background-color, color;
.tile:is(:any-link):is(:hover, :focus-visible, :active) & {
background-color: var(--tile-icon-background-color--engaged, var(--color-gray-800));
color: var(--tile-icon-color--engaged, var(--color-white));
}
}
No notes defined.