Card v1

Content Cards

Markup¶

<div class="card v1">
    <div class="card-title">
        Card Title
    </div>
    <img class="card-image" src="/img/250px/example-01.jpg">
    <div class="card-content">
        Lorem ipsum dolor sit amet, consetetur sadipscing elitr, 
        sed diam nonumy eirmod tempor invidunt ut labore et dolore 
        magna aliquyam erat, sed diam voluptua.
    </div>
    <div class="card-action">
        <button class="button primary small">Button</button>
    </div>
</div>

Example¶

Card Title

Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.

Card Title

Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.

Card Title

Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.

27/11/2019

reveal¶

<div class="card v1 reveal-hover">
    <div class="card-title">
        Card Title
    </div>
    <img class="card-image" src="/img/250px/example-01.jpg">
    <div class="card-content">
        Lorem ipsum dolor sit amet, consetetur sadipscing elitr, 
        sed diam nonumy eirmod tempor invidunt ut labore et dolore 
        magna aliquyam erat, sed diam voluptua.
    </div>
    <div class="card-action">
        <button class="button primary small">Button</button>
    </div>
    <div class="card-reveal">
        <div class="reveal-header">
            <div class="card-title">
                Card Title reveal
            </div>
        </div>
        <div class="reveal-content">
            <div class="card-content">
                ...
            </div>
        </div>
        <div class="reveal-footer">
            <button class="button primary small">Button</button>
        </div>
    </div>
</div>

Hint

The card with a reveal is managed hover by assigning the class reveal-hover to the card. You can also show the reveal contents with the CSS-class open. That way the reveal content can be displayed via JavaScript as well.

Card Title

Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.

Card Title reveal

Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.

Grouping¶

Card Title

Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.

Card Title

Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.

Card Title

Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.

Collecting¶

.cards > .card¶

<div class="four cards">
    <div class="card v1"></div>
    <div class="card v1"></div>
    <div class="card v1"></div>
    <div class="card v1"></div>
    <div class="card v1"></div>
    <div class="card v1"></div>
    <div class="card v1"></div>
    ...
</div>

Note

The grouping of the cards takes place on the indication of the amount of cards per line. Breaking the cards into the next line on mobile and tablet devices, can be done with the additional selector responsive.

Card Title

Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.

Card Title

Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.

Card Title

Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.

Card Title

Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.

.feed-collection¶

<div class="feed-collection v1 two-small-up-only three-medium-up-only">
    <div class="card v1"></div>
    <div class="card v1"></div>
    <div class="card v1"></div>
    <div class="card v1"></div>
    <div class="card v1"></div>
    <div class="card v1"></div>
    <div class="card v1"></div>
    ...
</div>

Card Title

Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.

Card Title

Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.

Card Title

Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.

Card Title

Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.

Card Title

Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.

Card Title

Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.

Card Title

Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.

Card Title

Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.

Card v1

Markup¶

Example¶

reveal¶

Grouping¶

Collecting¶

.cards > .card¶

.feed-collection¶

Unterstützen Sie uns