Skip to main content

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
Image alt text

<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

Image alt text

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>