Cards

There are two types of cards, Feature and Additional. The differences between these two cards are described below.

Feature Project Cards

The feature project card is used to highlight recent, or important work. These cards utilize the primary button component and a larger heading compared to the other cards. The layout is responsive. Resize the browser window to test responsive behaviors.

placeholder image

Type

Project A

Some quick example text to build on the card title and make up the bulk of the card's content.

Additional Project Cards

Additional Project Cards should be used for every project besides the Feature. The card size is consistent across devices, and the arrangement of the cards responds to screensize. At web-browser size, three cards align in a row. As the screen reaches tablet and mobile, the cards align vertically. Resize the browser window to view this behavior.

Type

Card image cap

Project B

Some quick example text to build on the card title and make up the bulk of the card's content.

Type

Card image cap

Project C

Some quick example text to build on the card title and make up the bulk of the card's content.

Type

Card image cap

Project D

Some quick example text to build on the card title and make up the bulk of the card's content.

Usage

  • Use Feature cards for latest or most important project
  • Additional cards can be used for additional projects

Accessibility

Descriptive alt text will be used for all images within cards. The type in the cards will remain consistently sized across all devices to maximize legibility.

Code Snippets

Feature Card

          

             <div class="row">
               <div class="col-12">
               <div class="lg_feature float-right">
                <div class="row">
                 <div class="col-sm-12 col-md-12 col-lg-6">
                    <img class="card-image-left d-block w-100 large_card" src="../img/placeholder_large.png" alt="placeholder image">
                     </div>
                    <div class="col-sm-12 col-md-12 col-lg-6">
                     <div class="card-block">
                 <p class="typetext">Type </p>
               <div class="card-body">
                 <h3 class="card-title"Project A </h3>
                 <p class="card-text">
                 Some quick example text to build on the card title and make up the bulk of the card's content. </p>
                  <button type="button" class="btn btn-primary">button </button>
                </div>
               </div>
             </div>
           </div>
         </div>
       </div>

Additional Cards

          
    <div class="add card">
                <p class="typetext">Type</p>
              <img class="card-img-top" src="../img/placeholder.png" alt="Card image cap">
              <div class="card-body">
                <h4 class="card-title">Project B</h4>
                <p class="card-text">
                Some quick example text to build on the card title and make up the bulk of the card's content.</p>
                <button type="button" class="btn btn-secondary">button</button>
              </div>
           </div>