Cards

Example

Placeholder image
€ 2,50

Yung Internet + Rens, Jaïr & Ome Uncle + Jong Louis

Code

<div class="container my-6">
    <div class="columns is-multiline">
        <div class="column is-half-tablet is-one-third-desktop is-half">
            <a class="card is-block has-background-tertiary:hover has-text-white:hover has-background-transition">
                <div class="card-image">
                    <figure class="image is-4by3 object-fit-cover mx-0">
                        <img src="https://bulma.io/images/placeholders/1280x960.png" alt="Placeholder image">
                    </figure>
                </div>
                <div class="card-content">
                    <div class="media">
                        <div class="media-left">
                            <figure class="is-line-height-64 image is-64x64 has-background-tertiary-light has-text-white has-text-centered">
                                € 2,50
                            </figure>
                        </div>
                        <div class="media-content">
                            <p class="title is-5 has-text-white:hover">
                                Yung Internet + Rens, Jaïr & Ome Uncle + Jong Louis
                            </p>
                        </div>
                    </div>
                </div>
            </a>
        </div>
    </div>
</div>

Components