@e-fellows/website-2022

Kacheln: Zwei Spalten 

<div id="tiles-77991-76676" class="tiles tiles--2">
    <div class="tiles__tile">
        <article id="tiles-77991-76676-tile-1" class="tile">

            <div class="tile__content">

                <h3 class="tile__headline u-line-clamp" id="tiles-77991-76676-tile-1-text">

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

            </div>

        </article>
    </div>
    <div class="tiles__tile">
        <article id="tiles-77991-76676-tile-2" class="tile tile--image has-overlay-link">

            <div class="tile__content">

                <h3 class="tile__headline u-line-clamp" id="tiles-77991-76676-tile-2-text">

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

                <div class="tile__button">
                    <a class="icon-button u-overlay-link" title="Zur Seite" href="#" aria-describedby="tiles-77991-76676-tile-2-text">
                        <span class="icon-button__icon">
                            <svg class="icon icon--arrow-right" viewBox="0 0 200 200" aria-hidden="true">
                                <use xlink:href="/assets/icons/icons.3bafb6df0d.svg#arrow-right"></use>
                            </svg> </span>

                    </a>
                </div>
            </div>

            <div class="tile__image">
                <picture class="image">
                    <img class="image__img" src="https://bildermangel.de/305x305/fe7c09/130f26.webp" width="305" height="305" alt="Das ist ein Platzhalter-Bild" loading="lazy" />
                </picture>
            </div>
        </article>
    </div>
    <div class="tiles__tile">
        <article id="tiles-77991-76676-tile-3" class="tile tile--cyan has-overlay-link">

            <div class="tile__content">
                <div class="tile__icon">
                    <svg class="icon icon--calendar" viewBox="0 0 200 200" aria-hidden="true">
                        <use xlink:href="/assets/icons/icons.3bafb6df0d.svg#calendar"></use>
                    </svg>
                </div>

                <h3 class="tile__headline u-line-clamp" id="tiles-77991-76676-tile-3-text">

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

                <div class="tile__button">
                    <a class="icon-button u-overlay-link" title="Zur Seite" href="#" aria-describedby="tiles-77991-76676-tile-3-text">
                        <span class="icon-button__icon">
                            <svg class="icon icon--arrow-right" viewBox="0 0 200 200" aria-hidden="true">
                                <use xlink:href="/assets/icons/icons.3bafb6df0d.svg#arrow-right"></use>
                            </svg> </span>

                    </a>
                </div>
            </div>

        </article>
    </div>
    <div class="tiles__tile">
        <article id="tiles-77991-76676-tile-4" class="tile tile--green has-overlay-link">

            <div class="tile__content">

                <h3 class="tile__headline u-line-clamp" id="tiles-77991-76676-tile-4-text">
                    <span class="tile__headline-count">42.000</span>

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

                <div class="tile__button">
                    <a class="icon-button u-overlay-link" title="Zur Seite" href="#" aria-describedby="tiles-77991-76676-tile-4-text">
                        <span class="icon-button__icon">
                            <svg class="icon icon--arrow-right" viewBox="0 0 200 200" aria-hidden="true">
                                <use xlink:href="/assets/icons/icons.3bafb6df0d.svg#arrow-right"></use>
                            </svg> </span>

                    </a>
                </div>
            </div>

        </article>
    </div>
</div>
 
{% set id = id ??? html_id('tiles') %}
{% set columns = columns ??? 3 -%}

<div {{ html_attributes({
  id: id,
  class: {
    'tiles': true,
    ("tiles--#{columns}"): columns,
  },
}, attrs ?? {}) }}>
  {% for tile in tiles %}
    <div class="tiles__tile">
      {% include '@tile' with {
        id: "tile-#{loop.index}" | namespaceInputId(id),
      } | merge(tile) only %}
    </div>
  {% endfor %}
</div>
 
{
  "tiles": [
    {
      "text": "Titel mit max. 25 Zeichen",
      "link": false
    },
    {
      "text": "Titel mit max. 25 Zeichen",
      "link": "#",
      "image": {
        "src": "https://bildermangel.de/305x305/fe7c09/130f26.webp",
        "width": 305,
        "height": 305,
        "alt": "Das ist ein Platzhalter-Bild"
      }
    },
    {
      "text": "Titel mit max. 25 Zeichen",
      "link": "#",
      "color": "cyan",
      "icon": "calendar"
    },
    {
      "text": "Titel mit max. 25 Zeichen",
      "link": "#",
      "color": "green",
      "count": "42.000"
    }
  ],
  "columns": 2
}
  • Content: 
    :root {
  @include use-responsive-sizing(--tiles-columns, (xs: 1, 500px: 2));
}

.tiles {
  display: grid;
  grid-auto-rows: auto;
  grid-template-columns: repeat(var(--tiles-columns), minmax(0, 1fr));

  @include use-responsive-sizing(gap, $gaps);
}

.tiles--3 {
  @include use-responsive-sizing(--tiles-columns, (xs: 1, 500px: 2, l: 3));
}

.tiles--4 {
  @include use-responsive-sizing(--tiles-columns, (xs: 1, 500px: 2, l: 3, xl: 4));
}
  • URL: /components/raw/tiles/tiles.scss
  • Filesystem Path: src/components/3-organisms/tiles/tiles.scss
  • Size: 440 Bytes

No notes defined.