@e-fellows/website-2022

Link: Interner Link 

<a class="link link--internal" href="#"><span class="link__text u-underline">Interner Link</span></a>
 
{% set link = link ?? null %}
{% set linkType = linkType ??? link_type(link) %}
{% set icon = icon ?? link_icon(link=link, type=linkType) %}
{% set tag = link ? 'a' : 'button' -%}

<{{ tag }} {{ html_attributes({
  class: {
    'link': true,
    ("link--#{linkType}"): true,
    'u-overlay-link': overlay ?? false,
  },
  type: not link ? (type ??? 'button'),
  title: title ?? false,
  href: link,
}, linkAttrs ?? link_attributes(link, type=linkType), attrs ?? {}) }}>{% apply spaceless %}
  {% if icon %}
    <span class="link__icon">{% include '@icon' with { icon: icon } only %}&#65279;</span>
  {% endif %}

  <span class="link__text u-underline">{{ text | componentize }}</span>
{% endapply %}</{{ tag }}>
 
{
  "text": "Interner Link",
  "link": "#"
}
  • Content: 
    :root {
  --link-color: var(--hyperlink-color);
  --link-hover-color: var(--hyperlink-engaged-color);
  --line-underline-color: var(--link-color);
  --line-underline-hover-color: transparent;
  --link-icon-color: var(--color-orange);
  --link-icon-size: 0.9em;
  --link-icon-gap: 0.5em;
  --link-font-weight: var(--font-weight-bold);
}

.link {
  color: var(--link-color);
  font-weight: var(--link-font-weight);
  transition-property: color;

  &:is(:hover:not([disabled]), :focus:not(.has-invisible-focus)) {
    color: var(--link-hover-color);
  }
}

.link__text {
  --underline-color: var(--line-underline-color);
  --underline-color--enter: var(--line-underline-hover-color);
  --underline-height: 2px;
}

.link__icon {
  color: var(--link-icon-color);
  font-size: var(--link-icon-size);
  margin-inline: 0.3em var(--link-icon-gap);
  vertical-align: baseline;
  white-space: nowrap;
}
  • URL: /components/raw/link/link.scss
  • Filesystem Path: src/components/1-atoms/link/link.scss
  • Size: 892 Bytes

No notes defined.