Cards

Normale Card

Eine Dachzeile

Das ist die Headline der Card

<div class="card" style="max-width: 20rem;">
    <img class="card-img-top" src="https://picsum.photos/640/480">
    <div class="card-body">
        <p class="card-kicker kicker">Eine Dachzeile</p>
        <h4 class="card-title">Das ist die Headline der Card</h4>
    </div>
</div>

Card mit Link

Eine Dachzeile

Das ist die Headline der Card

 
<a class="card tilt" href="#" style="max-width: 20rem">
    <img class="card-img-top" src="https://picsum.photos/640/480">
    <div class="card-body">
        <p class="card-kicker kicker">Eine Dachzeile</p>
        <h4 class="card-title">Das ist die Headline der Card</h4>
    </div>
</a>

Hero-Card

Eine Dachzeile

Das ist die Headline der Card

 
<a class="card tilt text-white" href="#" style="max-width: 20rem">
    <img class="card-img" src="https://picsum.photos/640/800">
    <div class="card-img-gradient bg-gradient-water"></div>
    <div class="card-img-overlay">
        <div class="card-text-overlay">
            <p class="card-kicker kicker">Eine Dachzeile</p>
            <h4 class="h1 card-title">Das ist die Headline der Card</h4>
        </div>
    </div>
</a>

Cards für Spaces

Flußbad Hainbadestelle

6

Erneuerbare Energien

14

Glasfasertechnik

 
<div class="row">
    <div class="col-md-4">
        <a href="#" class="card card-space tilt bg-baths text-white">
            <div class="card-header text-right">
                <button type="button" class="btn btn-pill btn-outline-light btn-sm">folgen</button>
            </div>
            <i class="card-icon icon-water"></i>
            <div class="card-body">
                <h4 class="card-title">Flußbad Hainbadestelle</h4>
            </div>
            <div class="card-notification">6</div>
        </a>
    </div>
    <div class="col-md-4">
        <a href="#" class="card card-space tilt bg-energy text-white">
            <div class="card-header text-right">
                <button type="button" class="btn btn-pill btn-outline-light btn-sm">folgen</button>
            </div>
            <i class="card-icon icon-energy-renewable"></i>
            <div class="card-body">
                <h4 class="card-title">Erneuerbare Energien</h4>
            </div>
            <div class="card-notification">14</div>
        </a>
    </div>
    <div class="col-md-4">
        <a href="#" class="card card-space tilt bg-internet text-white">
            <div class="card-header text-right">
                <button type="button" class="btn btn-pill btn-outline-light btn-sm">folgen</button>
            </div>
            <i class="card-icon icon-internet"></i>
            <div class="card-body">
                <h4 class="card-title">Glasfasertechnik</h4>
            </div>
        </a>
    </div>
</div>

Teaser-Card

Bambados

 
<a class="card tilt bg-baths" href="#" style="max-width: 20rem">
    <img class="card-img-top" src="https://picsum.photos/640/320">
    <div class="card-footer text-white">
        <h4 class="card-title">Bambados</h4>
    </div>
</a>

Card für Features

Unsere Empfehlung
Lorem ipsum dolor sit amet

Sed ut perspiciatis unde omnis

Ut enim ad minima veniam,
quis nostrum exercitationem ullam corporis
suscipit laboriosam,
nisi ut aliquid ex ea commodi consequatur?

Et harum quidem rerum facilis est et expedita distinctio.

Bestellen 

<div class="card card-product card-featured" style="max-width: 24rem;">
    <div class="card-header bg-energy text-white text-center">
        <small class="mx-auto text-dark bg-white mb-2 px-2 d-inline-block btn-pill font-weight-bold">Unsere Empfehlung</small>
        <h6 class="text-white h5">Lorem ipsum dolor sit amet</h6>
    </div>
    <div class="card-body">
        <div class="text-center">
            <h3 class="h1 product-title mb-2">Sed ut perspiciatis unde omnis</h3>
        </div>
        <div class="card-bodytext">
            <hr>
            <p class="text-center">
                Ut enim ad minima veniam, <br/>
                quis nostrum exercitationem ullam corporis <br />
                suscipit laboriosam, <br />
                nisi ut aliquid ex ea commodi consequatur?
            </p>
            <hr>
            <p class="small text-center">
                Et harum quidem rerum facilis est et expedita distinctio.</p>
            <p class="small text-center">
                <strong>
                    <a href="#" class="link-internal btn btn-energy">Bestellen</a>
                </strong>
            </p>
        </div>
    </div>
</div>

Card Person

Ihr Ansprechpartner

John Doe

0123 456-789
john.doe@example.org 

