<a class="link-preview" href="https://example.com/" rel="noopener noreferrer" target="_blank">
<span class="link-preview__inner">
<span class="link-preview__content">
<span class="link-preview__title u-line-clamp u-underline">Lorem ipsum dolor sit amet</span>
<span class="link-preview__description u-line-clamp">Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.</span>
<span class="link-preview__provider" aria-hidden="true">
<svg class="icon icon--link link-preview__provider-icon" viewBox="0 0 200 200" aria-hidden="true">
<use xlink:href="/assets/icons/icons.dcaca1c147.svg#link"></use>
</svg> <span class="link-preview__provider-text">example.com</span>
</span>
</span>
<img class="link-preview__preview" src="https://bildermangel.de/690x388/fe7c09/130f26.webp" alt="" role="presentation" lazy="lazy">
</span>
</a>
{% set link = link | default(null) %}
{% set tag = link ? 'a' : 'div' -%}
<{{ tag }} {{ html_attributes({
id: id ?? false,
class: 'link-preview',
}, link_attributes(link), attrs ?? {}) }}>
<span class="link-preview__inner">
<span class="link-preview__content">
{% if title|default %}
<span class="link-preview__title u-line-clamp u-underline">
{{- title | truncate(120) -}}
</span>
{% endif %}
{% if description|default %}
<span class="link-preview__description u-line-clamp">
{{- description | truncate(200) -}}
</span>
{% endif %}
{% if provider|default %}
<span class="link-preview__provider" aria-hidden="true">
{% include '@icon' with { icon: 'link', class: 'link-preview__provider-icon' } only %}
<span class="link-preview__provider-text">{{- provider -}}</span>
</span>
{% endif %}
</span>
{% if image|default %}
<img {{ html_attributes({
class: 'link-preview__preview',
src: image.src,
srcset: image.src2x|default ? "#{image.src2x} 2x" : (image.srcset ?? false),
sizes: image.sizes ?? false,
width: image.width ?? false,
height: image.height ?? false,
alt: '',
role: 'presentation',
lazy: 'lazy',
}) }}>
{% endif %}
</span>
</{{ tag }}>
{
"title": "Lorem ipsum dolor sit amet",
"description": "Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.",
"link": "https://example.com/",
"provider": "example.com",
"image": {
"src": "https://bildermangel.de/690x388/fe7c09/130f26.webp"
}
}
.link-preview {
container-name: link-preview;
container-type: inline-size;
display: block;
transition-property: scale;
&:is(button:not([disabled]), :any-link):is(:hover, :focus-visible) {
scale: 1.03;
}
}
.link-preview__inner {
--_link-preview-padding-inline: var(--link-preview-padding-inline, clamp(2.4rem, 10cqi, 6rem));
--_link-preview-break-out: calc(var(--_link-preview-padding-inline) * -1 * var(--break-out, 0));
background-color: var(--link-preview-background-color, var(--color-gray-050));
border-color: var(--link-preview-border-color, transparent);
border-radius: var(--link-preview-border-radius, var(--border-radius-x-large));
border-style: var(--link-preview-border-style, solid);
border-width: var(--link-preview-border-width, 0);
box-shadow: var(--box-shadow-xxl);
color: var(--link-preview-color, var(--color-gray-950));
column-gap: var(--_link-preview-padding-inline);
display: flex;
justify-content: space-between;
line-height: var(--link-preview-line-height, var(--line-height-regular));
margin-inline: var(--_link-preview-break-out);
overflow: clip;
padding-inline: var(--_link-preview-padding-inline);
&:has(.link-preview__preview) {
padding-inline-end: 0;
}
}
.link-preview__content {
display: flex;
flex-direction: column;
flex-shrink: 10;
gap: 1rem;
justify-content: center;
padding-block: var(--link-preview-padding-block, clamp(2.4rem, 8cqi, 5rem));
}
.link-preview__title {
--line-clamp: 3;
font-size: var(--font-size-headline-7);
font-weight: var(--font-weight-bold);
@container link-preview (width >= 50rem) {
--line-clamp: 1;
font-size: var(--font-size-headline-6);
}
}
.link-preview__description {
--line-clamp: 2;
font-size: var(--link-preview-description-font-size, var(--font-size-small));
@container link-preview (inline-size < 50rem) {
display: none;
}
}
.link-preview__provider {
align-items: center;
color: var(--link-preview-provider-color, var(--color-gray-700));
display: flex;
font-size: var(--link-preview-provider-font-size, var(--font-size-caption));
gap: 0.5em;
}
.link-preview__provider-icon {
line-height: 0;
}
.link-preview__provider-text {
--line-clamp: 1;
}
.link-preview__preview {
aspect-ratio: 1;
flex-shrink: 0;
inline-size: 40%;
max-inline-size: 20rem;
object-fit: cover;
}
No notes defined.