Skip to content
PUSD Digital Communications

Card

Standard User

Available to anyone with page-editing access

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

Section titled “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

Section titled “Card Types”

Usage Guide

Section titled “Usage Guide”
Card TypeBest Used ForKey Features
Image CardGeneral content, news, programs, resourcesStandard layout with image on top
Icon CardServices, features, categoriesCentered design with circular icon background
Horizontal CardStaff profiles, news items, detailed contentSide-by-side image and text layout
Featured CardImportant announcements, highlighted programsNavy gradient header with optional gold badge
Simple CardQuick links, text-heavy content, listsNo image, minimal styling with border
Button CardCall-to-action focused contentIncludes a prominent button for a clear next step

Copy-Paste Code

Section titled “Copy-Paste Code”

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

Preview
Sample card image

Card Title

This is a description for the card. Replace this text with your own content.

<!-- 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>

PUSD Brand Colors Used

Section titled “PUSD Brand Colors Used”
Color NameHEXUsed For
PUSD Navy#003366Card titles, icon strokes, featured header gradient start
PUSD Light Blue#54c8ebIcon background, simple card underline accent
PUSD Gold#f0ad4eFeatured card badge
PUSD Alt 3 (Deep Blue)#3a57a8Button CTA, featured header gradient end
PUSD Alt 1 (Light Gray-Blue)#dce0efSimple card border
White#ffffffCard background
Dark Gray#333Body text

Customization Guide

Section titled “Customization Guide”

  1. Replace image URLs — Update the src attribute on <img> tags with your actual image path.

  2. Update links — Change the href attribute on <a> tags to your target page URL.

  3. Update ARIA labels — Edit the aria-label attribute text to match your actual card title for screen reader accuracy.

  4. Modify titles — Edit the text inside <h3> tags.

  5. Edit descriptions — Update the text inside <p> tags.

  6. Adjust grid columns — Change minmax(280px, 1fr) to control the minimum card width. A larger value means fewer columns; a smaller value allows more.

  7. Change aspect ratios — Modify aspect-ratio: 4/3 to 16/9 for widescreen images or 1/1 for square images.

  8. Add or remove elements — Delete the <img> wrapper block to remove the image, or omit the button <a> tag on Button Cards to simplify.

Accessibility

Section titled “Accessibility”

Best Practices

Section titled “Best Practices”