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 functions (Edit, Delete, Bookmark)

Card title

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

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 title

<article class="modul-card" data-add-clickable-area="smart">
        <div class="card__functions functions">
                Card functions (Edit, Delete, Bookmark)
        </div>
        <div class="card__body">

                <div class="inner">
                                   
                        <h3 class="title">Card title</h3>

                        <ul class="card__status status"> 
                                <li>
                                        <span class="pill pill--info">Card status (see "Pills" for more layout options)</span>
                                </li>
                        </ul>
                        <div class="card__meta subtitle text--meta">
                                <p>Card subtitle</p>
  
                        </div>
                        <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="#5585" class="more" data-mainlink="true">Details<span class="aural">zu: Card title</span></a> 
                        </p>
                </div>
        </div>
        <div class="card__footer">
                <div class="flexgrid grid--auto">
                        <div class="item left">Optional cardfooter left (e.g. Price)</div>
                        <div class="item right">Optional cardfooter 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

<article class="modul-card" data-add-clickable-area="smart">
        <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>
        <div class="card__body">

                <div class="inner">
                                   
                        <h3 class="title">Ashtanga Vinyasa Yoga und Meditation - Onlinekurs</h3>

                        <ul class="card__status status"> 
                                <li>
                                        <span class="pill pill--success">Reserviert</span>
                                </li>
                        </ul>
                        <div class="card__meta subtitle text--meta">
                                <p>Kursleitung: Max Mustermann</p>
  
                        </div>            
<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>
        <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 Pill Inverted
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
Optional cardfooter left (e.g. Price)

Optional cardfooter right (e.g. Action Button)
Card
- Success Pill Inverted
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
Optional cardfooter left (e.g. Price)

Optional cardfooter right (e.g. Action Button)
Card
- Error Pill Inverted
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
Optional cardfooter left (e.g. Price)

Optional cardfooter right (e.g. Action Button)

Experimental: Card with image

Card functions (Edit, Delete, Bookmark)

@copyright

Experimental: Card with image

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

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