Community-Teaser: Kein Icon

WIP

HTML
View
Context
Assets
Info
Notes


        
        <div class="community-teaser has-overlay-link">

    <a class="community-teaser__content u-overlay-link" href="#">
        <div class="community-teaser__headline u-underline">
            <h3 class="headline headline--4"><span class="headline__kicker">Gruppe<span class="u-hidden-visually">: </span></span><span class="headline__text">Daumen erhalten</span></h3>
        </div>

        <time class="community-teaser__date" datetime="2022-06-27T16:34:00+02:00">
            Montag, 27. Juni um 16:34 Uhr
        </time>

        <dl class="community-teaser__stats">
            <div class="community-teaser__stat">
                <dt class="community-teaser__stat-label">
                    <svg class="icon icon--eye" viewBox="0 0 200 200" aria-hidden="true">
                        <use xlink:href="/assets/icons/icons.3bafb6df0d.svg#eye"></use>
                    </svg> <span class="u-hidden-visually">Ansichten</span>
                </dt>

                <dd class="community-teaser__stat-value">25</dd>
            </div>
            <div class="community-teaser__stat">
                <dt class="community-teaser__stat-label">
                    <svg class="icon icon--comment" viewBox="0 0 200 200" aria-hidden="true">
                        <use xlink:href="/assets/icons/icons.3bafb6df0d.svg#comment"></use>
                    </svg> <span class="u-hidden-visually">Kommentare</span>
                </dt>

                <dd class="community-teaser__stat-value">13</dd>
            </div>
        </dl>
    </a>
</div>


        {% set level = level ??? 3 %}
{% set link = link ?? null %}
{% set linkType = linkType ?? link_type(link) %}
{% set target = target ?? false %}
{% set icon = icon ?? 'community' %}

<div {{ html_attributes({
  id: id ?? false,
  class: {
    'community-teaser': true,
    'community-teaser--image': image ?? false,
    'has-overlay-link': link ?? false,
  },
}, attrs ?? {}) }}>
  {% if image|default or icon %}
    <div class="community-teaser__badge">
      {% if image|default %}
        <img {{ html_attributes({
          src: image,
          width: 100,
          height: 100,
          alt: '',
          class: 'community-teaser__image',
          loading: 'lazy',
          role: 'presentation',
        }) }}>
      {% else %}
        <div class="community-teaser__icon">
          {% include '@icon' with {
            icon: icon,
          } only %}
        </div>
      {% endif %}
    </div>
  {% endif %}

  {% set contentTag = link ? 'a' : 'div' %}

  <{{ contentTag }} {{ html_attributes({
    class: {
      'community-teaser__content': true,
      'u-overlay-link': link,
    },
    href: link,
    target: target ?? false,
  }, linkAttrs ?? link_attributes(link, type=linkType)) }}>
    {% if headline|default %}
      <div class="community-teaser__headline{{ link ? ' u-underline' }}">
        {% include '@headline' with headline | merge({
          size: 4,
          level: level,
        }) only %}
      </div>
    {% endif %}

    {% if text|default %}
      <div class="community-teaser__text{{ link and not headline|default ? ' u-underline' }}">
        {{- text | componentize -}}
      </div>
    {% endif %}

    {% if date|default %}
      <time class="community-teaser__date" datetime="{{ date | datetime('c') }}">
        {{ date | datetime("icu:eeee, dd. MMMM 'um' HH:mm 'Uhr'") }}
      </time>
    {% endif %}

    {% if stats|default %}
      <dl class="community-teaser__stats">
        {% for stat in stats %}
          <div class="community-teaser__stat">
            <dt class="community-teaser__stat-label">
              {% include '@icon' with { icon: stat.icon } only %}
              <span class="u-hidden-visually">{{ stat.label }}</span>
            </dt>

            <dd class="community-teaser__stat-value">
              {{- stat.value -}}
            </dd>
          </div>
        {% endfor %}
      </dl>
    {% endif %}
  </{{ contentTag }}>
</div>


        
            
            {
  "image": false,
  "link": "#",
  "headline": {
    "kicker": "Gruppe",
    "text": "Daumen erhalten"
  },
  "date": "2022-06-27T14:34:00.000Z",
  "stats": [
    {
      "label": "Ansichten",
      "icon": "eye",
      "value": 25
    },
    {
      "label": "Kommentare",
      "icon": "comment",
      "value": 13
    }
  ],
  "icon": false
}

File:

