@e-fellows/website-2022

Überschrift: Ebene 1 

<h1 class="headline headline--1"><span class="headline__text">Hier treffen sich die klügsten Köpfe <span class="headline__highlight">- Hole das Beste aus Studium und Berufseinstieg raus.</span><br />
    </span></h1>
 
{% set level = level ??? 1 %}
{% set link = link ?? null %}
{% set linkType = linkType ?? link_type(link) %}
{% set size = size ?? 1 %}
{% set kickerPosition = kickerPosition ??? 'above' %}
{% set tag = tag ??? "h#{level}" -%}

<{{ tag }} {{ html_attributes({
  id: id ?? false,
  class: ['headline', size ? "headline--#{size}"],
}, attrs ?? {}) }}>
  {%- if link -%}
    <a {{ html_attributes({
      href: link,
      target: target ?? false,
      class: {
        'headline__link': true,
        'u-overlay-link': overlay | default(false),
      },
    }, linkAttrs ?? link_attributes(link, type=linkType)) }}>
  {%- endif -%}

  {%- if kicker|default and kickerPosition == 'above' -%}
    <span class="headline__kicker">
      {{- kicker | breakerize | make_efellows_non_breakable -}}
    <span class="u-hidden-visually">: </span></span>
  {%- endif -%}

  <span class="headline__text{{ link|default ? ' u-underline' }}{{ clampLines|default ? ' u-line-clamp' }}">
    {{- text | componentize | nl2br | breakerize | make_efellows_non_breakable | highlight(tag='span', className='headline__highlight') -}}
  </span>

  {%- if kicker|default and kickerPosition == 'below' -%}
    <span class="headline__kicker"><span class="u-hidden-visually">, </span>
      {{- kicker | breakerize | make_efellows_non_breakable -}}
    </span>
  {%- endif -%}

  {%- if link|default -%}
    </a>
  {%- endif -%}
</{{ tag }}>
 
{
  "text": "Hier treffen sich die klügsten Köpfe **- Hole das Beste aus Studium und Berufseinstieg raus.**\n",
  "size": 1,
  "level": 1
}
  • Content: 
    :root {
  --headline-color: currentColor;
  --headline-font-size: 1.8rem;
  --headline-font-weight: var(--font-weight-semibold);
  --headline-highlight-font-weight: var(--font-weight-light);
  --headline-kicker-font-size: 1.6rem;
  --headline-kicker-font-weight: inherit;
  --headline-kicker-letter-spacing: 0;
  --headline-letter-spacing: -0.04em;
  --headline-line-height: var(--line-height-small);
  --headline-link-color: var(--link-color);
  --headline-link-hover-color: var(--link-hover-color);

  @include use-responsive-sizing(--headline-kicker-spacing, responsive-map(xs 1rem, l 2rem));
}

.headline {
  color: var(--headline-color);
  font-size: var(--headline-font-size);
  font-weight: var(--headline-font-weight);
  letter-spacing: var(--headline-letter-spacing);
  line-height: var(--headline-line-height);
}

.headline--1 {
  @include use-responsive-sizing(--headline-font-size, responsive-map(xs 3rem, xl 4.6rem));
}

.headline--2 {
  @include use-responsive-sizing(--headline-font-size, responsive-map(xs 2.6rem, xl 3.6rem));
}

.headline--3 {
  @include use-responsive-sizing(--headline-font-size, responsive-map(xs 2.2rem, xl 2.6rem));
}

.headline__link {
  color: var(--headline-link-color);
  display: block;
  transition-property: color;

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

.headline__kicker {
  display: block;
  font-size: var(--headline-kicker-font-size);
  font-weight: var(--headline-kicker-font-weight);
  letter-spacing: var(--headline-kicker-letter-spacing);
  line-height: var(--headline-kicker-line-height, inherit);

  &:first-child {
    margin-block-end: var(--headline-kicker-spacing);
  }

  &:last-child {
    margin-block-start: var(--headline-kicker-spacing);
  }
}

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

.headline__highlight {
  color: var(--headline-highlight-color, var(--headline-color));
  font-style: normal;
  font-weight: var(--headline-highlight-font-weight);
}
  • URL: /components/raw/headline/headline.scss
  • Filesystem Path: src/components/1-atoms/headline/headline.scss
  • Size: 2.1 KB

No notes defined.