@e-fellows/website-2022

Kachel: Mit Hinweisbox 

<article id="tile-35287-78401" class="tile tile--blue">
    <div class="tile__hint-box">

        <div class="hint-box u-inverted">
            <span class="hint-box__label">
                Donnerstag </span>

            <time class="hint-box__value" datetime="2023-04-27 02:00">
                27.
                <abbr title="April" class="hint-box__abbr">Apr.</abbr>
                2023

            </time>
        </div>
    </div>

    <div class="tile__content">

        <h3 class="tile__headline u-line-clamp" id="tile-35287-78401-text">

            <span class="tile__headline-text">Titel mit max. 25 Zeichen</span>
        </h3>

    </div>

</article>
 
{% set id = id ??? html_id('tile') %}
{% set link = link ?? null %}
{% set linkType = linkType ??? link_type(link) %}
{% set buttonIcon = buttonIcon ?? link_icon(link=link, type=linkType, always=true) %}
{% set color = color ?? false -%}

<article {{ html_attributes({
  id: id,
  class: {
    'tile': true,
    ("tile--#{color}"): color,
    'tile--image': image ??? false,
    'has-overlay-link': link ?? false,
  },
}, attrs ?? {}) }}>
  {% if hintBox|default %}
    <div class="tile__hint-box">
      {% include '@hint-box' with hintBox only %}
    </div>
  {% endif %}

  <div class="tile__content">
    {% if icon|default and not logo|default %}
      <div class="tile__icon">
        {% include '@icon' with { icon: icon } only %}
      </div>
    {% endif %}

    {% if logo|default %}
      <div class="tile__logo" id="{{ 'text' | namespaceInputId(id) }}">
        {% include '@image' with logo | merge({
          disablePlaceholder: true,
        }) only %}
      </div>
    {% else %}
      <h3 class="tile__headline u-line-clamp" id="{{ 'text' | namespaceInputId(id) }}">
        {% if count|default and not icon|default %}
          <span class="tile__headline-count">{{ count }}</span>
        {% endif %}

        <span class="tile__headline-text">{{- text | breakerize | make_efellows_non_breakable -}}</span>
      </h3>
    {% endif %}

    {% if link|default %}
      <div class="tile__button">
        {% include '@icon-button' with {
          overlay: true,
          link: link,
          icon: buttonIcon,
          target: target ?? null,
          title: 'Go to page' | t('site'),
          attrs: {
            'aria-describedby': 'text' | namespaceInputId(id),
          },
        } only %}
      </div>
    {% endif %}
  </div>

  {% if image|default %}
    <div class="tile__image">
      {% include '@image' with image only %}
    </div>
  {% endif %}
</article>
 
{
  "text": "Titel mit max. 25 Zeichen",
  "link": false,
  "color": "blue",
  "hintBox": {
    "type": "date",
    "label": "Donnerstag",
    "value": "2023-04-27T00:00:00.000Z"
  }
}
  • Content: 
    :root {
  --tile-aspect-ratio: 1 / 1;
  --tile-background-color: var(--color-orange-light);
  --tile-highlight-color: var(--color-orange);
  --tile-image-gradient: linear-gradient(180deg, rgba(0, 0, 0, 0) 0%, #000 100%);
  --tile-image-zoom: 1;
}

.tile {
  aspect-ratio: var(--tile-aspect-ratio);
  background-color: var(--tile-background-color);
  display: flex;
  flex-direction: column;
  overflow: hidden;

  &:focus-within:not(.has-invisible-focus-within) {
    @include use-focus-outline();
  }

  &.has-overlay-link:is(:hover, :focus-within) {
    --tile-image-zoom: 1.1;
  }
}

.tile--cyan {
  --tile-background-color: var(--color-cyan-light);
}

.tile--green {
  --tile-background-color: var(--color-green-light);
}

.tile--yellow {
  --tile-background-color: var(--color-yellow-light);
}

.tile--purple {
  --tile-background-color: var(--color-purple-light);
}

.tile--blue {
  --tile-background-color: var(--color-blue-light);
}

.tile--red {
  --tile-background-color: var(--color-red-light);
}

.tile--image {
  --tile-highlight-color: var(--color-white);

  position: relative;
}

.tile__hint-box {
  --hint-box-width: 100%;
  --hint-box-padding-inline: 2rem;
  --hint-box-height: 11rem;
  --hint-box-font-size: 2.2rem;
}

.tile__content {
  align-items: center;
  display: flex;
  flex-direction: column;
  flex-grow: 1;
  justify-content: center;
  padding: 2rem;
  text-align: center;

  .tile--image & {
    color: var(--color-white);
    position: relative;
    z-index: 4;
  }
}

.tile__icon {
  color: var(--tile-highlight-color);
  font-size: 5rem;
  margin-block-end: 2rem;
}

.tile__logo {
  inline-size: 80%;
  max-inline-size: 20rem;
}

.tile__headline {
  --line-clamp: 3;

  .tile--image & {
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.25);
  }
}

.tile__headline-count {
  color: var(--tile-highlight-color);
  display: block;
  font-family: var(--font-family-indie-flower);
  font-size: 7.5rem;
}

.tile__headline-text {
  font-size: 2.4rem;
  font-weight: var(--font-weight-semibold);
  hyphens: auto;
  line-height: var(--line-height-small);
}

.tile__button {
  --focus-outline-width: 0;
  --icon-button-size: 4.8rem;

  margin-block-start: 3rem;
}

.tile__image {
  inset: 0;
  position: absolute;
  transform: scale(var(--tile-image-zoom, 1));
  transition-property: transform;

  &::before {
    background-image: var(--tile-image-gradient);
    content: '';
    inset: 0;
    position: absolute;
    z-index: 3;
  }
}
  • URL: /components/raw/tile/tile.scss
  • Filesystem Path: src/components/2-molecules/tile/tile.scss
  • Size: 2.5 KB

No notes defined.