<div class="c-link-list">
<a class="o-link c-link-list__item" href="#" target="_blank" rel="noreferrer">
<span class="o-link__label">
Link
<span class="o-icon">
<svg width="24" height="24" viewBox="0 0 24 24" fill="currentcolor" xmlns="http://www.w3.org/2000/svg">
<path d="M18.2308 21H4.38462C4.01754 20.9995 3.66565 20.8535 3.40609 20.5939C3.14653 20.3344 3.00049 19.9825 3 19.6154V5.76923C3.00049 5.40216 3.14653 5.05026 3.40609 4.79071C3.66565 4.53115 4.01754 4.38511 4.38462 4.38462H11.3077V5.76923H4.38462V19.6154H18.2308V12.6923H19.6154V19.6154C19.6149 19.9825 19.4689 20.3344 19.2093 20.5939C18.9497 20.8535 18.5978 20.9995 18.2308 21Z" />
<path d="M14.0769 3V4.38462H18.6365L12.6923 10.3288L13.6712 11.3077L19.6154 5.36354V9.92308H21V3H14.0769Z" />
</svg>
</span>
</span>
<span class="o-icon">
<svg width="24" height="24" viewBox="0 0 24 24" fill="currentcolor" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd" d="M9.29289 7.29289C9.68342 6.90237 10.3166 6.90237 10.7071 7.29289L14.7071 11.2929C15.0976 11.6834 15.0976 12.3166 14.7071 12.7071L10.7071 16.7071C10.3166 17.0976 9.68342 17.0976 9.29289 16.7071C8.90237 16.3166 8.90237 15.6834 9.29289 15.2929L12.5858 12L9.29289 8.70711C8.90237 8.31658 8.90237 7.68342 9.29289 7.29289Z" />
</svg>
</span>
</a>
<a class="o-link c-link-list__item" href="#" target="_self">
<span class="o-link__label">
Link
</span>
<span class="o-icon">
<svg width="24" height="24" viewBox="0 0 24 24" fill="currentcolor" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd" d="M9.29289 7.29289C9.68342 6.90237 10.3166 6.90237 10.7071 7.29289L14.7071 11.2929C15.0976 11.6834 15.0976 12.3166 14.7071 12.7071L10.7071 16.7071C10.3166 17.0976 9.68342 17.0976 9.29289 16.7071C8.90237 16.3166 8.90237 15.6834 9.29289 15.2929L12.5858 12L9.29289 8.70711C8.90237 8.31658 8.90237 7.68342 9.29289 7.29289Z" />
</svg>
</span>
</a>
<a class="o-link c-link-list__item" href="#" target="_self">
<span class="o-link__label">
Link
</span>
<span class="o-icon">
<svg width="24" height="24" viewBox="0 0 24 24" fill="currentcolor" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd" d="M9.29289 7.29289C9.68342 6.90237 10.3166 6.90237 10.7071 7.29289L14.7071 11.2929C15.0976 11.6834 15.0976 12.3166 14.7071 12.7071L10.7071 16.7071C10.3166 17.0976 9.68342 17.0976 9.29289 16.7071C8.90237 16.3166 8.90237 15.6834 9.29289 15.2929L12.5858 12L9.29289 8.70711C8.90237 8.31658 8.90237 7.68342 9.29289 7.29289Z" />
</svg>
</span>
</a>
<a class="o-link c-link-list__item" href="#" target="_self">
<span class="o-link__label">
Link
</span>
<span class="o-icon">
<svg width="24" height="24" viewBox="0 0 24 24" fill="currentcolor" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd" d="M9.29289 7.29289C9.68342 6.90237 10.3166 6.90237 10.7071 7.29289L14.7071 11.2929C15.0976 11.6834 15.0976 12.3166 14.7071 12.7071L10.7071 16.7071C10.3166 17.0976 9.68342 17.0976 9.29289 16.7071C8.90237 16.3166 8.90237 15.6834 9.29289 15.2929L12.5858 12L9.29289 8.70711C8.90237 8.31658 8.90237 7.68342 9.29289 7.29289Z" />
</svg>
</span>
</a>
</div>
{% set base_class = link_list.base_class|default('c-link-list') %}
{% if link_list.items %}
<div class="{{ bem(base_class, link_list.element, link_list.modifiers, link_list.extra) }}">
{% for item in link_list.items %}
{% include "@link" with {
"link": {
"url": item.link.url,
"text": item.link.text,
"target": item.link.target,
"icon": {
"name": "chevron-right",
"size": "md"
},
"extra": bem(base_class, 'item')
}
} %}
{% endfor %}
</div>
{% endif %}
{
"link_list": {
"items": [
{
"link": {
"text": "Link",
"url": "#",
"target": "_blank"
}
},
{
"link": {
"text": "Link",
"url": "#"
}
},
{
"link": {
"text": "Link",
"url": "#"
}
},
{
"link": {
"text": "Link",
"url": "#"
}
}
]
}
}
/* ------------------------------------*\
$LINK-LIST
\*------------------------------------ */
.c-link-list {
display: flex;
flex-direction: column;
&__item {
position: relative;
width: 100%;
padding: var(--dotd-space-xs) var(--dotd-space-sm);
padding-right: 0;
justify-content: space-between;
border-bottom: var(--dotd-border-width) solid var(--dotd-color-border-default);
box-shadow: none;
&:last-child {
border-bottom: none;
}
.o-link__label {
flex: 1;
justify-content: flex-start;
+ .o-icon {
transform: translateX(0);
opacity: 1;
visibility: visible;
}
}
&::after {
content: "";
display: block;
position: absolute;
top: 50%;
right: var(--dotd-space);
transform: translateY(-50%);
width: var(--dotd-icon-md);
height: var(--dotd-icon-md);
opacity: 0;
visibility: hidden;
transition: all var(--dotd-animation-duration) var(--dotd-animation-timing);
pointer-events: none;
z-index: 1;
mask-image: url("data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMjQiIGhlaWdodD0iMjQiIHZpZXdCb3g9IjAgMCAyNCAyNCIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPHBhdGggZD0iTTEzLjIwNzEgNy4yOTI4OUMxMi44MTY2IDYuOTAyMzcgMTIuMTgzNCA2LjkwMjM3IDExLjc5MjkgNy4yOTI4OUMxMS40MDI0IDcuNjgzNDIgMTEuNDAyNCA4LjMxNjU4IDExLjc5MjkgOC43MDcxMUwxNC4wODU4IDExSDdDNi40NDc3MSAxMSA2IDExLjQ0NzcgNiAxMkM2IDEyLjU1MjMgNi40NDc3MSAxMyA3IDEzSDE0LjA4NThMMTEuNzkyOSAxNS4yOTI5QzExLjQwMjQgMTUuNjgzNCAxMS40MDI0IDE2LjMxNjYgMTEuNzkyOSAxNi43MDcxQzEyLjE4MzQgMTcuMDk3NiAxMi44MTY2IDE3LjA5NzYgMTMuMjA3MSAxNi43MDcxTDE3LjIwNzEgMTIuNzA3MUMxNy41OTc2IDEyLjMxNjYgMTcuNTk3NiAxMS42ODM0IDE3LjIwNzEgMTEuMjkyOUwxMy4yMDcxIDcuMjkyODlaIiBmaWxsPSIjMTgxRjIwIi8+Cjwvc3ZnPgo=");
mask-position: center center;
mask-repeat: no-repeat;
mask-size: var(--dotd-icon-md);
background-color: var(--dotd-color-content-secondary-default);
}
&:hover:not(:disabled),
&:focus {
background-color: var(--dotd-color-background-default-strong);
box-shadow: var(--dotd-box-shadow-sm);
color: var(--dotd-color-content-secondary-default);
.o-link__label +.o-icon {
opacity: 0;
visibility: hidden;
}
&::after {
opacity: 1;
visibility: visible;
right: 0;
color: var(--dotd-color-content-secondary-default);
}
}
}
}
No notes defined.