@e-fellows/website-2022

Tag: Link 

<a class="tag u-underline" href="#">
    Tag-Text
</a>
 
{% set link = link ?? null %}
{% set linkType = linkType ??? link_type(link) %}
{% set tag = link ? 'a' : 'p' -%}

<{{ tag }} {{ html_attributes({
  class: {
    'tag': true,
    'u-underline': link ?? true,
  },
  href: link,
}, linkAttrs ?? link_attributes(link, type=linkType), attrs ?? {}) }}>
  {{ text }}
</{{ tag }}>
 
{
  "text": "Tag-Text",
  "link": "#"
}
  • Content: 
    :root {
  --tag-background-color: var(--color-orange);
  --tag-color: currentColor;
  --tag-font-size: 1.3rem;
  --tag-line-height: 1.3;
  --tag-border-size: 3px;
}

.tag {
  --underline-color: transparent;
  --underline-color--enter: currentColor;
  --underline-height: 2px;

  border: var(--tag-border-size) solid var(--tag-background-color);
  color: var(--tag-color);
  display: inline-block;
  font-size: var(--tag-font-size);
  font-weight: bold;
  line-height: var(--tag-line-height);
  padding: 0.4rem 2rem;
  transition-duration: var(--duration-fast);
  transition-property: background-color;

  &:any-link:is(:hover, :focus) {
    background-color: var(--tag-background-color);
  }
}
  • URL: /components/raw/tag/tag.scss
  • Filesystem Path: src/components/1-atoms/tag/tag.scss
  • Size: 694 Bytes

No notes defined.