Card

The Card component provides flexible, reusable containers for content like images, text, and links.

Cards are versatile UI elements that help organize information in a visually appealing, scannable format. They’re perfect for displaying resources, news items, staff profiles, programs, and any content that benefits from a contained, structured presentation.

Key Features

Multiple Card Styles

Image, Icon, Horizontal, Featured, Simple, and Button CTA variants to match any content need.

Responsive Grid Layouts

Automatically adapts from multiple columns to a single column on mobile using CSS Grid auto-fit.

Accessible Markup

Semantic <article> elements with proper ARIA labels, alt text requirements, and keyboard navigation.

No Dependencies

Pure HTML and inline CSS — no JavaScript required. Paste directly into the Edlio CMS WYSIWYG editor.

Card Types

Usage Guide

Card Type	Best Used For	Key Features
Image Card	General content, news, programs, resources	Standard layout with image on top
Icon Card	Services, features, categories	Centered design with circular icon background
Horizontal Card	Staff profiles, news items, detailed content	Side-by-side image and text layout
Featured Card	Important announcements, highlighted programs	Navy gradient header with optional gold badge
Simple Card	Quick links, text-heavy content, lists	No image, minimal styling with border
Button Card	Call-to-action focused content	Includes a prominent button for a clear next step

Copy-Paste Code

Select any snippet below and paste it directly into the Edlio CMS WYSIWYG editor.

<!-- IMAGE CARD (Default Style) -->
<article style="background: #fff; border-radius: 8px; box-shadow: 1px 2px 4px 1px rgba(0,0,0,0.25); padding: 15px; display: flex; flex-direction: column; transition: transform 0.2s, box-shadow 0.2s; max-width: 100%;">
    <a href="https://www.example.com" target="_blank" rel="noopener noreferrer" style="text-decoration: none; color: inherit; width: 100%; aspect-ratio: 4/3; display: block; overflow: hidden; border-radius: 4px;" aria-label="View details for Card Title">
        <img src="/path/to/image.jpg" alt="Descriptive image alt text" style="width: 100%; height: 100%; object-fit: cover; border-radius: 4px; transition: transform 0.3s;">
    </a>
    <div style="padding: 15px 0;">
        <h3 style="margin: 0 0 8px 0; color: #003366; font-size: 18px; font-weight: 600; line-height: 1.3;">Card Title</h3>
        <p style="margin: 0; color: #333; line-height: 1.5; font-size: 14px;">This is a description for the card. Replace this text with your own content.</p>
    </div>
</article>

<!-- ICON CARD (With Icon Instead of Image) -->
<article style="background: #fff; border-radius: 8px; box-shadow: 1px 2px 4px 1px rgba(0,0,0,0.25); padding: 20px; display: flex; flex-direction: column; align-items: center; text-align: center; transition: transform 0.2s, box-shadow 0.2s; max-width: 100%;">
    <a href="https://www.example.com" target="_blank" rel="noopener noreferrer" style="text-decoration: none; color: inherit; display: flex; flex-direction: column; align-items: center; width: 100%;" aria-label="View details for Icon Card">
        <div style="background-color: #e8f7fc; border-radius: 50%; width: 80px; height: 80px; display: flex; align-items: center; justify-content: center; margin-bottom: 16px;">
            <svg width="40" height="40" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
                <path d="M12 2L2 7L12 12L22 7L12 2Z" stroke="#003366" stroke-width="2" stroke-linejoin="round"/>
                <path d="M2 17L12 22L22 17" stroke="#003366" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
                <path d="M2 12L12 17L22 12" stroke="#003366" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
            </svg>
        </div>
        <h3 style="margin: 0 0 8px 0; color: #003366; font-size: 18px; font-weight: 600; line-height: 1.3;">Icon Card Title</h3>
        <p style="margin: 0; color: #333; line-height: 1.5; font-size: 14px;">Use this card style for services, features, or categories that work better with icons.</p>
    </a>
</article>

