Card

Eine Darstellung im Kartendesign ist mit dem Modul Card möglich. Hierbei sind die Bereiche mit den Klassen card__header und card__body Pflichtelemente, optional hinzugefügt werden können subtitle, card__footer und functions.

Um Link-Doppelungen zu vermeiden, kann mit dem Data-Attribut data-add-clickable-area="smart" der Titel auch dann klickbar gemacht werden, wenn sich schon ein Detaillink im Bereich mit der Klasse card__body befindet. Mit dem Data-Attribut data-add-clickable-area="full" wird die komplette Card klickbar gemacht. Das Linkziel bestimmt das Href-Attribut des Links mit dem Attribut data-mainlink. "full" sollte nur benutzt werden, wenn sich keine weiteren Links in der Card befinden.

.modul-card

Card title

Card status (see "Pills" for more layout options)

Card subtitle

Card functions (Edit, Delete, Bookmark)

Card body philosophy is considered a science but it is difficult to say, when one has to compare with an ordinary science, for example biology, or chemistry. Detailszu: Card title

Card footer left (e.g. Price)
Card footer right (e.g. Action Button)

<article class="modul-card" data-add-clickable-area="smart">
    <header class="card__header">
        <h3 class="title">Card title</h3>
        <div class="card__status status"> 
            <p class="pill pill--info">Card status (see "Pills" for more layout options)</p>
        </div>
        <div class="card__meta subtitle text--meta">
            <p>Card subtitle</p>
  
        </div>
        <div class="card__functions functions">
            Card functions (Edit, Delete, Bookmark)
        </div>
    </header>
    <div class="card__body">
        <p>
                Card body philosophy is considered a science but it is difficult to say, when one has to compare with an ordinary science, for example biology, or chemistry.
                <a href="#2702" class="more" data-mainlink="true">Details<span class="aural">zu: Card title</span></a> 
        </p>
    </div>
    <div class="card__footer">
        <div class="row leftandright center">
                <div class="left">Card footer left (e.g. Price)</div>
                <div class="left">Card footer right (e.g. Action Button)</div>
        </div>
    </div>
</article>

Shopitem Example

Ashtanga Vinyasa Yoga und Meditation - Onlinekurs

Reserviert

Kursleitung: Max Mustermann

Yoga ist ein natürlicher Weg zu körperlicher und seelischer Gesundheit, Beweglichkeit und Gelassenheit. Die in Jahrtausenden entwickelten Praktiken des Yoga wirken präventiv, sorgen für eine tiefe Entspannung und helfen Stressreaktionen auszugleichen. Kursdetails

  • Ort:
    Treptow-Köpenick
  • Beginn:
    05.01.2022 17:30 Uhr
  • Freie Plätze:
    mehr als 2
  • Hinweis:
    Aufnahme in Warteliste möglich

Preis: € 56.60 (erm. € 31.00)


<article class="modul-card" data-add-clickable-area="smart">
    <header class="card__header">
        <h3 class="title">Ashtanga Vinyasa Yoga und Meditation - Onlinekurs</h3>
        <div class="card__status status"> 
            <p class="pill pill--success">Reserviert</p>
        </div>
        <div class="card__meta subtitle text--meta">
            <p>Kursleitung: Max Mustermann</p>
  
        </div>
        <div class="card__functions functions">
            
<button type="button" class="cardbutton" aria-label="Bearbeiten" title="Bearbeiten"><i class="bicon bicon-edit" aria-hidden="true"></i></button>
            
<button type="button" class="cardbutton" aria-label="Löschen" title="Löschen"><i class="bicon bicon-trash" aria-hidden="true"></i></button>
            
<button type="button" class="cardbutton active" aria-label="Vom Merkzettel löschen" title="Vom Merkzettel löschen"><i class="bicon bicon-heart" aria-hidden="true"></i></button>
            
<button type="button" class="cardbutton inactive" aria-label="In den Warenkorb" title="In den Warenkorb"><i class="bicon bicon-cart" aria-hidden="true"></i></button>
        </div>
    </header>
    <div class="card__body">
            
<p>Yoga ist ein natürlicher Weg zu körperlicher und seelischer Gesundheit, Beweglichkeit und Gelassenheit. Die in Jahrtausenden entwickelten Praktiken des Yoga wirken präventiv, sorgen für eine tiefe Entspannung und helfen Stressreaktionen auszugleichen. <a href="#" class="more" data-mainlink="true">Kursdetails</a></p>
            
    <ul class="list--tablelist ">
        <li>
            <div class="cell nowrap"><strong>Ort:</strong></div>
            <div class="cell">Treptow-Köpenick</div>
        </li>
        <li>
            <div class="cell nowrap"><strong>Beginn:</strong></div>
            <div class="cell">05.01.2022 17:30 Uhr</div>
        </li>
        <li>
            <div class="cell nowrap"><strong>Freie Plätze:</strong></div>
            <div class="cell">mehr als 2</div>
        </li>
        <li>
            <div class="cell nowrap"><strong>Hinweis:</strong></div>
            <div class="cell">Aufnahme in Warteliste möglich</div>
        </li>
    </ul>    </div>
    <div class="card__footer">
            
        <div class="row leftandright center">
            <div class="left">
                                                
                    <p><p class="nomargin"><strong>Preis: € 56.60 (erm. € 31.00)</strong></p></p>
                                                </div>
            <div class="right">
                                                
                    <button type="button" class="button button--addtocart">In den Warenkorb</button>
                                                </div>
        </div>    </div>
</article>