<div class="card card-person">
    <div class="card-body">
        <div class="row align-items-center">
            <div class="col-5">
                <figure class="figure media-item type-2">
                    <img class="figure-img img-fluid rounded-circle" src="https://picsum.photos/300/300" width="300" height="300">
                </figure>
            </div>
            <div class="col-7 ">
                <header>
                    <h5 class="headline">Ihr Ansprechpartner</h5>
                </header>
                <p>
                    <strong>John Doe</strong><br><br>
                    0123 456-789<br>
                    john.doe@example.org
                </p>
            </div>
        </div>
    </div>
</div>

News-Card

21. Juni 2018

Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin.

von John Doe
27. September 2018

Lor separat existentie es un myth.

von John Doe
4. Oktober 2018

Lorem Ipsum dolor sit amet.

von Jane Doe

 
<div class="row">
    <div class="col-md-4">
        <a href="#" class="card tilt">
            <div class="card-media media">
                <img src="https://picsum.photos/120/120">
                <div class="card-body card-body-sm media-body">
                    <div class="kicker kicker-sm">21. Juni 2018</div>
                    <p class="card-text">Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin.</p>
                    <p class="card-from"><i class="icon icon-person"></i> von John Doe</p>
                </div>
            </div>
        </a>
    </div>
    <div class="col-md-4">
        <a href="#" class="card tilt">
            <div class="card-media media">
                <img src="https://picsum.photos/120/120">
                <div class="card-body card-body-sm media-body">
                    <div class="kicker kicker-sm">27. September 2018</div>
                    <p class="card-text">Lor separat existentie es un myth. </p>
                    <p class="card-from"><i class="icon icon-person"></i> von John Doe</p>
                </div>
            </div>
        </a>
    </div>
    <div class="col-md-4">
        <a href="#" class="card tilt">
            <div class="card-media media">
                <div class="card-body card-body-sm media-body">
                    <div class="kicker kicker-sm">4. Oktober 2018</div>
                    <p class="card-text">Lorem Ipsum dolor sit amet. </p>
                    <p class="card-from"><i class="icon icon-person"></i> von Jane Doe</p>
                </div>
            </div>
        </a>
    </div>
</div>

Event-Card

01.06.2019

Titel des Events
27.06.2019

Far far away..
05.07.2019

Lorem Ipsum

 
<div class="row">
    <div class="col-md-4">
        <a href="#" class="card tilt card-lg">
            <div class="card-event event">
                <div class="event-date">
                    <time>
                        <div class="event-day text-baths">01.</div>
                        <div class="event-month">Juni</div>
                        <div class="event-year">2019</div>
                    </time>
                </div>
                <div class="card-body card-body-sm media-body">
                    <div class="kicker kicker-sm">01.06.2019</div>
                    <p class="card-text" itemprop="name">Titel des Events</p>
                </div>
            </div>
        </a>
    </div>
    <div class="col-md-4">
        <a href="#" class="card tilt card-lg">
            <div class="card-event event">
                <div class="event-date">
                    <time>
                        <div class="event-day text-baths">27.</div>
                        <div class="event-month">Juni</div>
                        <div class="event-year">2019</div>
                    </time>
                </div>
                <div class="card-body card-body-sm media-body">
                    <div class="kicker kicker-sm">27.06.2019</div>
                    <p class="card-text" itemprop="name">Far far away..</p>
                </div>
            </div>
        </a>
    </div>
    <div class="col-md-4">
        <a href="#" class="card tilt card-lg">
            <div class="card-event event">
                <div class="event-date">
                    <time>
                        <div class="event-day text-baths">05.</div>
                        <div class="event-month">Juli</div>
                        <div class="event-year">2019</div>
                    </time>
                </div>
                <div class="card-body card-body-sm media-body">
                    <div class="kicker kicker-sm">05.07.2019</div>
                    <p class="card-text" itemprop="name">Lorem Ipsum</p>
                </div>
            </div>
        </a>
    </div>
</div>

Post-Card mit Kommentaren

Max Mustermann
28. Juni 2018

Vehicula Nibh Elit

Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Donec ullamcorper nulla non metus auctor fringilla. Nullam quis risus eget urna mollis ornare vel eu leo.

2 Kommentare 
<a href="#" class="card tilt mb-4" style="max-width: 24rem">
    <div class="card-header text-muted pb-0">
        <div class="media media-horizontal">
            <img class="img-fluid rounded-circle mr-3" src="https://picsum.photos/40/40">
            <div class="media-body">
                <span class="mt-0 mb-0 mt-1 label-heading">Max Mustermann</span>
                <div class="kicker kicker-sm">28. Juni 2018</div>
            </div>
        </div>
    </div>
    <div class="card-body">
        <h3>Vehicula Nibh Elit</h3>
        <p>Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Donec ullamcorper nulla non metus auctor fringilla. Nullam quis risus eget urna mollis ornare vel eu leo.</p>
    </div>
    <img class="img-max" src="https://picsum.photos/360/270">
    <div class="card-footer">
        <i class="icon icon-chat mr-1"></i> <strong>2 Kommentare</strong>
    </div>
</a>