Cards

Description

Cards are used to provide a snapshot or summary of information that lives on another page within the website. They serve as large buttons when the entire card is linked with a stretched-link.

Usage

Cards should be used when you want the user to see what other pages have available and you want to help them see these options. Typically, this includes sub-pages outside of the main menu but can include the main menu pages when on the home page. You should use cards when you want to direct users to another page but need to provide more information than what can be contained within a button. In the case of colors, different color cards can be used for stylistic purposes.

Accessibility

As with the buttons, make sure to label the links (the ones that are stretched to contain the whole card) in a way that makes it clear what action they trigger, or specifically here the information they will lead the user to find out more about. Also, if images are added to the cards, add decriptive alt values.

Examples

Primary Card

primary-dark-blue for card sub-title and card border

Secondary Card

secondary-dark-red for card sub-title and card border

Tertiary Card

tertiary-dark-yellow for card sub-title and card border

Primary Card - Hover

primary-light-blue for hover background

Secondary Card - Hover

secondary-light-red for hover background

Tertiary Card - Hover

tertiary-light-yellow for hover background

Code

Example primary card:


       
    <div class="card bor-blue back-light-blue-hover shadow-sm">
        <img class="card-img-top img-fluid" src="images/img-placeholder.png" alt="placeholder image">
        <div class="card-body">
            <h3 class="card-title"><a class="stretched-link" href="#">Lorem Ipsum</a></h3>
            <h4 class="card-subtitle mb-2 txt-blue">Sigma Phi</h4>
            <p class="card-text">Voluptatum deleniti atque corrupti quos dolores et quas molestias excepturi</p>
        </div>
    </div>