PaperCSS
the less formal CSS framework
Cards
Full card example
It is possible to not put all the sub-classes like card-title, card-subtitle, card-text, … But instead the framework will recognize the element properly if it’s a h4, h5, p, … And you need to put all this content on a div with card class.
My awesome Paper card!
Nice looking subtitle.
Notice that the card width in this example have been set to 20rem, otherwise it will try to fill the current container/row where the card is.
Code:
<div class="card" style="width: 20rem;">
<img src="https://picsum.photos/768" alt="Card example image">
<div class="card-body">
<h4 class="card-title">My awesome Paper card!</h4>
<h5 class="card-subtitle">Nice looking subtitle.</h5>
<p class="card-text">Notice that the card width in this example have been set to 20rem, otherwise it will try to fill the current container/row where the card is.</p>
<button>Let me go here!</button>
</div>
</div>Card title, text, links
My awesome Paper card!
Nice looking subtitle.
This is another example of a card without image. Cards are also meant to be used without images, but with text/links/buttons.
First link Second linkCode:
<div class="card" style="width: 20rem;">
<div class="card-body">
<h4 class="card-title">My awesome Paper card!</h4>
<h5 class="card-subtitle">Nice looking subtitle.</h5>
<p class="card-text">This is another example of a card without image. Cards are also meant to be used without images, but with text/links/buttons.</p>
<a class="card-link" href="#">First link</a>
<a class="card-link" href="#">Second link</a>
</div>
</div>Image on top or bottom
My awesome Paper card!
Nice looking subtitle.
You can also place image on the bottom of the card.
Code:
<div class="card" style="width: 20rem;">
<div class="card-body">
<h4 class="card-title">My awesome Paper card!</h4>
<h5 class="card-subtitle">Nice looking subtitle.</h5>
<p class="card-text">You can also place image on the bottom of the card.</p>
<button>Let me go here!</button>
</div>
<img class="image-bottom" src="https://unsplash.it/550/250" alt="Card example image">
</div>Header and footer
Header
My awesome Paper card!
Nice looking subtitle.
You can also place image on the bottom of the card.
Code:
<div class="card" style="width: 20rem;">
<div class="card-header">Header</div>
<div class="card-body">
<h4 class="card-title">My awesome Paper card!</h4>
<h5 class="card-subtitle">Nice looking subtitle.</h5>
<p class="card-text">You can also place image on the bottom of the card.</p>
<button>Let me go here!</button>
</div>
<div class="card-footer">Footer</div>
</div>