Card Templates

Card Instructions:

<!--

╔══════════════════════════════════════════════════════════════════╗

║ EA FAMILY SERVICES — SERVICES CARD GRID ║

║ SquareSpace Code Block (v2 — scoped styles) ║

║ ║

║ HOW TO USE IN SQUARESPACE: ║

║ 1. Open the code block in the Fluid Engine editor ║

║ 2. Select all (Ctrl+A), delete, paste this whole file ║

║ 3. Close the Code Editor — done ║

║ ║

║ HOW TO EDIT CARDS: ║

║ • Change text: edit between the title/body tags only ║

║ • Add a card: copy a CARD block, paste before END CARDS ║

║ • Remove a card: delete from CARD comment to /CARD comment ║

║ • Change card color: find "background:" under Single card ║

║ and replace the hex value e.g. #FFFFFF = white ║

║ ║

║ NOTE: All CSS uses #ea-program-services as a prefix so ║

║ these styles ONLY affect this block and nothing else ║

║ on the page. Safe to use alongside other card blocks. ║

║ ║

║ LAYOUT: 3 columns desktop · 2 tablet · 1 mobile ║

║ COLORS: olive #697D40 · maroon #8E2F39 · white #FFFFFF ║

╚══════════════════════════════════════════════════════════════════╝

-->

<!-- ===================== STYLES ===================== -->

<style>

/* All selectors are prefixed with #ea-program-services

so these styles cannot bleed into any other code block */

/* --- Grid wrapper --- */

#ea-program-services .ea-cards {

display: grid;

grid-template-columns: repeat(3, 1fr);

gap: 20px;

width: 100%;

box-sizing: border-box;

font-family: 'Raleway', 'Helvetica Neue', Arial, sans-serif;

}

/* --- Single card ---

TO CHANGE CARD COLOR: edit the background value below

#FFFFFF = white | #F3F1ED = cream | #E8E4DE = warm cream */

#ea-program-services .ea-card {

background: #FFFFFF;

border-top: 3px solid #697D40;

border-radius: 3px;

padding: 32px 26px 28px;

box-sizing: border-box;

}

/* --- Icon circle --- */

#ea-program-services .ea-card__icon {

width: 48px;

height: 48px;

background: #E8E4DE;

border-radius: 50%;

display: flex;

align-items: center;

justify-content: center;

margin-bottom: 18px;

font-size: 15px;

font-weight: 700;

color: #8E2F39;

letter-spacing: 0.5px;

}

/* --- SVG icon sizing --- */

#ea-program-services.ea-card__icon svg {

width: 24px;

height: 24px;

stroke: #8E2F39;

stroke-width: 1.5;

fill: none;

flex-shrink: 0;

}

/* --- Card title --- */

#ea-program-services.ea-card__title {

font-family: 'Libre Baskerville', Georgia, serif;

font-size: 17px;

font-weight: 700;

color: #8E2F39;

line-height: 1.25;

margin: 0 0 10px 0;

}

/* --- Card body text --- */

#ea-program-services .ea-card__body {

font-size: 14px;

line-height: 1.65;

color: #5B5453;

margin: 0;

}

/* --- Responsive: 2 columns on tablet --- */

@media (max-width: 900px) {

#ea-program-services .ea-cards {

grid-template-columns: repeat(2, 1fr);

}

}

/* --- Responsive: 1 column on mobile --- */

@media (max-width: 540px) {

#ea-program-services .ea-cards {

grid-template-columns: 1fr;

}

#ea-program-services .ea-card {

padding: 26px 22px 22px;

}

}

</style>

<!-- ==================== END STYLES ==================== -->

<!-- ==================== CARDS ==================== -->

<!--

Each card is marked CARD / /CARD.

Copy one complete block to add a new card.

Paste it before the END CARDS comment.

-->

<div id="ea-program-services">

<div class="ea-cards">

<!-- CARD 1 ──────────────────────────────────────── -->

<div class="ea-card">

<!-- Icon: clipboard / assessment

To use initials instead: <div class="ea-card__icon">CA</div> -->

<div class="ea-card__icon" aria-hidden="true">

<svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">

<path d="M9 5H7a2 2 0 0 0-2 2v12a2 2 0 0 0 2 2h10a2 2 0 0 0 2-2V7a2 2 0 0 0-2-2h-2"/>

<rect x="9" y="3" width="6" height="4" rx="2"/>

<path d="M9 12h6M9 16h4"/>

</svg>

</div>

<!-- EDIT title -->

<h3 class="ea-card__title">Clinical Assessment</h3>

<!-- EDIT body -->

<p class="ea-card__body">Comprehensive behavioral health evaluations to understand each person's needs, strengths, and goals. Assessments inform individualized treatment and service planning.</p>