<!-- HORIZONTAL CARD (Image and Text Side by Side) -->
<article style="background: #fff; border-radius: 8px; box-shadow: 1px 2px 4px 1px rgba(0,0,0,0.25); padding: 15px; display: flex; flex-direction: row; align-items: center; gap: 20px; transition: transform 0.2s, box-shadow 0.2s; flex-wrap: wrap; max-width: 100%;">
    <a href="https://www.example.com" target="_blank" rel="noopener noreferrer" style="text-decoration: none; color: inherit; flex: 0 0 200px; aspect-ratio: 4/3; display: block; overflow: hidden; border-radius: 4px; min-width: 150px;" aria-label="View details for Horizontal Card">
        <img src="/path/to/image.jpg" alt="Descriptive image alt text" style="width: 100%; height: 100%; object-fit: cover; border-radius: 4px;">
    </a>
    <div style="flex: 1; min-width: 200px;">
        <h3 style="margin: 0 0 8px 0; color: #003366; font-size: 18px; font-weight: 600; line-height: 1.3;">Horizontal Card Title</h3>
        <p style="margin: 0; color: #333; line-height: 1.5; font-size: 14px;">This horizontal layout is great for news items, staff profiles, or content that needs more horizontal space.</p>
    </div>
</article>

<!-- FEATURED CARD (Navy Header with Gold Accent) -->
<article style="background: #fff; border-radius: 8px; box-shadow: 1px 2px 4px 1px rgba(0,0,0,0.25); overflow: hidden; display: flex; flex-direction: column; transition: transform 0.2s, box-shadow 0.2s; max-width: 100%;">
    <div style="background: linear-gradient(135deg, #003366 0%, #3a57a8 100%); padding: 20px; position: relative;">
        <div style="position: absolute; top: 10px; right: 10px; background-color: #f0ad4e; color: #fff; padding: 4px 12px; border-radius: 12px; font-size: 12px; font-weight: 600;">Featured</div>
        <h3 style="margin: 0; color: #fff; font-size: 20px; font-weight: 600; line-height: 1.3;">Featured Card Title</h3>
    </div>
    <a href="https://www.example.com" target="_blank" rel="noopener noreferrer" style="text-decoration: none; color: inherit; width: 100%; aspect-ratio: 16/9; display: block; overflow: hidden;" aria-label="View details for Featured Card">
        <img src="/path/to/image.jpg" alt="Descriptive image alt text" style="width: 100%; height: 100%; object-fit: cover;">
    </a>
    <div style="padding: 20px;">
        <p style="margin: 0; color: #333; line-height: 1.5; font-size: 14px;">Use this style for important announcements, highlighted programs, or special district initiatives.</p>
    </div>
</article>

<!-- SIMPLE CARD (No Image, Text Only) -->
<article style="background: #fff; border: 2px solid #dce0ef; border-radius: 8px; padding: 20px; display: flex; flex-direction: column; transition: transform 0.2s, border-color 0.2s; max-width: 100%;">
    <a href="https://www.example.com" target="_blank" rel="noopener noreferrer" style="text-decoration: none; color: inherit; width: 100%;" aria-label="View details for Simple Card">
        <h3 style="margin: 0 0 12px 0; color: #003366; font-size: 18px; font-weight: 600; line-height: 1.3; border-bottom: 2px solid #54c8eb; padding-bottom: 8px;">Simple Card Title</h3>
        <p style="margin: 0; color: #333; line-height: 1.5; font-size: 14px;">A minimal card design without images, perfect for quick links, resource lists, or text-heavy content.</p>
    </a>
</article>

<!-- CARD WITH BUTTON CTA -->
<article style="background: #fff; border-radius: 8px; box-shadow: 1px 2px 4px 1px rgba(0,0,0,0.25); padding: 0; display: flex; flex-direction: column; overflow: hidden; transition: transform 0.2s, box-shadow 0.2s; max-width: 100%;">
    <div style="width: 100%; aspect-ratio: 4/3; display: block; overflow: hidden;">
        <img src="/path/to/image.jpg" alt="Descriptive image alt text" style="width: 100%; height: 100%; object-fit: cover;">
    </div>
    <div style="padding: 20px;">
        <h3 style="margin: 0 0 8px 0; color: #003366; font-size: 18px; font-weight: 600; line-height: 1.3;">Card with Button</h3>
        <p style="margin: 0 0 16px 0; color: #333; line-height: 1.5; font-size: 14px;">This card includes a call-to-action button for clearer interaction prompts.</p>
        <a href="https://www.example.com" target="_blank" rel="noopener noreferrer" style="display: inline-block; background-color: #3a57a8; color: #fff; padding: 10px 20px; border-radius: 4px; text-decoration: none; font-size: 14px; font-weight: 600; transition: background-color 0.3s;" aria-label="Learn more about Card with Button">Learn More</a>
    </div>
</article>

