Skip to Main Content
Dallas College PEGASUS
Updated: Jan. 21, 2024
Skip to Main Content

Flexbox Cards – Components

Cards can be used individually within the grid or can be utilized in rows with .card-group.

They are designed to display an image, title, text and a link while maintaining an equal height across the row.

Single Card

This is a single card wrapped in 4 columns.

Financial Aid Step by Step

Browse online job listings for full- and part-time job opportunities in the Dallas metroplex, or post your resumé and let employers find you. Specialized sites also are available for health care students and internship seekers.

Link 
<div class="card">
    <img class="card-img-top img-responsive" src="https://via.placeholder.com/575x250" alt="">
    <div class="card-block">
        <span class="card-title"><a href="#">Financial Aid Step by Step</a></span>
        <p class="card-text">Browse online job listings for full- and part-time job opportunities in the Dallas metroplex, or post your resumé and let employers find you. Specialized sites also are available for health care students and internship seekers.</p>
        <span class="link"><a href="#" class="button bg-cprimary button-mn">Link</a></span>
    </div>
</div>

Card Group

Wrapping cards in a .card-group groups the cards in a row with equal heights, no matter what content is included in each card.

In theory you can add as many cards to a group as you'd like but in the Dallas College site, no more than four or five cards are recommended in each group or row.

Financial Aid Step by Step

Browse online job listings for full- and part-time job opportunities in the Dallas metroplex, or post your resumé and let employers find you. Specialized sites also are available for health care students and internship seekers.

Link

Financial Aid Step by Step

Career services include individual career counseling, career assessment, computerized career guidance programs, resume assistance and mock interviewing. Browse online job listings for full- and part-time job opportunities in the Dallas metroplex, or post your resumé and let employers find you. Specialized sites also are available for health care students and internship seekers.

Don't Use Learn More

Financial Aid Step by Step

The campuses of Dallas College offer numerous career fairs and on-campus recruiting events.

Read the Step by Step

Notice how you can change the card with a number of variables, including applying a light color with .cprimary-lt, adding a button for your bottom link using button bg-cprimary button-mn, applying shadows with .shadow-1, .shadow-2 or .shadow-3.

<div class="card-group">

    <div class="card shadow-1">
        <img class="card-img-top img-responsive" src="https://via.placeholder.com/575x250" alt="">
        <div class="card-block">
            <span class="card-title"><a href="#">Financial Aid Step by Step</a></span>
            <p class="card-text">Browse online job listings ...  and internship seekers.</p>
            <span class="link"><a href="#" class="button bg-cprimary button-mn">Link</a></span>
        </div>
    </div>

    <div class="card cprimary-lt shadow-1">
        <img class="card-img-top img-responsive" src="https://via.placeholder.com/575x250" alt="">
        <div class="card-block">
            <h2 class="card-title"><a href="#">Financial Aid Step by Step</a></h2>
            <p class="card-text">Career services... </p>
            <span class="link"><a href="#" class="button bg-cprimary button-mn">Don't Use Learn More</a></span>
        </div>
    </div>

    <div class="card bg-cprimary shadow-1">
        <img class="card-img-top img-responsive" src="https://via.placeholder.com/575x250" alt="">
        <div class="card-block">
            <h3 class="card-title">Financial Aid Step by Step</h3>
            <p class="card-text">The campuses of Dallas College offer numerous career fairs and on-campus recruiting events.</p>
            <span class="link"><a href="#">Read the Step by Step <span aria-hidden="true"  class="ico fab fa-youtube"></span> </a></span>
        </div>
    </div>

</div>

Patterns