Skip to Navigation
< Return to Ferrigan Design Websites Page

Lesson 12 Final Exam Project

home  Home
 ☰
HTML Selectors Layouts User Interface At-Rules Effects ARIA
Menu Widgets Media Cards

Card Patterns

Article Card

This is an article card with a read-more call-to-action.

HTML

<div class="card-grid">
    <div class="article-card">
        <div class="title">Using CSS to Style HTML</div>
        <div class="author">Mary Shelley</div>
        <div class="snippet">Lorem ipsum dolor sit amet, consectetur 
         adipisicing elit. Exercitationem aspernatur, vero molestiae
         quas fugiat nam dolor doloremque architecto, reiciendis
         tempore assumenda.</div>
        <button class="read-more">Read more...</button>
    </div>
    <div class="article-card">
        <div class="title">Learning JavaScript</div>
        <div class="author">H. P. Lovecraft</div>
        <div class="snippet">Amet repudiandae facere obcaecati
         doloribus dolorem quam adipisci beatae maiores quas,
         voluptate corrupti autem exercitationem ipsam dolor
         repellendus at, deleniti sed cumque?</div>
        <button class="read-more">Read more...</button>
    </div>
    <div class="article-card">
        <div class="title">My Favorite HTML Elements</div>
        <div class="author">Edgar Allan Poe</div>
        <div class="snippet">Possimus cupiditate enim illo
         commodi ipsam, ab, aperiam sapiente tenetur, assumenda
         pariatur esse? Officia, minima? Nostrum perferendis
         amet laborum dicta quaerat.</div>
        <button class="read-more">Read more...</button>
    </div>
    <div class="article-card">
        <div class="title">All the CSS Things</div>
        <div class="author">e. e. cummings</div>
        <div class="snippet">Sit quas dolor perspiciatis nihil
         enim tempore veniam rerum repellendus possimus fugit
         aspernatur assumenda ducimus, accusamus ex beatae
         iusto quam suscipit odit.</div>
        <button class="read-more">Read more...</button>
    </div>
</div>

CSS

/* all cards */
.card-grid {
    display: flex;
    flex-flow: row wrap;
    justify-content: space-evenly;
    gap: 1rem;
}
/* each card */
.article-card {
    border: thin solid var(--main-dark-color);
    border-radius: 0.25rem;
    width: 300px;
    display: flex;
    flex-flow: column nowrap;
    justify-content: space-between;
    padding: 1rem;
    background-color: var(--main-med-light-color);
    box-shadow: 2px 2px 6px var(--main-dark-color);
}
/* card title */
.title {
    font-size: 1.85rem;
    color: var(--main-med-dark-color);
    height: 150px;
    width: 100%;
    margin-top: .5rem;
    padding: 1rem;
}
/* author */
.author {
    margin: 0.5rem;
    font-style: italic;
}
/* portion of article */
.snippet {
    margin: 0.5rem;
}
/* read more button */
.read-more {
    width: 10rem;
    align-self: center;
    background-color: var(--main-dark-color);
    color: var(--main-light-color);
    border: none;
    padding: 0.5rem;
}
/* read more button on hover */
.read-more:hover {
    background-color: var(--main-med-dark-color);
}
/* read more button on focus */
.read-more:focus {
    outline: dashed 3px var(--main-med-dark-color);
}

Example

Using CSS to Style HTML
Mary Shelley
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Exercitationem aspernatur, vero molestiae quas fugiat nam dolor doloremque architecto, reiciendis tempore assumenda.
Learning JavaScript
H. P. Lovecraft
Amet repudiandae facere obcaecati doloribus dolorem quam adipisci beatae maiores quas, voluptate corrupti autem exercitationem ipsam dolor repellendus at, deleniti sed cumque?
My Favorite HTML Elements
Edgar Allan Poe
Possimus cupiditate enim illo commodi ipsam, ab, aperiam sapiente tenetur, assumenda pariatur esse? Officia, minima? Nostrum perferendis amet laborum dicta quaerat.
All the CSS Things
e. e. cummings
Sit quas dolor perspiciatis nihil enim tempore veniam rerum repellendus possimus fugit aspernatur assumenda ducimus, accusamus ex beatae iusto quam suscipit odit.