UMBC Card Layouts

Basic Card Grid Container

Use this as your foundation for any card layout:

<div class="sights-section">
    <div class="sights-row sights-responsive">
        <!-- Cards go here -->
    </div>
</div>

1. Image-Top Cards with Equal Heights

Cards with image at top, text below, and button/link - now with equal heights and hover effects:

<div class="sights-section">
    <h2>Campus Highlights</h2>
    <div class="sights-row sights-card-gap sights-responsive">
        <div class="sights-col-4 sights-mb-3">
            <div class="sights-callout-box sights-p-0 sights-card-hover sights-equal-height">
                <img src="https://placehold.co/300x200/005155/ffffff?text=UMBC+Campus" alt="UMBC Campus"
                    style="width: 100%;height: 200px;object-fit: cover">
                <div class="sights-p-3" style="flex-grow: 1; display: flex; flex-direction: column;">
                    <h4>Campus Life</h4>
                    <p style="flex-grow: 1;">Experience the vibrant community and endless opportunities at UMBC.</p>
                    <div>
                        <a href="#" class="button">UMBC Campus Information</a>
                    </div>
                </div>
            </div>
        </div>
        <div class="sights-col-4 sights-mb-3">
            <div class="sights-callout-box sights-p-0 sights-card-hover sights-equal-height">
                <img src="https://placehold.co/300x200/fdb515/000000?text=Academics" alt="Academics"
                    style="width: 100%;height: 200px;object-fit: cover">
                <div class="sights-p-3" style="flex-grow: 1; display: flex; flex-direction: column;">
                    <h4>Academic Excellence</h4>
                    <p style="flex-grow: 1;">Discover our innovative programs and world-class faculty.</p>
                    <div>
                        <a href="#" class="button">Explore Programs</a>
                    </div>
                </div>
            </div>
        </div>
        <div class="sights-col-4 sights-mb-3">
            <div class="sights-callout-box sights-p-0 sights-card-hover sights-equal-height">
                <img src="https://placehold.co/300x200/333333/ffffff?text=Research" alt="Research"
                    style="width: 100%;height: 200px;object-fit: cover">
                <div class="sights-p-3" style="flex-grow: 1; display: flex; flex-direction: column;">
                    <h4>Research Opportunities</h4>
                    <p style="flex-grow: 1;">Join cutting-edge research projects with renowned faculty.</p>
                    <div>
                        <a href="#" class="button">Get Involved</a>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

2. UMBC Brand Color Block Cards