<!-- GRID LAYOUT EXAMPLE (3-Column Responsive Grid) -->
<div style="display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 20px; margin: 20px 0; width: 100%;">

    <!-- Grid Card 1 -->
    <article style="background: #fff; border-radius: 8px; box-shadow: 1px 2px 4px 1px rgba(0,0,0,0.25); padding: 15px; display: flex; flex-direction: column; transition: transform 0.2s, box-shadow 0.2s;">
        <a href="https://www.example.com" target="_blank" rel="noopener noreferrer" style="text-decoration: none; color: inherit; width: 100%; aspect-ratio: 4/3; display: block; overflow: hidden; border-radius: 4px;" aria-label="View details for Grid Card 1">
            <img src="/path/to/image-1.jpg" alt="Grid Card 1" style="width: 100%; height: 100%; object-fit: cover; border-radius: 4px;">
        </a>
        <div style="padding: 15px 0;">
            <h3 style="margin: 0 0 8px 0; color: #003366; font-size: 18px; font-weight: 600; line-height: 1.3;">Grid Card 1</h3>
            <p style="margin: 0; color: #333; line-height: 1.5; font-size: 14px;">First card in a responsive grid layout.</p>
        </div>
    </article>

    <!-- Grid Card 2 -->
    <article style="background: #fff; border-radius: 8px; box-shadow: 1px 2px 4px 1px rgba(0,0,0,0.25); padding: 15px; display: flex; flex-direction: column; transition: transform 0.2s, box-shadow 0.2s;">
        <a href="https://www.example.com" target="_blank" rel="noopener noreferrer" style="text-decoration: none; color: inherit; width: 100%; aspect-ratio: 4/3; display: block; overflow: hidden; border-radius: 4px;" aria-label="View details for Grid Card 2">
            <img src="/path/to/image-2.jpg" alt="Grid Card 2" style="width: 100%; height: 100%; object-fit: cover; border-radius: 4px;">
        </a>
        <div style="padding: 15px 0;">
            <h3 style="margin: 0 0 8px 0; color: #003366; font-size: 18px; font-weight: 600; line-height: 1.3;">Grid Card 2</h3>
            <p style="margin: 0; color: #333; line-height: 1.5; font-size: 14px;">Second card in a responsive grid layout.</p>
        </div>
    </article>

    <!-- Grid Card 3 -->
    <article style="background: #fff; border-radius: 8px; box-shadow: 1px 2px 4px 1px rgba(0,0,0,0.25); padding: 15px; display: flex; flex-direction: column; transition: transform 0.2s, box-shadow 0.2s;">
        <a href="https://www.example.com" target="_blank" rel="noopener noreferrer" style="text-decoration: none; color: inherit; width: 100%; aspect-ratio: 4/3; display: block; overflow: hidden; border-radius: 4px;" aria-label="View details for Grid Card 3">
            <img src="/path/to/image-3.jpg" alt="Grid Card 3" style="width: 100%; height: 100%; object-fit: cover; border-radius: 4px;">
        </a>
        <div style="padding: 15px 0;">
            <h3 style="margin: 0 0 8px 0; color: #003366; font-size: 18px; font-weight: 600; line-height: 1.3;">Grid Card 3</h3>
            <p style="margin: 0; color: #333; line-height: 1.5; font-size: 14px;">Third card in a responsive grid layout.</p>
        </div>
    </article>

    <!-- Add more cards as needed -->
</div>

PUSD Brand Colors Used

Color Name	HEX	Used For
PUSD Navy	`#003366`	Card titles, icon strokes, featured header gradient start
PUSD Light Blue	`#54c8eb`	Icon background, simple card underline accent
PUSD Gold	`#f0ad4e`	Featured card badge
PUSD Alt 3 (Deep Blue)	`#3a57a8`	Button CTA, featured header gradient end
PUSD Alt 1 (Light Gray-Blue)	`#dce0ef`	Simple card border
White	`#ffffff`	Card background
Dark Gray	`#333`	Body text

Customization Guide

Replace image URLs — Update the src attribute on <img> tags with your actual image path.
Update links — Change the href attribute on <a> tags to your target page URL.
Update ARIA labels — Edit the aria-label attribute text to match your actual card title for screen reader accuracy.
Modify titles — Edit the text inside <h3> tags.
Edit descriptions — Update the text inside <p> tags.
Adjust grid columns — Change minmax(280px, 1fr) to control the minimum card width. A larger value means fewer columns; a smaller value allows more.
Change aspect ratios — Modify aspect-ratio: 4/3 to 16/9 for widescreen images or 1/1 for square images.
Add or remove elements — Delete the <img> wrapper block to remove the image, or omit the button <a> tag on Button Cards to simplify.