Card-Grid

WIP

HTML
View
Context
Assets
Info
Notes


        
        <div class="card-grid">
    <div class="card-grid__card">
        <article class="card has-overlay-link" data-card-type="stacked">
            <div class="card__inner">
                <div class="card__image">
                    <picture class="image image--cover">
                        <img class="image__img" src="/assets/images/card-placeholder-image.6a8af03ab4.svg" width="800" height="450" alt="" loading="lazy" role="presentation" />
                    </picture>

                </div>

                <div class="card__content">

                    <div class="card__head">

                        <div class="card__headline u-line-clamp">
                            <h3 class="headline headline--3"><a href="#" class="headline__link u-overlay-link"><span class="headline__kicker">Optionaler Kicker<span class="u-hidden-visually">: </span></span><span class="headline__text u-underline">Titel mit beinahe beliebig vielen Zeichen, da die Card mitwächst</span></a></h3>
                        </div>
                    </div>

                </div>
            </div>
        </article>
    </div>
    <div class="card-grid__card">
        <article class="card has-overlay-link" data-card-type="stacked">
            <div class="card__inner">
                <div class="card__image">
                    <picture class="image image--cover" style="background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAUAAAAFCAIAAAACDbGyAAAABGdBTUEAALGPC/xhBQAAADhlWElmTU0AKgAAAAgAAYdpAAQAAAABAAAAGgAAAAAAAqACAAQAAAABAAAABaADAAQAAAABAAAABQAAAABcYj7LAAAAFUlEQVQIHWP8V8PJgASYkNggJql8AHi/AY1z9PnwAAAAAElFTkSuQmCC)">
                        <img class="image__img" src="https://bildermangel.de/555x555/fe7c09/130f26.webp?text=+++S:+555x555@1x+++" width="555" height="555" alt="Das ist ein Platzhalter-Bild" loading="lazy" />
                    </picture>

                </div>

                <div class="card__content">

                    <div class="card__head">

                        <div class="card__headline u-line-clamp">
                            <h3 class="headline headline--3"><a href="#" class="headline__link u-overlay-link"><span class="headline__kicker">Optionaler Kicker<span class="u-hidden-visually">: </span></span><span class="headline__text u-underline">Titel mit beinahe beliebig vielen Zeichen, da die Card mitwächst</span></a></h3>
                        </div>
                    </div>

                </div>
            </div>
        </article>
    </div>
    <div class="card-grid__card">
        <article class="card has-overlay-link" data-card-type="stacked">
            <div class="card__inner">
                <div class="card__image">
                    <picture class="image image--cover">
                        <img class="image__img" src="/assets/images/card-placeholder-image.6a8af03ab4.svg" width="800" height="450" alt="" loading="lazy" role="presentation" />
                    </picture>

                </div>

                <div class="card__content">

                    <div class="card__head">

                        <div class="card__headline u-line-clamp">
                            <h3 class="headline headline--3"><a href="#" class="headline__link u-overlay-link"><span class="headline__kicker">Optionaler Kicker<span class="u-hidden-visually">: </span></span><span class="headline__text u-underline">Titel mit beinahe beliebig vielen Zeichen, da die Card mitwächst</span></a></h3>
                        </div>
                    </div>

                    <dl class="card__details">

                        <div class="card__detail">
                            <dt class="card__detail-label"><span class="card__detail-label-icon"><svg class="icon icon--calendar-alt" viewBox="0 0 200 200" aria-hidden="true">
                                        <use xlink:href="/assets/icons/icons.3bafb6df0d.svg#calendar-alt"></use>
                                    </svg></span><span class="card__detail-label-text u-hidden-visually">Datum</span></dt>
                            <dd class="card__detail-text">So, 8. Sep 2024</dd>
                        </div>

                    </dl>

                </div>
            </div>
        </article>
    </div>
    <div class="card-grid__card">
        <article class="card has-overlay-link" data-card-color="purple" data-card-type="stacked">
            <div class="card__inner">
                <div class="card__image">
                    <picture class="image image--cover">
                        <img class="image__img" src="/assets/images/card-placeholder-image.6a8af03ab4.svg" width="800" height="450" alt="" loading="lazy" role="presentation" />
                    </picture>

                </div>

                <div class="card__content">
                    <div class="card__badge">
                        <span class="card__badge-icon">
                            <svg class="icon icon--bell" viewBox="0 0 200 200" aria-hidden="true">
                                <use xlink:href="/assets/icons/icons.3bafb6df0d.svg#bell"></use>
                            </svg> </span>

                        <span class="card__badge-text u-line-clamp">Tipp aus der Redaktion</span>
                    </div>

                    <div class="card__head">

                        <div class="card__headline u-line-clamp">
                            <h3 class="headline headline--3"><a href="#" class="headline__link u-overlay-link"><span class="headline__kicker">Optionaler Kicker<span class="u-hidden-visually">: </span></span><span class="headline__text u-underline">Titel mit beinahe beliebig vielen Zeichen, da die Card mitwächst</span></a></h3>
                        </div>
                    </div>

                </div>
            </div>
        </article>
    </div>

    <div class="card-grid__card card-grid__card--more-card">
        <article class="card has-overlay-link" data-card-color="orange" data-card-type="stacked">
            <div class="card__inner">
                <div class="card__image">
                    <picture class="image image--cover">
                        <img class="image__img" src="/assets/images/card-more.7884338daa.svg" width="800" height="450" alt="" loading="lazy" role="presentation" />
                    </picture>

                </div>

                <div class="card__content">

                    <div class="card__head">

                        <div class="card__headline u-line-clamp">
                            <h3 class="headline headline--3"><a href="#" class="headline__link u-overlay-link"><span class="headline__text u-underline">Mehr erfahren</span></a></h3>
                        </div>
                    </div>

                </div>
            </div>
        </article>
    </div>
