E3 Alliance Pattern Library

Search Card: News 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--news ">
                    <span class="badge__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>
                    </span>
                    news
                </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": "news",
    "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.