<div class="card card--" role="article">
<div class="card__container">
<div class="card-header card-header--">
<div class="card-header__icon">
<svg viewBox="0 0 37 48" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M30.25 43.4688C30.9844 43.4688 31.7188 42.8262 31.7188 42V15.5625H24.375C22.7227 15.5625 21.4375 14.2773 21.4375 12.625V5.28125H6.75C5.92383 5.28125 5.28125 6.01562 5.28125 6.75V42C5.28125 42.8262 5.92383 43.4688 6.75 43.4688H30.25ZM0.875 6.75C0.875 3.53711 3.44531 0.875 6.75 0.875H21.8965C23.457 0.875 24.9258 1.51758 26.0273 2.61914L34.3809 10.9727C35.4824 12.0742 36.125 13.543 36.125 15.1035V42C36.125 45.3047 33.4629 47.875 30.25 47.875H6.75C3.44531 47.875 0.875 45.3047 0.875 42V6.75Z" fill="white" />
</svg>
</div>
<div class="card-header__title" role="heading" aria-level="2">
</div>
</div>
<div class="card-content">
<div class="card-content__title">
<a class="card-content__title-link" href="" role="link"></a>
</div>
<div class="card-content__excerpt">
undefined
</div>
<div class="card-content__tag-list" role="list">
<div class="tag-list">
</div>
</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>
{
"post": {
"title": "Card Title",
"permalink": "#",
"date": "January 1, 2020",
"topics": [
"Topic 1",
"Topic 2"
],
"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 greenAppleDK3
--headerTextColor white
&--promising-practices
&--promising-practice
--backgroundColor aquaDk
--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.