loading... Pacem JS

Styling Cards

.pacem-card is a css class that eases the disposition of content plus an image.
Heading, Body and Footer (also Tools and other stuff) follow the rules above, while Img and Ribbon positioning gets also handled via css.


<div class="pacem-card">
    <pacem-picture src="/assets/pic001.png" tooltip="card image" class="card-img picture-cover picture-center picture-middle"></pacem-picture>
    <div class="card-ribbon">
        <pacem-icon icon="material-icons emoji_emotions display-block"></pacem-icon>
    </div>
    <div class="card-heading">
        Card Heading
    </div>
    <div class="card-body">
        Card Body
    </div>
    <div class="card-footer">
        Card Footer
    </div>
</div>