DE-PACK Component Library

Cards: Grid 

<div class="grid grid-cols-1 justify-between md:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-4">
    <div class="card">
        <img class="card__image" src="https://source.unsplash.com/random/400x300/?mountain" alt="Mountain">
        <div class="card__body">
            <div class="card__title">Mountain</div>
            <div class="card__subtitle">No Mountain, no cry</div>
            <p class="card__text">
                Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptatibus quia, Nonea! Maiores et perferendis eaque, exercitationem praesentium nihil.
            </p>
            <a class="btn androidgreen-gradient" href="#">Click here</a>
        </div>
    </div>
    <div class="card">
        <img class="card__image" src="https://source.unsplash.com/random/400x300/?mountain" alt="Mountain">
        <div class="card__body">
            <div class="card__title">Mountain</div>
            <div class="card__subtitle">No Mountain, no cry</div>
            <p class="card__text">
                Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptatibus quia, Nonea! Maiores et perferendis eaque, exercitationem praesentium nihil.
            </p>
            <a class="btn androidgreen-gradient" href="#">Click here</a>
        </div>
    </div>
    <div class="card">
        <img class="card__image" src="https://source.unsplash.com/random/400x300/?mountain" alt="Mountain">
        <div class="card__body">
            <div class="card__title">Mountain</div>
            <div class="card__subtitle">No Mountain, no cry</div>
            <p class="card__text">
                Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptatibus quia, Nonea! Maiores et perferendis eaque, exercitationem praesentium nihil.
            </p>
            <a class="btn androidgreen-gradient" href="#">Click here</a>
        </div>
    </div>
    <div class="card">
        <img class="card__image" src="https://source.unsplash.com/random/400x300/?mountain" alt="Mountain">
        <div class="card__body">
            <div class="card__title">Mountain</div>
            <div class="card__subtitle">No Mountain, no cry</div>
            <p class="card__text">
                Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptatibus quia, Nonea! Maiores et perferendis eaque, exercitationem praesentium nihil.
            </p>
            <a class="btn androidgreen-gradient" href="#">Click here</a>
        </div>
    </div>
    <div class="card">
        <img class="card__image" src="https://source.unsplash.com/random/400x300/?mountain" alt="Mountain">
        <div class="card__body">
            <div class="card__title">Mountain</div>
            <div class="card__subtitle">No Mountain, no cry</div>
            <p class="card__text">
                Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptatibus quia, Nonea! Maiores et perferendis eaque, exercitationem praesentium nihil.
            </p>
            <a class="btn androidgreen-gradient" href="#">Click here</a>
        </div>
    </div>
    <div class="card">
        <img class="card__image" src="https://source.unsplash.com/random/400x300/?mountain" alt="Mountain">
        <div class="card__body">
            <div class="card__title">Mountain</div>
            <div class="card__subtitle">No Mountain, no cry</div>
            <p class="card__text">
                Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptatibus quia, Nonea! Maiores et perferendis eaque, exercitationem praesentium nihil.
            </p>
            <a class="btn androidgreen-gradient" href="#">Click here</a>
        </div>
    </div>
    <div class="card">
        <img class="card__image" src="https://source.unsplash.com/random/400x300/?mountain" alt="Mountain">
        <div class="card__body">
            <div class="card__title">Mountain</div>
            <div class="card__subtitle">No Mountain, no cry</div>
            <p class="card__text">
                Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptatibus quia, Nonea! Maiores et perferendis eaque, exercitationem praesentium nihil.
            </p>
            <a class="btn androidgreen-gradient" href="#">Click here</a>
        </div>
    </div>
    <div class="card">
        <img class="card__image" src="https://source.unsplash.com/random/400x300/?mountain" alt="Mountain">
        <div class="card__body">
            <div class="card__title">Mountain</div>
            <div class="card__subtitle">No Mountain, no cry</div>
            <p class="card__text">
                Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptatibus quia, Nonea! Maiores et perferendis eaque, exercitationem praesentium nihil.
            </p>
            <a class="btn androidgreen-gradient" href="#">Click here</a>
        </div>
    </div>
    <div class="card">
        <img class="card__image" src="https://source.unsplash.com/random/400x300/?mountain" alt="Mountain">
        <div class="card__body">
            <div class="card__title">Mountain</div>
            <div class="card__subtitle">No Mountain, no cry</div>
            <p class="card__text">
                Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptatibus quia, Nonea! Maiores et perferendis eaque, exercitationem praesentium nihil.
            </p>
            <a class="btn androidgreen-gradient" href="#">Click here</a>
        </div>
    </div>
</div>
 
<div class="grid grid-cols-1 justify-between md:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-4">
{% render '@card' %}
{% render '@card' %}
{% render '@card' %}
{% render '@card' %}
{% render '@card' %}
{% render '@card' %}
{% render '@card' %}
{% render '@card' %}
{% render '@card' %}
</div>
 
/* No context defined. */
  • Content: 
    Card(s).
Dinge in einheitlicher Form anzeigen.

BEM-Classes:
https://9elements.com/bem-cheat-sheet/#card+ii
  • URL: /components/raw/card/card.md
  • Filesystem Path: components/03-organisms/card/card.md
  • Size: 108 Bytes

No notes defined.