City of Tampa Style Guide

Card 2.4

A generic card component that has a border and dropshadow and can contain other elements such as images titles. The .card-deck is used to make all the cards in the row equal in height.

When to use: When you really want to highlight something like a new initiative or program.

When not to: When you have alot of content simpler buttons take up less space are less cognitive load on visitors to process.

Notes: Cards take up alot of realestate so you won't be able to use more than a few.

<insert-markup>components.card-</insert-markup>

Featured

Mayor Announces Bridges to Business Vendor Certification

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

Card title

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

Go somewhere

<div class="card-deck">
    <div class="card">
        <img src="https://picsum.photos/430/200" class="card-img-top" alt="...">
        <div class="card-header">
            Featured
        </div>
        <div class="card-body">
            <h2 class="card-title">Mayor Announces Bridges to Business Vendor Certification</h2>
            <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>
        </div>
        <div class="card-footer">
            <a href="#" class="card-link">Register Your Business</a>
        </div>
    </div>
    <div class="card">
        <img src="https://picsum.photos/431/200" class="card-img-top" alt="...">
        <div class="card-body">
            <h2 class="card-title">Card title</h2>
            <p class="card-text">This is the button version. Some quick example text to build on the card title and make up the bulk of the card's content.</p>
        </div>
        <div class="card-footer">
            <a href="#" class="btn btn-primary d-block">Go somewhere</a>
        </div>
    </div>
</div>

Source: src/scss/base/_card.scss, line 1