<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>
{% set element = 'span' %}
{% if url %}
{% set element = 'a' %}
{% endif %}
<{{ element }} href="{{ url }}" class="badge
{% if postType != 'page' %}badge--{{ postType }} {% endif %}
">
<span class="badge__icon">
{% include 'partials/post-type-icon/post-type-icon.twig' with {
postType: postType
} %}
</span>
{{ title }}
</{{ element }}>
{
"site": {
"name": "E3 Alliance"
},
"postType": "focus-area",
"url": "#",
"title": "Early Learning"
}
.badge
background-color greenAppleDark3
@extends $hypertextDark
box-shadow none
color white
display inline-flex
font-weight 600
font-size 16px
grid-gap 5px
justify-content space-between
line-height 16px
padding 8px 12px
text-decoration none
text-transform capitalize
transition all 0.3s ease
z-index 10
&--promising-practices
&--practice
background-color aquaDark
&--article
&--case-study
&--news
&--press-release
background-color grape
&:hover
&:focus
background-color greenAppleDark4
box-shadow 0 4px 16px rgba(0, 0, 0, 0.25)
&:active
background-color greenAppleDark3
&__icon
width 12px
No notes defined.