E3 Alliance Pattern Library

Search Card: Promising Practice 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--promising-practices ">
                    <span class="badge__icon">

                        <svg class="light-bulb" viewBox="0 0 9 13" xmlns="http://www.w3.org/2000/svg">
                            <path class="light-bulb__path" d="M6.96094 6.33594C7.28906 5.86719 7.5 5.28125 7.5 4.625C7.5 2.98438 6.14062 1.625 4.5 1.625C2.83594 1.625 1.5 2.98438 1.5 4.625C1.5 5.28125 1.6875 5.86719 2.01562 6.33594C2.10938 6.47656 2.20312 6.61719 2.32031 6.75781C2.625 7.17969 2.97656 7.67188 3.25781 8.16406C3.49219 8.60938 3.63281 9.07812 3.67969 9.5H2.55469C2.48438 9.21875 2.41406 8.96094 2.27344 8.70312C2.03906 8.28125 1.75781 7.88281 1.45312 7.48438C1.33594 7.32031 1.21875 7.15625 1.10156 6.99219C0.632812 6.3125 0.375 5.51562 0.375 4.625C0.375 2.35156 2.20312 0.5 4.5 0.5C6.77344 0.5 8.625 2.35156 8.625 4.625C8.625 5.51562 8.34375 6.3125 7.875 6.99219C7.75781 7.15625 7.64062 7.32031 7.52344 7.48438C7.21875 7.88281 6.9375 8.28125 6.70312 8.70312C6.5625 8.96094 6.49219 9.21875 6.42188 9.5H5.29688C5.36719 9.07812 5.48438 8.60938 5.71875 8.16406C6 7.67188 6.35156 7.17969 6.65625 6.75781C6.77344 6.61719 6.86719 6.47656 6.96094 6.33594ZM4.5 3.5C3.86719 3.5 3.375 4.01562 3.375 4.625C3.375 4.83594 3.1875 5 3 5C2.78906 5 2.625 4.83594 2.625 4.625C2.625 3.59375 3.44531 2.75 4.5 2.75C4.6875 2.75 4.875 2.9375 4.875 3.125C4.875 3.33594 4.6875 3.5 4.5 3.5ZM4.5 12.5C3.44531 12.5 2.625 11.6797 2.625 10.625V10.25H6.375V10.625C6.375 11.6797 5.53125 12.5 4.5 12.5Z" fill="white" />
                        </svg>
                    </span>
                    promising-practices
                </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": "promising-practices",
    "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.