Cards Image
The card component is a box that can include different types of content to display information prominently with a featured image above.
Usage
The card component will extend its parent container that it is placed in, use the bootstrap grid system to prevent the card component from getting too large.
Card title
Lorem ipsum dolor sit amet consectetur adipisicing elit. Possimus ad quasi itaque enim voluptas fugiat placeat natus magnam! Repellendus blanditiis perferendis voluptatum fugit quisquam reiciendis labore dolor, error quaerat eveniet!
March 13, 2019
cards\card.hbs
<div class="slb-card">
<img class="slb-card__image" src="images/large_blog_image_780x439.jpg" alt="Card image example">
<div class="slb-card__body">
<h3>Card title</h3>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Possimus ad quasi itaque enim voluptas fugiat placeat natus magnam! Repellendus blanditiis perferendis voluptatum fugit quisquam reiciendis labore dolor, error quaerat eveniet!</p>
<p><a href="#">Joe Blogs</a></p>
<p>March 13, 2019</p>
</div>
</div>
Source:
components/_card.scss