E3 Alliance Pattern Library

Search Card: Focus Area Card 

<div class="search-card" role="article">
    <div class="search-card__container">
        <div class="search-card-content">
            <div class="search-card-content__tag">

                <span 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>
                    focus-area
                </span>
            </div>
            <div class="search-card-content__title">
                <a class="search-card-content__title-link" href="1212" role="link">Lorem ipsum dolor sit highlight consectetur adipiscing elitneca laciniania.</a>
            </div>
            <div class="search-card-content__excerpt">
                ...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...
            </div>
        </div>
    </div>
</div>
 
{% set boldedExcerpt = card.custom_excerpt|replace({(search.term): '<strong>' ~ search.term ~ '</strong>'}) %}

<div class="search-card" role="article">
    <div class="search-card__container">
        <div class="search-card-content">
            {% if card.post_type %}
            <div class="search-card-content__tag">
                {% if card.post_type %}
                    {% include "bits/badge/badge.twig" with {
                        postType: card.post_type|replace({'_':'-'}),
                        title: card.post_type | replace({'_': ' '})
                        }
                    %}
                {% endif %}
            </div>
            {% endif %}
            <div class="search-card-content__title">
                <a class="search-card-content__title-link" href="{{ card.guid }}" role="link">{{ card.post_title }}</a>
            </div>
            {% if (card.custom_excerpt ) %}
                <div class="search-card-content__excerpt">
                    {{boldedExcerpt | raw |striptags('<div>')}}
                </div>
            {% endif %}
        </div>
    </div>
</div>
 
{
  "site": {
    "name": "E3 Alliance"
  },
  "search": {
    "term": "highlight"
  },
  "card": {
    "post_type": "focus-area",
    "post_title": "Lorem ipsum dolor sit highlight consectetur adipiscing elitneca laciniania.",
    "guid": "1212",
    "permalink": "#",
    "custom_excerpt": "...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..."
  }
}
  • Content: 
    .search-card

    display flex
    width 100%
    border-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%

.search-card__type
    &--focus-area
        --backgroundColor greenAppleDark3
        --headerTextColor white
    &--promising-practice
        --backgroundColor aquaDark
        --headerTextColor white
    &--article
    &--case-study
    &--news
    &--press-release
        --backgroundColor grape
        --headerTextColor white

    &__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

.search-card-content
    display grid
    grid-gap 8px
    padding 24px
    background-color white
    border-bottom-left-radius 4px
    border-bottom-right-radius 4px

    +below(1000px)
        display flex
        flex-direction column

    &__tag
        display flex

    &__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

    &__excerpt
        @extends $richText
        line-height 34px
  • URL: /components/raw/search-card/search-card.styl
  • Filesystem Path: patterns/partials/cards/search-card/search-card.styl
  • Size: 1.8 KB

No notes defined.