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>