Skip to content
PUSD Digital Communications

Card

Standard User

Available to anyone with page-editing access

Content card components using Morning Creek brand colors. Copy any snippet below and paste it directly into the Edlio CMS WYSIWYG editor.

Simple Card

Section titled “Simple Card”
Preview

Card Title

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

Learn More
<!-- SIMPLE CARD (MORNING CREEK) -->
<article style="background: #fff; border-radius: 8px; box-shadow: 1px 2px 4px 1px rgba(0,0,0,0.15); padding: 20px; display: flex; flex-direction: column; max-width: 320px; border-top: 4px solid #63B1DC;">
    <h3 style="margin: 0 0 8px 0; color: #63B1DC; font-size: 18px; font-weight: 600; line-height: 1.3;">Card Title</h3>
    <p style="margin: 0 0 16px 0; color: #333; line-height: 1.5; font-size: 14px; flex: 1;">This is a description for the card. Replace this text with your own content.</p>
    <a href="#" style="display: inline-block; background-color: #63B1DC; color: #1a1a1a; padding: 10px 18px; text-decoration: none; border-radius: 4px; font-size: 14px; font-weight: 600; text-align: center; border: 2px solid #63B1DC; cursor: pointer; align-self: flex-start;">Learn More</a>
</article>
Section titled “Featured Card”
Preview
Featured

Featured Card Title

Highlight important resources or programs with this featured card style.

Get Started
<!-- FEATURED CARD (MORNING CREEK) -->
<article style="background: #fff; border-radius: 8px; box-shadow: 1px 2px 4px 1px rgba(0,0,0,0.2); overflow: hidden; display: flex; flex-direction: column; max-width: 320px;">
    <div style="background: linear-gradient(135deg, #63B1DC 0%, #DEB407 100%); padding: 20px;">
        <span style="display: inline-block; background-color: #231F20; color: #ffffff; padding: 3px 10px; border-radius: 4px; font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.5px; margin-bottom: 10px;">Featured</span>
        <h3 style="margin: 0; color: #ffffff; font-size: 18px; font-weight: 700; line-height: 1.3;">Featured Card Title</h3>
    </div>
    <div style="padding: 20px; flex: 1; display: flex; flex-direction: column;">
        <p style="margin: 0 0 16px 0; color: #333; line-height: 1.5; font-size: 14px; flex: 1;">Highlight important resources or programs with this featured card style.</p>
        <a href="#" style="display: inline-block; background-color: #63B1DC; color: #1a1a1a; padding: 10px 18px; text-decoration: none; border-radius: 4px; font-size: 14px; font-weight: 600; text-align: center; border: 2px solid #63B1DC; cursor: pointer; align-self: flex-start;">Get Started</a>
    </div>
</article>