Content:


                                :root {
  --community-teaser-color: var(--color-midnight);
  --community-teaser-color--enabled: var(--color-midnight);
  --community-teaser-background-color: var(--color-orange-light);
  --community-teaser-background-color--enabled: var(--color-orange-light);
  --community-teaser-date-color: var(--color-grey-dark);
  --community-teaser-date-color--enabled: var(--color-grey-dark);
  --community-teaser-date-line-height: var(--line-height-body);
  --community-teaser-date-margin-block: 0.5rem;
  --community-teaser-date-size: 1.3rem;
  --community-teaser-headline-margin-block: 1.5rem;
  --community-teaser-icon-background-color: var(--color-orange);
  --community-teaser-icon-color: var(--color-midnight);
  --community-teaser-stats-color: var(--color-grey-dark);
  --community-teaser-stats-color--enabled: var(--color-grey-dark);
  --community-teaser-stats-column-gap: 2rem;
  --community-teaser-stats-line-height: var(--line-height-body);
  --community-teaser-stats-margin-block: 0.5rem;
  --community-teaser-stats-row-gap: 1rem;
  --community-teaser-stats-size: 1.3rem;
  --community-teaser-stats-icon-gap: 1rem;
  --community-teaser-text-line-height: var(--line-height-body);
  --community-teaser-text-margin-block: 1.5rem;
  --community-teaser-text-size: 1.6rem;
  --community-teaser-badge-offset-factor: 2.2;

  @include use-responsive-sizing(--community-teaser-badge-size, responsive-map(xs 5rem, xl 7.5rem));
  @include use-responsive-sizing(--community-teaser-padding, responsive-map(xs 2rem, xl 3rem));
}

.community-teaser {
  inline-size: 100%;
  padding-block-start: calc(var(--community-teaser-badge-size) / var(--community-teaser-badge-offset-factor));
  position: relative;

  &:focus-within {
    @include use-focus-outline();
  }
}

.community-teaser__badge {
  align-items: center;
  background-color: var(--community-teaser-icon-background-color);
  block-size: var(--community-teaser-badge-size);
  display: flex;
  inline-size: var(--community-teaser-badge-size);
  justify-content: center;
  margin-block-end: calc(var(--community-teaser-badge-size) / var(--community-teaser-badge-offset-factor) - var(--community-teaser-badge-size));
  margin-block-start: calc(var(--community-teaser-badge-size) / var(--community-teaser-badge-offset-factor) * -1);
  position: relative;
}

.community-teaser__image {
  block-size: 100%;
  inline-size: 100%;
  object-fit: cover;
  overflow: hidden;
  position: relative;
}

.community-teaser__icon {
  color: var(--community-teaser-icon-color);
  font-size: calc(var(--community-teaser-badge-size) * 0.4);
}

.community-teaser__content {
  background-color: var(--community-teaser-background-color);
  block-size: 100%;
  color: var(--community-teaser-color);
  display: block;
  margin-inline-start: calc(var(--community-teaser-badge-size) / var(--community-teaser-badge-offset-factor));
  overflow-wrap: break-word;
  padding: var(--community-teaser-padding);
  padding-inline-start: calc(var(--community-teaser-padding) + var(--community-teaser-badge-size) / var(--community-teaser-badge-offset-factor));
  transition-property: background-color, color;

  &:any-link:is(:hover, :focus) {
    --community-teaser-stats-color: var(--community-teaser-stats-color--enabled);
    --community-teaser-date-color: var(--community-teaser-date-color--enabled);

    background-color: var(--community-teaser-background-color--enabled);
    color: var(--community-teaser-color--enabled);
  }

  &:focus {
    outline: 0;
  }

  > :first-child {
    margin-block-start: 0;
  }

  > :last-child {
    margin-block-end: 0;
  }
}

.community-teaser__headline {
  --headline-kicker-spacing: 1rem;
  --headline-kicker-font-weight: var(--font-weight-regular);
  --focus-outline-width: 0;

  margin-block: var(--community-teaser-headline-margin-block);
}

.community-teaser__text {
  font-size: var(--community-teaser-text-site);
  hyphens: auto;
  line-height: var(--community-teaser-text-line-height);
  margin-block: var(--community-teaser-text-margin-block);
  word-break: break-word;
}

.community-teaser__date {
  color: var(--community-teaser-date-color);
  display: block;
  font-size: var(--community-teaser-date-size);
  line-height: var(--community-teaser-date-line-height);
  margin-block: var(--community-teaser-date-margin-block);
  transition-property: color;
}

.community-teaser__stats {
  color: var(--community-teaser-stats-color);
  column-gap: var(--community-teaser-stats-column-gap);
  display: flex;
  flex-wrap: wrap;
  margin-block: var(--community-teaser-stats-margin-block);
  row-gap: var(--community-teaser-stats-row-gap);
  transition-property: color;
}

.community-teaser__stat {
  align-items: center;
  display: flex;
  gap: var(--community-teaser-stats-icon-gap);
}

.community-teaser__stat-value {
  font-size: var(--community-teaser-stats-size);
  line-height: var(--community-teaser-stats-line-height);
}

.community-teaser__stat-label {
  font-size: calc(var(--community-teaser-stats-size) * 1.5);
}

URL: /components/raw/community-teaser/community-teaser.scss
Filesystem Path: src/components/2-molecules/community-teaser/community-teaser.scss
Size: 5 KB

Handle: @community-teaser--no-icon
Variants (4): Standard , Nur Text , Fallback , Kein Icon
Preview:
- With layout
- Component only
Filesystem Path: src/components/2-molecules/community-teaser/community-teaser.twig
References (2): @icon, @headline

No notes defined.