Gold Primary Cards (#fdb515) with Small Gap

<div class="sights-section">
    <h2>Quick Links</h2>
    <div class="sights-row sights-card-gap-sm sights-responsive">
        <div class="sights-col-4 sights-mb-3">
            <div class="sights-callout-box sights-p-4 sights-card-hover"
                style="background-color: #fdb515;color: black;min-height: auto;align-items: center;justify-content: center">
                <div style="text-align: center">
                    <h3 style="margin-bottom: 0.5rem;color: black">
                        <a href="#" style="color: black;text-decoration: none">Admissions</a>
                    </h3>
                    <p style="color: black">Start your journey</p>
                </div>
            </div>
        </div>
        <div class="sights-col-4 sights-mb-3">
            <div class="sights-callout-box sights-p-4 sights-card-hover"
                style="background-color: #fdb515;color: black;min-height: auto;align-items: center;justify-content: center">
                <div style="text-align: center">
                    <h3 style="margin-bottom: 0.5rem;color: black">
                        <a href="#" style="color: black;text-decoration: none">Student Life</a>
                    </h3>
                    <p style="color: black">Get involved</p>
                </div>
            </div>
        </div>
        <div class="sights-col-4 sights-mb-3">
            <div class="sights-callout-box sights-p-4 sights-card-hover"
                style="background-color: #fdb515;color: black;min-height: auto;align-items: center;justify-content: center">
                <div style="text-align: center">
                    <h3 style="margin-bottom: 0.5rem;color: black">
                        <a href="#" style="color: black;text-decoration: none">Alumni</a>
                    </h3>
                    <p style="color: black">Stay connected</p>
                </div>
            </div>
        </div>
    </div>
</div>

3. UMBC Brand Color Block Cards

Teal Alternative Cards (#005155) with No Gap

<div class="sights-section">
    <h2>Key Resources</h2>
    <div class="sights-row sights-responsive">
        <div class="sights-col-4 sights-mb-3">
            <div class="sights-callout-box sights-p-4 sights-card-hover"
                style="background-color: #005155;color: white;min-height: auto;align-items: center;justify-content: center">
                <div style="text-align: center">
                    <h3 style="margin-bottom: 0.5rem;color: white">
                        <a href="#" style="color: white;text-decoration: none">Research</a>
                    </h3>
                    <p style="color: white">Discover innovation</p>
                </div>
            </div>
        </div>
        <div class="sights-col-4 sights-mb-3">
            <div class="sights-callout-box sights-p-4 sights-card-hover"
                style="background-color: #005155;color: white;min-height: auto;align-items: center;justify-content: center">
                <div style="text-align: center">
                    <h3 style="margin-bottom: 0.5rem;color: white">
                        <a href="#" style="color: white;text-decoration: none">Faculty</a>
                    </h3>
                    <p style="color: white">Meet our experts</p>
                </div>
            </div>
        </div>
        <div class="sights-col-4 sights-mb-3">
            <div class="sights-callout-box sights-p-4 sights-card-hover"
                style="background-color: #005155;color: white;min-height: auto;align-items: center;justify-content: center">
                <div style="text-align: center">
                    <h3 style="margin-bottom: 0.5rem;color: white">
                        <a href="#" style="color: white;text-decoration: none">Partnership</a>
                    </h3>
                    <p style="color: white">Collaborate with us</p>
                </div>
            </div>
        </div>
    </div>
</div>

4. Simple Text Cards with Equal Heights

Clean text-only cards with regular gap and equal heights:

<div class="sights-section">
    <h2>Student Services</h2>
    <div class="sights-row sights-card-gap sights-responsive">
        <div class="sights-col-4 sights-mb-3">
            <div class="sights-callout-box sights-p-4 sights-card-hover sights-equal-height">
                <h3>Academic Support</h3>
                <p>Our comprehensive academic support services help students succeed. From tutoring to writing centers, we provide the resources you need.</p>
                <div style="margin-top: auto">
                    <a href="#">Academic Support Information</a>
                </div>
            </div>
        </div>
        <div class="sights-col-4 sights-mb-3">
            <div class="sights-callout-box sights-p-4 sights-card-hover sights-equal-height">
                <h3>Career Services</h3>
                <p>Prepare for your future with our career development programs, internship opportunities, and job placement assistance.</p>
                <div style="margin-top: auto">
                    <a href="#">Get Started</a>
                </div>
            </div>
        </div>
        <div class="sights-col-4 sights-mb-3">
            <div class="sights-callout-box sights-p-4 sights-card-hover sights-equal-height">
                <h3>Health & Wellness</h3>
                <p>Maintain your physical and mental well-being with our health services, counseling, and recreational facilities.</p>
                <div style="margin-top: auto">
                    <a href="#">Explore Services</a>
                </div>
            </div>
        </div>
    </div>
</div>

5. Icon + Text Cards with Font Awesome

Cards with small gap and Font Awesome icons:

<div class="sights-section">
    <h2>University Life</h2>
    <div class="sights-row sights-card-gap-sm sights-responsive">
        <div class="sights-col-4 sights-mb-3">
            <div class="sights-callout-box sights-p-4 sights-card-hover" style="text-align: center">
                <div style="margin-bottom: 1rem"><i class="fa-duotone fa-regular fa-books fa-2x"></i></div>
                <h3>Academics</h3>
                <p>Explore our academic programs and opportunities for intellectual growth.</p>
                <a href="#">Explore Academics</a>
            </div>
        </div>
        <div class="sights-col-4 sights-mb-3">
            <div class="sights-callout-box sights-p-4 sights-card-hover" style="text-align: center">
                <div style="margin-bottom: 1rem"><i class="fa-duotone fa-regular fa-graduation-cap fa-2x"></i></div>
                <h3>Athletics</h3>
                <p>Join the Retrievers and compete at the highest collegiate level.</p>
                <a href="#">Join Team</a>
            </div>
        </div>
        <div class="sights-col-4 sights-mb-3">
            <div class="sights-callout-box sights-p-4 sights-card-hover" style="text-align: center">
                <div style="margin-bottom: 1rem"><i class="fa-duotone fa-regular fa-scroll fa-2x"></i></div>
                <h3>Arts</h3>
                <p>Express yourself through our vibrant arts and culture programs.</p>
                <a href="#">Get Creative</a>
            </div>
        </div>
    </div>
</div>

6. Quote/Testimonial Cards

For showcasing quotes with proper styling and equal heights:

<div class="sights-section">
    <h2>Student Testimonials</h2>
    <div class="sights-row sights-card-gap sights-responsive">
        <div class="sights-col-4 sights-mb-3">
            <div class="sights-callout-box sights-bg-gray-1 sights-p-4 sights-card-hover sights-equal-height">
                <blockquote style="font-style: italic;margin-bottom: 1rem">
                    "UMBC provided me with incredible research opportunities that launched my career in biotechnology."
                </blockquote>
                <cite>- Sarah Chen, Class of 2023</cite>
            </div>
        </div>
        <div class="sights-col-4 sights-mb-3">
            <div class="sights-callout-box sights-bg-gray-1 sights-p-4 sights-card-hover sights-equal-height">
                <blockquote style="font-style: italic;margin-bottom: 1rem">
                    "The supportive community and innovative programs at UMBC shaped me into the engineer I am today."
                </blockquote>
                <cite>- Marcus Johnson, Class of 2022</cite>
            </div>
        </div>
        <div class="sights-col-4 sights-mb-3">
            <div class="sights-callout-box sights-bg-gray-1 sights-p-4 sights-card-hover sights-equal-height">
                <blockquote style="font-style: italic;margin-bottom: 1rem">
                    "UMBC's interdisciplinary approach opened doors I never knew existed in my field."
                </blockquote>
                <cite>- Dr. Lisa Rodriguez, Faculty</cite>
            </div>
        </div>
    </div>
</div>

7. Stat/Number Cards

For highlighting statistics with the new sights-stat class:

<div class="sights-section">
    <h2>UMBC By The Numbers</h2>
    <div class="sights-row sights-card-gap-sm sights-responsive">
        <div class="sights-col-4 sights-mb-3">
            <div class="sights-callout-box sights-p-4 sights-card-hover sights-equal-height" style="text-align: center">
                <div class="sights-stat">95%</div>
                <h4 style="margin-bottom: 1rem">Job Placement Rate</h4>
                <p style="margin-bottom: 0">Graduates find employment within 6 months of graduation.</p>
            </div>
        </div>
        <div class="sights-col-4 sights-mb-3">
            <div class="sights-callout-box sights-p-4 sights-card-hover sights-equal-height" style="text-align: center">
                <div class="sights-stat">14,000+</div>
                <h4 style="margin-bottom: 1rem">Students</h4>
                <p style="margin-bottom: 0">Diverse student body representing all 50 states and 60+ countries.</p>
            </div>
        </div>
        <div class="sights-col-4 sights-mb-3">
            <div class="sights-callout-box sights-p-4 sights-card-hover sights-equal-height" style="text-align: center">
                <div class="sights-stat">$1.2B</div>
                <h4 style="margin-bottom: 1rem">Research Volume</h4>
                <p style="margin-bottom: 0">Annual research expenditures supporting groundbreaking discoveries.</p>
            </div>
        </div>
    </div>
</div>

Responsive Grid Layout Options

2-Column Layout

<div class="sights-section">
    <h2>Program Types</h2>
    <div class="sights-row sights-card-gap sights-responsive">
        <div class="sights-col-6 sights-mb-3">
            <div class="sights-callout-box sights-p-4 sights-card-hover sights-equal-height">
                <h4>Undergraduate Programs</h4>
                <p>Choose from over 50 undergraduate majors across arts, sciences, engineering, and more.</p>
                <a href="#" class="button">Browse Undergraduate Programs</a>
            </div>
        </div>
        <div class="sights-col-6 sights-mb-3">
            <div class="sights-callout-box sights-p-4 sights-card-hover sights-equal-height">
                <h4>Graduate Programs</h4>
                <p>Advance your career with our innovative graduate and doctoral programs.</p>
                <a href="#" class="button">Browse Graduate Programs</a>
            </div>
        </div>
    </div>
</div>

4-Column Layout

<div class="sights-section">
    <h2>Student Resources</h2>
    <div class="sights-row sights-card-gap-sm sights-responsive">
        <div class="sights-col-3 sights-mb-3">
            <div class="sights-callout-box sights-p-3 sights-card-hover" style="text-align: center">
                <h5>Admissions</h5>
                <p>Apply today</p>
            </div>
        </div>
        <div class="sights-col-3 sights-mb-3">
            <div class="sights-callout-box sights-p-3 sights-card-hover" style="text-align: center">
                <h5>Financial Aid</h5>
                <p>Get support</p>
            </div>
        </div>
        <div class="sights-col-3 sights-mb-3">
            <div class="sights-callout-box sights-p-3 sights-card-hover" style="text-align: center">
                <h5>Housing</h5>
                <p>Find your home</p>
            </div>
        </div>
        <div class="sights-col-3 sights-mb-3">
            <div class="sights-callout-box sights-p-3 sights-card-hover" style="text-align: center">
                <h5>Dining</h5>
                <p>Fuel your day</p>
            </div>
        </div>
    </div>
</div>

Mixed Content Layout Example

Combining different card types in one section:

<div class="sights-section">
    <h2>Featured Content</h2>
    <div class="sights-row sights-card-gap sights-responsive">
        <div class="sights-col-6">
            <div class="sights-callout-box sights-p-0 sights-card-hover sights-equal-height">
                <img style="width: 100%; height: 250px; object-fit: cover;"
                    src="https://placehold.co/400x250/005155/ffffff?text=Featured+Story" alt="Featured Story" />
                <div class="sights-p-4" style="flex-grow: 1; flex-direction: column;">
                    <h3>Featured: Breakthrough Research</h3>
                    <p style="flex-grow: 1;">UMBC researchers make groundbreaking discovery in renewable energy technology.</p>
                    <div><a class="button" href="#">Read Full Story</a></div>
                </div>
            </div>
        </div>
        <div class="sights-col-6">
            <div class="sights-callout-box sights-p-0 sights-card-hover sights-equal-height">
                <div class="sights-row">
                    <div class="sights-col-12">
                        <div class="sights-callout-box sights-p-3 sights-card-hover sights-equal-height"
                            style="text-align: center;">
                            <h5 style="margin-bottom: 0.5rem;">Events</h5>
                            <div style="margin-top: auto;"><a href="#">View Calendar</a></div>
                        </div>
                    </div>
                    <div class="sights-col-12">
                        <div class="sights-callout-box sights-p-3 sights-card-hover"
                            style="background-color: #fdb515; color: black;">
                            <h4 style="margin-bottom: 0.5rem; color: black;">Quick Links</h4>
                            <p style="margin-bottom: 0; color: black;">Access important resources and services</p>
                            <ul>
                                <li>Student Portal</li>
                                <li>Course Catalog</li>
                                <li>Library Resources</li>
                                <li>Campus Map</li>
                            </ul>
                        </div>
                    </div>
                    <div class="sights-col-12">
                        <div class="sights-callout-box sights-p-3 sights-card-hover sights-equal-height"
                            style="text-align: center;">
                            <h5 style="margin-bottom: 0.5rem;">News</h5>
                            <div style="margin-top: auto;"><a href="#">Latest Updates</a></div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

Key Implementation Features

New Enhanced Features:

sights-section wrapper for consistent styling and spacing
sights-card-hover class for smooth hover animations
sights-equal-height class ensures consistent card heights
sights-card-gap and sights-card-gap-sm for consistent spacing between cards
sights-bg-gradient-overlay for improved background image readability
sights-stat class for large, styled numbers in statistics cards
Enhanced button styling with hover effects

Spacing Options:

sights-card-gap: Regular spacing (10px padding, 20px margin)
sights-card-gap-sm: Tight spacing (8px padding, 16px margin)
No gap class: Cards touch each other

Accessibility Features:

Proper color contrast ratios maintained
Alt text required for all images
Semantic HTML structure
Text shadows for readability over background images

Brand Colors:

Gold Primary: #fdb515 (with black text)
Teal Alternative: #005155 (with white text)

All cards are fully responsive and will stack on mobile devices while maintaining their desktop layout on larger screens.