ihk24/gfi-ihk-2024/stories/components/card/CardComponent.js

import './card.scss';
import {createElement, createImage} from "../../_global/scripts/helpers";

export const createCard =
    ({
         image = './dummy/why-elect.jpg',
         copyright = '@ shutterstock.com',
         kicker = 'Praxis & Ratgeber',
         headline = 'Jetzt Teil der IHK-Kampagne werden',
         link = 'http://www.ihk24.de',
    }) => {
        const card = createElement('div', ['card'], null);
        const cardInner = createElement('a', ['card-inner'], null, card);
        cardInner.href = link;

        const imageBox = createElement('div', ['image-box'], '', cardInner);
        createImage(image, 700, 470, '', [], imageBox);
        if (copyright && copyright.length > 0) {
            const copy = createElement('span', ['copyright'], copyright, imageBox);
            copy.setAttribute("aria-hidden", "true");
            createElement('span', ['sr-only'], copyright, imageBox);
        }

        const textBox = createElement('div', ['text-box'], null, cardInner);
        if (kicker && kicker.length > 0) {
            createElement('span', ['kicker'], kicker, textBox);
        }
        createElement('div', ['like-h4'], headline, textBox);

        return card;
    }