Card

Simple Card#

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#

<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&amp;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&amp;auto=format&amp;fit=crop&amp;w=1655&amp;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&amp;ixid=eyJhcHBfaWQiOjEyMDd9&amp;auto=format&amp;fit=crop&amp;w=800&amp;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>