Cards

A card is a way to call out a small section on the page.


Basic Card

<div class='card'>
  <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Reprehenderit asperiores veniam nostrum, debitis consequatur alias cumque aliquam ullam minima sint dignissimos iure fugit ducimus libero delectus totam enim veritatis est earum maiores quibusdam iusto? Aut qui, tenetur vel dolores nisi hic fuga id, explicabo ipsam, est cupiditate accusamus debitis deleniti.</p>
</div>

Lorem ipsum dolor sit amet consectetur adipisicing elit. Reprehenderit asperiores veniam nostrum, debitis consequatur alias cumque aliquam ullam minima sint dignissimos iure fugit ducimus libero delectus totam enim veritatis est earum maiores quibusdam iusto? Aut qui, tenetur vel dolores nisi hic fuga id, explicabo ipsam, est cupiditate accusamus debitis deleniti.

Card with a Header
<div class='card'>
  <header>My Card</header>
  <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Reprehenderit asperiores veniam nostrum, debitis consequatur alias cumque aliquam ullam minima sint dignissimos iure fugit ducimus libero delectus totam enim veritatis est earum maiores quibusdam iusto? Aut qui, tenetur vel dolores nisi hic fuga id, explicabo ipsam, est cupiditate accusamus debitis deleniti.</p>
</div>
My Card

Lorem ipsum dolor sit amet consectetur adipisicing elit. Reprehenderit asperiores veniam nostrum, debitis consequatur alias cumque aliquam ullam minima sint dignissimos iure fugit ducimus libero delectus totam enim veritatis est earum maiores quibusdam iusto? Aut qui, tenetur vel dolores nisi hic fuga id, explicabo ipsam, est cupiditate accusamus debitis deleniti.


Category Cards

<div class='card-category'>
  <img src='https://source.unsplash.com/featured/1140x665?flowers=1' href=''>
  <span class='hcg-flower'></span>
  <h3>Category</h3>
  <p>Bacon ipsum dolor amet short ribs beef ribs pork belly flank, shoulder kielbasa ham hock capicola shank cow frankfurter ball tip spare ribs short loin drumstick. Swine buffalo venison tenderloin jerky ham boudin pork.</p>
  <a href=''>See All In This Category<i class='fa fa-angle-double-right'></i></a>
</div>

Category

Bacon ipsum dolor amet short ribs beef ribs pork belly flank, shoulder kielbasa ham hock capicola shank cow frankfurter ball tip spare ribs short loin drumstick. Swine buffalo venison tenderloin jerky ham boudin pork.

See All In This Category
Category Card with Right Image
<div class='card-category col-parent'>
  <div class='col d-grid-5 t-grid-5 m-grid-12'>
    <img src='https://source.unsplash.com/featured/750x500?flowers=2' mobile-show />
    <span class="hcg-flower"></span>
    <h3>Category</h3>
    <p>Bacon ipsum dolor amet short ribs beef ribs pork belly flank, shoulder kielbasa ham hock capicola shank cow frankfurter ball tip spare ribs short loin drumstick. Swine buffalo venison tenderloin jerky ham boudin pork.</p>
    <a href=''>See All In This Category<i class='fa fa-angle-double-right'></i></a>
  </div>
  <div class='col d-grid-7 t-grid-7 m-grid-12' mobile-hide>
    <img src='https://source.unsplash.com/featured/750x500?flowers=2' />
  </div>
</div>

Category

Bacon ipsum dolor amet short ribs beef ribs pork belly flank, shoulder kielbasa ham hock capicola shank cow frankfurter ball tip spare ribs short loin drumstick. Swine buffalo venison tenderloin jerky ham boudin pork.

See All In This Category

Shop Cards

<div class='card-shop' background='https://source.unsplash.com/featured/1170x500?flowers=4'>
  <h3><a href=''>Pork loin drumstick buffalo <i class='fa fa-angle-double-right'></i></a></h3>
  <ul>
    <li>Bacon ipsum dolor amet.</li>
    <li>Swine buffalo venison tenderloin.</li>
    <li>Pork chop kevin boudin sirloin.</li>
  </ul>
  <a class='button box lg' href=''>Shop Now <i class='fa fa-angle-double-right'></i></a>
</div>

Pork loin drumstick buffalo

  • Bacon ipsum dolor amet.
  • Swine buffalo venison tenderloin.
  • Pork chop kevin boudin sirloin.
Shop Now

Photo Cards

<div class='card-photo' background='https://source.unsplash.com/featured/1170x500?flowers=5' style='height: 500px'>
  <h3>Bacon ipsum dolor</h3>
  <p>Tongue boudin tail buffalo sirloin ham porchetta landjaeger tenderloin shankle jowl venison chuck bresaola capicola.</p>
  <a>Shop Bacon <i class='fa fa-angle-double-right'></i></a>
</div>

Bacon ipsum dolor

Tongue boudin tail buffalo sirloin ham porchetta landjaeger tenderloin shankle jowl venison chuck bresaola capicola.

Shop Bacon