</div>

<!-- /CARD 1 ─────────────────────────────────────── -->

<!-- CARD 2 ──────────────────────────────────────── -->

<div class="ea-card">

<!-- Icon: speech bubble / counseling -->

<div class="ea-card__icon" aria-hidden="true">

<svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">

<path d="M21 15a2 2 0 0 1-2 2H7l-4 4V5a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2z"/>

</svg>

</div>

<h3 class="ea-card__title">Counseling &amp; Therapy</h3>

<p class="ea-card__body">Individual, family, and group therapy delivered by licensed or supervised clinicians. Evidence-informed approaches adapted to each client's needs and goals.</p>

</div>

<!-- /CARD 2 ─────────────────────────────────────── -->

<!-- CARD 3 ──────────────────────────────────────── -->

<div class="ea-card">

<!-- Icon: pencil / planning -->

<div class="ea-card__icon" aria-hidden="true">

<svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">

<path d="M12 20h9"/>

<path d="M16.5 3.5a2.121 2.121 0 0 1 3 3L7 19l-4 1 1-4L16.5 3.5z"/>

</svg>

</div>

<h3 class="ea-card__title">Individualized Treatment Planning</h3>

<p class="ea-card__body">Collaborative plans built around each person's strengths, goals, and cultural values — with structured review and adjustment over time.</p>

</div>

<!-- /CARD 3 ─────────────────────────────────────── -->

<!-- CARD 4 ──────────────────────────────────────── -->

<div class="ea-card">

<!-- Icon: people / coordination -->

<div class="ea-card__icon" aria-hidden="true">

<svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">

<path d="M17 21v-2a4 4 0 0 0-4-4H5a4 4 0 0 0-4 4v2"/>

<circle cx="9" cy="7" r="4"/>

<path d="M23 21v-2a4 4 0 0 0-3-3.87"/>

<path d="M16 3.13a4 4 0 0 1 0 7.75"/>

</svg>

</div>

<h3 class="ea-card__title">Care Coordination &amp; Case Management</h3>

<p class="ea-card__body">Navigation support across services, systems, and providers. EA coordinates with county agencies, schools, healthcare, child welfare, and other partners.</p>

</div>

<!-- /CARD 4 ─────────────────────────────────────── -->

<!-- CARD 5 ──────────────────────────────────────── -->

<div class="ea-card">

<!-- Icon: phone / crisis -->

<div class="ea-card__icon" aria-hidden="true">

<svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">

<path d="M22 16.92v3a2 2 0 0 1-2.18 2 19.79 19.79 0 0 1-8.63-3.07 19.5 19.5 0 0 1-6-6 19.79 19.79 0 0 1-3.07-8.67A2 2 0 0 1 4.11 2h3a2 2 0 0 1 2 1.72c.127.96.361 1.903.7 2.81a2 2 0 0 1-.45 2.11L8.09 9.91a16 16 0 0 0 6 6l1.27-1.27a2 2 0 0 1 2.11-.45c.907.339 1.85.573 2.81.7A2 2 0 0 1 22 16.92z"/>

</svg>

</div>

<h3 class="ea-card__title">Crisis Support</h3>

<p class="ea-card__body">Timely response and stabilization for individuals and families experiencing a behavioral health crisis, coordinated with Plumas County crisis systems.</p>

</div>

<!-- /CARD 5 ─────────────────────────────────────── -->

<!-- CARD 6 ──────────────────────────────────────── -->

<div class="ea-card">

<!-- Icon: home / families -->

<div class="ea-card__icon" aria-hidden="true">

<svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">

<path d="M3 9l9-7 9 7v11a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z"/>

<polyline points="9 22 9 12 15 12 15 22"/>

</svg>

</div>

<h3 class="ea-card__title">Supporting Youth &amp; Families</h3>

<p class="ea-card__body">Targeted support for children, adolescents, and families — including parent education, family therapy, skill-building, and school coordination.</p>

</div>

<!-- /CARD 6 ─────────────────────────────────────── -->

<!--

┌──────────────────────────────────────────────────────┐

│ TO ADD A NEW CARD: uncomment the block below, │

│ fill in the title + body, paste before END CARDS │

└──────────────────────────────────────────────────────┘

<!-- CARD (NEW) ──────────────────────────────────── -->

<!--

<div class="ea-card">

<div class="ea-card__icon">NEW</div>

<h3 class="ea-card__title">Card Title Here</h3>

<p class="ea-card__body">Card description. Keep to 1–3 sentences for visual consistency.</p>

</div>

-->

<!-- /CARD (NEW) ─────────────────────────────────── -->

</div>

</div>

<!-- END CARDS -->