Card
Simple Card
Lorem Ipsum
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Quis ipsum suspendisse ultrices gravida.
<div class="card-demo">
<div class="card">
<div class="card__header">
<h3>Lorem Ipsum</h3>
</div>
<div class="card__body">
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. Quis ipsum
suspendisse ultrices gravida.
</p>
</div>
<div class="card__footer">
<button class="button button--secondary button--block">See All</button>
</div>
</div>
</div>
Feed Item
Jared Palmer
Consultant, Speaker, Lead Engineer
<div class="card-demo">
<div class="card">
<div class="card__header">
<div class="avatar">
<img
class="avatar__photo"
src="https://avatars1.githubusercontent.com/u/4060187?s=460&v=4" />
<div class="avatar__intro">
<div class="avatar__name">Jared Palmer</div>
<small class="avatar__subtitle">
Consultant, Speaker, Lead Engineer
</small>
</div>
</div>
</div>
<div class="card__image">
<img
src="https://images.unsplash.com/photo-1501619951397-5ba40d0f75da?ixlib=rb-1.2.1&auto=format&fit=crop&w=1655&q=80"
alt="Image alt text"
title="Logo Title Text 1" />
</div>
<div class="card__footer">
<div class="button-group button-group--block">
<button class="button button--secondary">Like</button>
<button class="button button--secondary">Comment</button>
<button class="button button--secondary">Share</button>
</div>
</div>
</div>
</div>
Photo-centric
Quaco Lighthouse
The Quaco Head Lighthouse is a well maintained lighthouse close to St. Martins. It is a short, beautiful walk to the lighthouse along the seashore.<div class="card-demo">
<div class="card">
<div class="card__image">
<img
src="https://images.unsplash.com/photo-1506624183912-c602f4a21ca7?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=800&q=60"
alt="Image alt text"
title="Logo Title Text 1" />
</div>
<div class="card__body">
<h4>Quaco Lighthouse</h4>
<small>
The Quaco Head Lighthouse is a well maintained lighthouse close to St.
Martins. It is a short, beautiful walk to the lighthouse along the
seashore.
</small>
</div>
<div class="card__footer">
<button class="button button--primary button--block">Visit</button>
</div>
</div>
</div>