CSS UI Component

Created with HTML5, CSS (Sass, Flexbox). Static site generated with Gatsby JS.

Project created by Kenold Beauplan - @kenoldb.

See all Cards Sass files in /src/styles/cards

Basic Stacked Card

<divclass="card"><divclass="card__image"><ahref="..."><imgsrc="..." /></a></div><divclass="card__content"><divclass="card__topic">Topic</div><headerclass="card__header"><h4class="card__title"><ahref="...">Card Title</a></h4></header></div><divclass="card__footer"><divclass="card__author">Jane Doe</div><divclass="card__date">5 hours ago</div></div></div>

Overlapped Card

Overlapped card uses the same structure as Basic Stacked Card, just add the card--overlap modifier to the parent class. Ex: <div class="card card--overlap">...</div>

Social Card (using FontAwesome icons)

<divclass="card card--social"><headerclass="card__header user"><divclass="user__avatar"><imgsrc="..." /></div><divclass="username-date"><divclas="user__name">
Jane Doe
</div><divclass="card__date">Yesterday at 12:31 PM</div></div><divclass="more-link"><iclass="fas fa-ellipsis-v"></i></div></header><divclass="card__content"><divclass="card__text">Lorem..</div><divclass="card__image"><imgsrc="..." /></div></div><footerclass="card__footer action"><divclass="action__like"><spanclass="icon"><iclass="fas fa-thumbs-up"></i></span><spanclass="count">3.7K</span></div><divclass="action__comment"><spanclass="icon"><iclass="far fa-comment-alt"></i></span><spanclass="count">178</span></div></footer></div>

Badge Card

<divclass="card card--badge"><divclass="card__image"><imgsrc="..." /><divclass="card__topic">Topic</div></div><divclass="card__content"><headerclass="card__header"><h4class="card__title">Card Title</h4></header><footerclass="card__footer"><divclass="card__date">
Oct. 10, 2019
</div></footer></div></div>

Floating Icon Card

Floating Icon Card uses the same structure as the Badge Stacked Card, add the card--float modifier to the parent class. Ex: <div class="card card--float">...</div>

Card Minimal

<divclass="card card--minimal"><divclass="card__content"><divclass="card__topic">Topic</div><headerclass="card__header"><h4class="card__title"><span>Card title</span></h4></header></div></div>

Card Minimal Themed

<divclass="card card--minimal--themed green no-gap"><divclass="card__content"><divclass="card__topic">Topic</div><headerclass="card__header"><h4class="card__title">Short Title</h4></header><pclass="card__text">Text</p><footerclass="card__footer"><span>CTA</span><span>&gt;</span></footer></div></div>

Card Horizontal (uses FontAwesome for comment icon)

<divclass="card card--horizontal"><divclass="card__image"><imgsrc="..." /></div><divclass="card__content"><divclass="card__topic">Topic</div><headerclass="card__header"><h2class="card__title">Title</h2></header><pclass="card__text">Lorem...</p><divclass="card__footer"><divclass="card__meta-author">by John Smith</div><divclass="card__meta-comment"><iclass="fas fa-comment"></i><spanclass="card__meta-comment-count">57</span></div></div></div></div>

Card Horizontal Video (uses FontAwesome for play icon)

<divclass="card card--horizontal card--horizontal--video"><divclass="card__image"><imgsrc="..." /><divclass="btn btn--circle"><divclass="card__icon"><iclass="fas fa-play"></i></div></div></div><divclass="card__content"><divclass="card__topic">Topic</div><headerclass="card__header"><h2class="card__title">Title</h2></header><pclass="card__text">Lorem...</p></div></div>

Music Player Card (uses fontAwesome icons: step backward, forward and play)

<divclass="card card--music"><divclass="card__image"><imgsrc="..." /></div><divclass="card__content"><headerclass="card__header"><h2class="card__title">Title</h2></header><pclass="card__subtitle">Artist</p><ulclass="controls__list"><liclass="control__item"><iclass="fas fa-step-backward"></i></li><liclass="control__item"><iclass="fas fa-play"></i></li><liclass="control__item"><iclass="fas fa-step-forward"></i></li></ul></div></div>

Overlay 'Movie' Card (uses fontAwesome icons: play, heart and horizontal ellipsis)

<divclass="card card--overlay"><divclass="card__image"><imgsrc="..." /></div><divclass="darken"></div><divclass="card__notification">Now Streaming</div><divclass="card__content"><divclass="separator"></div><h4class="card__title">Title</h4><pclass="card__text">Lorem...</p><divclass="card__actions"><divclass="btn btn--primary"><spanclass="icon"><iclass="fas fa-play"></span><spanclass="btn__text">Play</span></div><divclass="btn btn--secondary"><spanclass="icon"><iclass="fas fa-heart"></span><spanclass="btn__text">Favorite</span></div><divclass="btn btn--ellipsis"><spanclass="icon"><iclass="fas fa-ellipsis-h"></i></span></div></div></div></div>

Overlay 'Dating' Card (uses fontAwesome icons: times and heart)

<divclass="card card--overlay card--overlay--dating"><divclass="card__image"><imgsrc="..." /></div><divclass="darken"></div><divclass="card__content"><divclass="card__title model"><spanclass="model__name">Name, </span><spanclass="model__age">Age</span></div><divclass="card__text">Lorem...</div><divclass="card__actions swipe"><divclass="swipe__left"><iclass="fas fa-times"></div><divclass="swipe__right"><iclass="fas fa-heart"></div></div></div></div>

E-Commerce Card (fontAwesome icons: heart, stars)

<divclass="card card--overlay-icon"><divclass="card__image"><imgsrc="..." /><divclass="card__icon"><iclass="fas fa-heart"></div></div><divclass="card__content"><divclass="card__topic">Category</div><headerclass="class__header"><h5class="card__title">Title</h5></header><footerclass="card__footer"><divclass="price"><spanclass="price__original strike">$83.81</span><spanclass="price__sale">$71.24</span></div><divclass="rating"><iclass="fas fa-star"></i></div></footer></div></div>

Video Card

<divclass="card card--video"><divclass="card__image"><imgsrc="..." /><divclass="card__icon"><iclass="fas fa-play-circle"></i></div></div><divclass="card__content"><h4class="card__title">Title</h4></div></div>

Video Badge Card + Play Icon on Hover

<divclass="card card--video-hover"><divclass="card__image"><imgsrc="..." /><divclass="card__badge card__badge--right">3:44</div><divclass="card__icon"><iclass="fas fa-play-circle"></i></div></div><divclass="card__content"><headerclass="card__header"><h4class="card__title">Title</h4></header></div></div>

Testimonial Card

<divclass="card card--testimonial"><divclass="card__content"><pclass="card__text">"Lorem..."</p><footerclass="card__footer author"><divclass="author__photo"><imgsrc="..." class="author__image" /></div><divclass="author__name">
Author <br/> Job
</div></footer></div></div>

• Icons: FontAwesome
• Dummy blog posts generated at title-generator.com.
• All images are courtesy of Unsplash.
• Illustration from [Drawkit.io[(https://www.drawkit.io).

Packages used:

• React JS
• Node Sass - to compile scss files
• React Icons - for icons
• Prism - for code formating
• React Rater - for product star rating
• Moment JS

• all Gatsby default dependencies

Deployed and hosted on Netlify.com