<div class="card card--focus-area" role="article">
<div class="card__container">
<div class="card-header card-header--focus-area">
<div class="card-header__icon">
<svg viewBox="0 0 12 16" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M4.30078 2.39844L3.97852 6.5293C3.94922 6.96875 3.74414 7.34961 3.36328 7.58398C2.68945 8.05273 2.16211 8.78516 1.92773 9.63477L1.89844 9.78125H5.29688V7.20312C5.29688 6.82227 5.58984 6.5 6 6.5C6.38086 6.5 6.70312 6.82227 6.70312 7.20312V9.78125H10.0723L10.043 9.63477C9.80859 8.78516 9.31055 8.05273 8.60742 7.58398C8.25586 7.34961 8.02148 6.96875 7.99219 6.5293L7.66992 2.39844C7.66992 2.36914 7.66992 2.33984 7.66992 2.28125H4.30078C4.30078 2.33984 4.30078 2.36914 4.30078 2.39844ZM5.29688 11.1875H1.3125C1.01953 11.1875 0.726562 11.0703 0.550781 10.8359C0.375 10.6016 0.316406 10.3086 0.404297 10.0449L0.580078 9.3125C0.873047 8.08203 1.60547 7.08594 2.57227 6.41211L2.80664 3.6875L2.89453 2.28125H2.01562C1.86914 2.28125 1.75195 2.25195 1.63477 2.19336C1.42969 2.07617 1.3125 1.8418 1.3125 1.57812C1.3125 1.19727 1.60547 0.875 2.01562 0.875H2.89453H9.07617H9.98438C10.3652 0.875 10.6875 1.19727 10.6875 1.57812C10.6875 1.8418 10.541 2.07617 10.3359 2.19336C10.2188 2.25195 10.1016 2.28125 9.98438 2.28125H9.07617L9.16406 3.6875L9.39844 6.41211C10.3652 7.08594 11.0977 8.08203 11.3906 9.3125L11.5664 10.0449C11.6543 10.3086 11.5957 10.6016 11.4199 10.8359C11.2441 11.0703 10.9512 11.1875 10.6582 11.1875H6.70312V15.1719C6.70312 15.582 6.38086 15.875 6 15.875C5.58984 15.875 5.29688 15.582 5.29688 15.1719V11.1875Z" fill="white" />
</svg>
</div>
<div class="card-header__title" role="heading" aria-level="2">
focus area
</div>
</div>
<div class="card-content">
<div class="card-content__image">
<figure class="image ">
<picture class="image__picture">
<img class="image__image" loading="lazy" type="image/jpeg" src="holder.js/540x360" alt="Image alt text">
</picture>
</figure>
</div>
<div class="card-content__post-meta">
<time class="card-content__post-date" datetime="April 11, 2024">April 11, 2024</time>
</div>
<div class="card-content__title">
<a class="card-content__title-link" href="#" role="link">This is a card title</a>
</div>
<div class="card-content__excerpt">
Lorem ipsum dolor sit amet, co...
</div>
<div class="card-content__tag-list" role="list">
<div class="tag-list">
<div class="tag-list__related-links">
<div class="topic-list">
<a href="#" class="badge
badge--focus-area ">
<span class="badge__icon">
<svg viewBox="0 0 12 16" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M4.30078 2.39844L3.97852 6.5293C3.94922 6.96875 3.74414 7.34961 3.36328 7.58398C2.68945 8.05273 2.16211 8.78516 1.92773 9.63477L1.89844 9.78125H5.29688V7.20312C5.29688 6.82227 5.58984 6.5 6 6.5C6.38086 6.5 6.70312 6.82227 6.70312 7.20312V9.78125H10.0723L10.043 9.63477C9.80859 8.78516 9.31055 8.05273 8.60742 7.58398C8.25586 7.34961 8.02148 6.96875 7.99219 6.5293L7.66992 2.39844C7.66992 2.36914 7.66992 2.33984 7.66992 2.28125H4.30078C4.30078 2.33984 4.30078 2.36914 4.30078 2.39844ZM5.29688 11.1875H1.3125C1.01953 11.1875 0.726562 11.0703 0.550781 10.8359C0.375 10.6016 0.316406 10.3086 0.404297 10.0449L0.580078 9.3125C0.873047 8.08203 1.60547 7.08594 2.57227 6.41211L2.80664 3.6875L2.89453 2.28125H2.01562C1.86914 2.28125 1.75195 2.25195 1.63477 2.19336C1.42969 2.07617 1.3125 1.8418 1.3125 1.57812C1.3125 1.19727 1.60547 0.875 2.01562 0.875H2.89453H9.07617H9.98438C10.3652 0.875 10.6875 1.19727 10.6875 1.57812C10.6875 1.8418 10.541 2.07617 10.3359 2.19336C10.2188 2.25195 10.1016 2.28125 9.98438 2.28125H9.07617L9.16406 3.6875L9.39844 6.41211C10.3652 7.08594 11.0977 8.08203 11.3906 9.3125L11.5664 10.0449C11.6543 10.3086 11.5957 10.6016 11.4199 10.8359C11.2441 11.0703 10.9512 11.1875 10.6582 11.1875H6.70312V15.1719C6.70312 15.582 6.38086 15.875 6 15.875C5.58984 15.875 5.29688 15.582 5.29688 15.1719V11.1875Z" fill="white" />
</svg>
</span>
Early Learning
</a>
<a href="#" class="badge
badge--focus-area ">
<span class="badge__icon">
<svg viewBox="0 0 12 16" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M4.30078 2.39844L3.97852 6.5293C3.94922 6.96875 3.74414 7.34961 3.36328 7.58398C2.68945 8.05273 2.16211 8.78516 1.92773 9.63477L1.89844 9.78125H5.29688V7.20312C5.29688 6.82227 5.58984 6.5 6 6.5C6.38086 6.5 6.70312 6.82227 6.70312 7.20312V9.78125H10.0723L10.043 9.63477C9.80859 8.78516 9.31055 8.05273 8.60742 7.58398C8.25586 7.34961 8.02148 6.96875 7.99219 6.5293L7.66992 2.39844C7.66992 2.36914 7.66992 2.33984 7.66992 2.28125H4.30078C4.30078 2.33984 4.30078 2.36914 4.30078 2.39844ZM5.29688 11.1875H1.3125C1.01953 11.1875 0.726562 11.0703 0.550781 10.8359C0.375 10.6016 0.316406 10.3086 0.404297 10.0449L0.580078 9.3125C0.873047 8.08203 1.60547 7.08594 2.57227 6.41211L2.80664 3.6875L2.89453 2.28125H2.01562C1.86914 2.28125 1.75195 2.25195 1.63477 2.19336C1.42969 2.07617 1.3125 1.8418 1.3125 1.57812C1.3125 1.19727 1.60547 0.875 2.01562 0.875H2.89453H9.07617H9.98438C10.3652 0.875 10.6875 1.19727 10.6875 1.57812C10.6875 1.8418 10.541 2.07617 10.3359 2.19336C10.2188 2.25195 10.1016 2.28125 9.98438 2.28125H9.07617L9.16406 3.6875L9.39844 6.41211C10.3652 7.08594 11.0977 8.08203 11.3906 9.3125L11.5664 10.0449C11.6543 10.3086 11.5957 10.6016 11.4199 10.8359C11.2441 11.0703 10.9512 11.1875 10.6582 11.1875H6.70312V15.1719C6.70312 15.582 6.38086 15.875 6 15.875C5.58984 15.875 5.29688 15.582 5.29688 15.1719V11.1875Z" fill="white" />
</svg>
</span>
Career Readiness
</a>
</div>
</div>
<div class="tag-list__topics-list">
<div class="topic-list">
<span class="label">
Education
</span>
<span class="label">
Youth Development
</span>
</div>
</div>
</div>
</div>
<div class="card-content__mobile-image">
<figure class="image ">
<picture class="image__picture">
<img class="image__image" loading="lazy" type="image/jpeg" src="holder.js/540x360" alt="Image alt text">
</picture>
</figure>
</div>
</div>
</div>
</div>
<div class="card card--{{ card.cardType }}" role="article">
<div class="card__container">
<div class="card-header card-header--{{ card.cardType }}">
<div class="card-header__icon">
{% include 'partials/post-type-icon/post-type-icon.twig' with { postType: card.cardType } %}
</div>
<div class="card-header__title" role="heading" aria-level="2">
{{ card.cardType| replace({'-': ' '}) }}
</div>
</div>
<div class="card-content">
{% if card.hasImage %}
<div class="card-content__image">
{% include 'partials/image/image.twig' with {
image: card.featuredImage
} %}
</div>
{% endif %}
{% if card.publishDate %}
<div class="card-content__post-meta">
<time class="card-content__post-date" datetime="{{ card.publishDate }}">{{ card.publishDate }}</time>
</div>
{% endif %}
<div class="card-content__title">
<a class="card-content__title-link" href="{{ card.permalink }}" role="link">{{ card.title }}</a>
</div>
<div class="card-content__excerpt">
{% if (card.cardType == "press-release" or card.cardType == "news" or card.cardType == "case-study") and card.hasImage %}
{{ card.excerpt | truncate(19) }}
{% else%}
{{ card.excerpt | truncate(30)}}
{% endif %}
</div>
<div class="card-content__tag-list" role="list">
{% include 'partials/tag-list/tag-list.twig' with {
topics: card.topics,
relatedPostLinks: card.focusAreas
} %}
</div>
{% if card.hasImage %}
<div class="card-content__mobile-image">
{% include 'partials/image/image.twig' with {
image: card.mobileFeaturedImage
} %}
</div>
{% endif %}
</div>
</div>
</div>
{
"site": {
"name": "E3 Alliance"
},
"card": {
"hasImage": true,
"featuredImage": {
"src": "holder.js/540x360",
"alt": "Image alt text"
},
"mobileFeaturedImage": {
"src": "holder.js/540x360",
"alt": "Image alt text"
},
"publishDate": "April 11, 2024",
"date": "April 11, 2024",
"permalink": "#",
"title": "This is a card title",
"excerpt": "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed nec purus et felis. Donec et nunc nec nisl lacinia lacinia. Nullam nec nunc nec nisl lacinia lacinia.",
"focusAreas": [
{
"topic": "Early Learning",
"url": "#"
},
{
"topic": "Career Readiness",
"url": "#"
}
],
"topics": [
"Education",
"Youth Development"
],
"cardType": "focus-area"
}
}
.card
display flex
width 100%
border-bottom-left-radius 4px
border-bottom-right-radius 4px
position relative
transition all 0.3s ease
&:hover
&:focus
box-shadow 0 4px 16px rgba(0, 0, 0, 0.25)
&:active
box-shadow 0 4px 16px rgba(0, 0, 0, 0.15)
&__container
display flex
flex-direction column
flex 1 1 100%
.card-header
&--focus-area
--backgroundColor greenAppleDark3
--headerTextColor white
&--promising-practices
&--promising-practice
--backgroundColor aquaDark
--headerTextColor white
&--article
&--case-study
&--news
&--press-release
--backgroundColor grape
--headerTextColor white
background-color var(--backgroundColor)
display flex
align-items center
padding 2px 0 2px 24px
border-top-right-radius 4px
border-top-left-radius 4px
&__icon
display flex
padding-right 8px
svg
height 16px
max-width 16px
path
fill var(--headerTextColor)
&__title
@extends $bodySmall
color var(--headerTextColor)
line-height 1.65em
font-weight bold
text-transform capitalize
.card-content
padding 24px
min-height 230px
background-color white
border-bottom-left-radius 4px
border-bottom-right-radius 4px
+below(1000px)
display flex
flex-direction column
&__post-meta
&__title
margin-bottom 12px
&__post-date
@extends $detail
color #6d6d6d
font-size 16px
&__title
@extends $headline3
&__title-link
@extends $hypertext
color jet
border-bottom-color jet
border-bottom-width .065em
&::after
position absolute
top 0
right 0
bottom 0
left 0
z-index 5
content ""
pointer-events auto
&__image
display none
+above(1000px)
display inline-block
float right
width 270px
height fit-content
margin-left 12px
&__excerpt
font-size 20px
line-height 36px
font-weight 300
&__mobile-image
display none
width 100%
height auto
+above(1000px)
display none
No notes defined.