Custom theme (replace with client name)

Search Card 

<div class="search-card" role="article">
    <div class="search-card__container">
        <div class="search-card-content">
            <div class="search-card-content__title">
                <a class="search-card-content__title-link" href="" role="link"></a>
            </div>
        </div>
    </div>
</div>
 
{% from 'macros/post-type-tag/post-type-tag.twig' import postTypeTag %}
{% 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 %}
                    {{ postTypeTag((card.post_type|replace({'_':'-'})), (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>
 
/* No context defined. */
  • 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 greenAppleDK3
        --headerTextColor white
    &--promising-practice
        --backgroundColor aquaDk
        --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.