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.

The Card module can be used for displaying in the card design. The sections with the classes card__header and card__body are mandatory elements and subtitle, card__footer and functions are optional.

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.

To avoid duplicate links, you can also make the title clickable with the data attribute data-add-clickable-area="smart" if there is already a detail link in the section with the class card__body. With the data attribute data-add-clickable-area="full", you can make the complete Card clickable. The link destination is determined by the href attribute of the link with the attribute data-mainlink. "full" should only be used if there are no other links in the Card.

.modul-card

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


<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 pill--inverted">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="#6906" 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

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


<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 pill--inverted">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" title="Bearbeiten"><i class="bicon bicon-edit" aria-hidden="true"></i><span class="aural">Bearbeiten</span></button>
            
<button type="button" class="cardbutton" title="Löschen"><i class="bicon bicon-trash" aria-hidden="true"></i><span class="aural">Löschen</span></button>
            
<button type="button" class="cardbutton active" title="Vom Merkzettel löschen"><i class="bicon bicon-heart" aria-hidden="true"></i><span class="aural">Vom Merkzettel löschen</span></button>
            
<button type="button" class="cardbutton inactive" title="In den Warenkorb"><i class="bicon bicon-cart" aria-hidden="true"></i><span class="aural">In den Warenkorb</span></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>
            
<dl class="list--horizontal">
    <dt>Ort</dt>
    <dd>
    Treptow-Köpenick
    </dd>
    <dt>Beginn</dt>
    <dd>
    05.01.2022 17:30 Uhr
    </dd>
    <dt>Freie Plätze</dt>
    <dd>
    mehr als 2
    </dd>
    <dt>Hinweis</dt>
    <dd>
    Aufnahme in Warteliste möglich
    </dd>
</dl>
    </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>

Test: Cards in flexgrid

Card

Info

Card subtitle

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

Card footer left (e.g. Price)

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

Success

Card subtitle

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

Card footer left (e.g. Price)

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

Error

Card subtitle

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

Card footer left (e.g. Price)

Card footer right (e.g. Action Button)

Experimental: Card with image

@copyright

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: Experimental: Card with image