</div>


        <div {{ html_attributes({
  id: id ?? false,
  class: {
    'card-grid': true,
    'card-grid--offset': offset ?? false,
    'card-grid--jobs': jobs ?? false,
    'card-grid--randomize': randomize ?? false,
  },
}, attrs ?? {}) }}>
  {% for card in cards %}
    <div class="card-grid__card">
      {% include '@card' with card | merge({
        forceTransparentLogo: jobs ?? false,
        color: card.color ?? color ?? null,
        type: 'stacked',
        useFallbackImage: true,
      }) only %}
    </div>
  {% endfor %}

  {% if moreCard|default %}
    <div class="card-grid__card card-grid__card--more-card">
      {% include '@card' with moreCard | merge({
        more: true,
        color: 'orange',
        type: 'stacked',
        headline: {
          text: moreCard.text ?? 'More Information' | t('site'),
        },
      }) only %}
    </div>
  {% endif %}
</div>


        
            
            {
  "cards": [
    {
      "headline": {
        "kicker": "Optionaler Kicker",
        "text": "Titel mit beinahe beliebig vielen Zeichen, da die Card mitwächst"
      },
      "link": "#"
    },
    {
      "headline": {
        "kicker": "Optionaler Kicker",
        "text": "Titel mit beinahe beliebig vielen Zeichen, da die Card mitwächst"
      },
      "link": "#",
      "image": {
        "src": "https://bildermangel.de/555x555/fe7c09/130f26.webp?text=+++S:+555x555@1x+++",
        "width": 555,
        "height": 555,
        "cover": true,
        "alt": "Das ist ein Platzhalter-Bild",
        "placeholder": "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAUAAAAFCAIAAAACDbGyAAAABGdBTUEAALGPC/xhBQAAADhlWElmTU0AKgAAAAgAAYdpAAQAAAABAAAAGgAAAAAAAqACAAQAAAABAAAABaADAAQAAAABAAAABQAAAABcYj7LAAAAFUlEQVQIHWP8V8PJgASYkNggJql8AHi/AY1z9PnwAAAAAElFTkSuQmCC"
      }
    },
    {
      "headline": {
        "kicker": "Optionaler Kicker",
        "text": "Titel mit beinahe beliebig vielen Zeichen, da die Card mitwächst"
      },
      "link": "#",
      "hintBox": {
        "value": "2024-09-08T00:00:00.000Z"
      }
    },
    {
      "headline": {
        "kicker": "Optionaler Kicker",
        "text": "Titel mit beinahe beliebig vielen Zeichen, da die Card mitwächst"
      },
      "link": "#",
      "color": "purple",
      "useFallbackImage": false,
      "badge": {
        "icon": "bell",
        "text": "Tipp aus der Redaktion"
      }
    }
  ],
  "moreCard": {
    "text": "Mehr erfahren",
    "link": "#"
  }
}

File:

Content:


                                :root {
  --card-grid-offset: 4rem;

  @include use-responsive-sizing(--card-grid-columns, (xs: 1, m: 2));
}

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

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

.card-grid__card {
  --card-aspect-ratio: 9 / 13;

  display: grid;

  @include mq($from: s) {
    --card-aspect-ratio: 1 / 1;
  }

  @include mq($from: m) {
    .card-grid--offset &:nth-child(even) {
      margin-block: var(--card-grid-offset) calc(var(--card-grid-offset) * -1);
    }
  }
}

.card-grid__card--more-card {
  --tile-aspect-ratio: var(--card-aspect-ratio);
  --icon-button-background-color: transparent;
  --icon-button-background-color-active: var(--color-orange);
  --tile-background-color: var(--color-cyan-light);
}

URL: /components/raw/card-grid/card-grid.scss
Filesystem Path: src/components/3-organisms/card-grid/card-grid.scss
Size: 814 Bytes

Content:


                                document
  .querySelectorAll<HTMLElement>('.card-grid--randomize')
  .forEach(($cardGrid) => {
    for (let i = $cardGrid.children.length; i >= 0; i -= 1) {
      const index = Math.floor(Math.random() * (i + 1)); // nosemgrep: nodejs_scan.javascript-crypto-rule-node_insecure_random_generator
      // eslint-disable-next-line security/detect-object-injection
      const $child = $cardGrid.children[index]; // nosemgrep: eslint.detect-object-injection

      if ($child) {
        $cardGrid.appendChild($child);
      }
    }

    const $moreCard = $cardGrid.querySelector('.card-slider__card--more-card');

    if ($moreCard) {
      $cardGrid.appendChild($moreCard);
    }
  });

URL: /components/raw/card-grid/card-grid.ts
Filesystem Path: src/components/3-organisms/card-grid/card-grid.ts
Size: 683 Bytes

Handle: @card-grid
Variants (2): Standard , Mit Versatz
Preview:
- With layout
- Component only
Filesystem Path: src/components/3-organisms/card-grid/card-grid.twig
References (1): @card

No notes defined.