25Search Cards

A search card is a system generated card that is very global but non-generic. With very specific styles, behavior, and content, these cards represent individual “Service Year things” such as Corps Members, Listings, Organizations, and Positions. Search cards are clickable and direct the user to the public profile page of the object.

25.1Search Card Guidelines

There are two styles of search cards: default and compact. Default is the full view of the card. Compact cards are a condensed version which is primarily used on mobile. Compact cards also appear in carousels.

Structure

1) LABEL

2) STATUS COLOR

3) AVATAR

4) FLAG

5) HEADING

6) META

7) DESCRIPTION

8) STATUS

9) DETAILS

10) FOOTER

11) BADGE (E.G. "VERIFIED SERVICE")

Footer

12) ACTION BUTTONS OR MENU

13) ACTION FOOTER

14) ACTION FOOTER TEXT

15) CHIPS (E.G. APPLICATION ACTIONS)

Show Markup

<h3 class="mb2">Structure</h3>

<div class="row">
    <div class="column small-12">
        <img src="/styleguide/images/search-cards/search-card-structure.png">
    </div>
</div>
<div class="row">
    <div class="columns small-7 mt2 mb2">
        <h4 class="color-deep-medium-navy heading--micro">1) LABEL</h4>
        <h4 class="color-deep-medium-navy heading--micro">2) STATUS COLOR</h4>
        <h4 class="color-deep-medium-navy heading--micro">3) AVATAR</h4>
        <h4 class="color-deep-medium-navy heading--micro">4) FLAG</h4>
        <h4 class="color-deep-medium-navy heading--micro">5) HEADING</h4>
        <h4 class="color-deep-medium-navy heading--micro">6) META</h4>
        <h4 class="color-deep-medium-navy heading--micro">7) DESCRIPTION</h4>
        <h4 class="color-deep-medium-navy heading--micro">8) STATUS</h4>
        <h4 class="color-deep-medium-navy heading--micro">9) DETAILS</h4>
        <h4 class="color-deep-medium-navy heading--micro">10) FOOTER</h4>
        <h4 class="color-deep-medium-navy heading--micro">11) BADGE (E.G. "VERIFIED SERVICE")</h4>
    </div>
</div>

<h3 class="mb2">Footer</h3>

<div class="row">
    <div class="column small-12">
        <img src="/styleguide/images/search-cards/search-card-actions.png">
    </div>
</div>
<div class="row">
    <div class="columns small-7 mt2 mb2">
        <h4 class="color-deep-medium-navy heading--micro">12) ACTION BUTTONS OR MENU</h4>
        <h4 class="color-deep-medium-navy heading--micro">13) ACTION FOOTER</h4>
        <h4 class="color-deep-medium-navy heading--micro">14) ACTION FOOTER TEXT</h4>
        <h4 class="color-deep-medium-navy heading--micro">15) CHIPS (E.G. APPLICATION ACTIONS)</h4>
    </div>
</div>


25.2Corps Member Search Card

Only one status color can show at a time and the first relevant status that applies to the corps member card determines the color displayed.

  • Green: Actively Searching
  • Blue: Serving
  • Yellow: Served
  • Grey: No status

Depending on the user’s preferences and activities, the Search Card can also include the footer with the “Send Message” button.

Show Markup

<div class="row small-collapse">
    <div class="columns small-12 search-card search-card--corps-members is-alum">
        <a class="search-card__content" href="#">
            <div class="search-card__status-color is-searching">
            </div>

            <div class="search-card__inner">
                <div class="search-card__header">
                    <div class="search-card__avatar lazyloaded" data-bg="https://placehold.it/250x150"
                         style="background-image: url('https://placehold.it/96x96');"></div>
                    <noscript>
                        <div class="search-card__avatar" style="background-image: url('https://placehold.it/96x96');">
                        </div>
                    </noscript>
                    <div class="search-card__flag">
                        <svg class="svg-icon svg-icon--white" role="img">
                            <use xmlns:xlink="http://www.w3.org/1999/xlink"
                                 xlink:href="/static/svg/sprite/symbol/sprite.svg#icon--sy-mark"></use>
                        </svg>
                    </div>
                    <p class="search-card__heading">Anna Cooper</p>
                    <p class="search-card__meta">
                        <span class="search-card__meta-item">
                            <svg class="svg-icon svg-icon--deep-medium-navy mrh" role="presentation">
                                <use xmlns:xlink="http://www.w3.org/1999/xlink"
                                     xlink:href="/static/svg/sprite/symbol/sprite.svg#icon--pointer"></use>
                            </svg>
                            Washington, DC
                        </span>
                    </p>
                </div>

                <div class="search-card__info">
                    <div class="search-card__details-wrap">
                        <div class="search-card__status-wrapper  search-card__status--multiple">

                            <div class="search-card__status-block">
                                <p class="search-card__status is-searching">Actively Searching</p>
                                <div class="search-card__details">
                                    <p class="search-card__detail">
                                        <span class="search-card__detail-label">Location</span>
                                        <span>Washington, DC</span>
                                    </p>

                                    <p class="search-card__detail">
                                        <span class="search-card__detail-label">Focus</span>
                                        <span>Community &amp; Nonprofit Development</span>
                                    </p>

                                    <p class="search-card__detail">
                                        <span class="search-card__detail-label">Start Date</span>
                                        <span>Available Indefinitely</span>
                                    </p>
                                </div>
                            </div>

                            <div class="search-card__status-block">
                                <p class="search-card__status is-served">Served <span
                                    class="label label--verified-service">Verified Service</span></p>
                                <div class="search-card__details">
                                    <p class="search-card__detail">
                                        <span class="search-card__detail-label">Location</span>
                                        <span>Greenville, NC</span>
                                    </p>

                                    <p class="search-card__detail">
                                        <span class="search-card__detail-label">Host</span>
                                        <span>Love Lee</span>
                                    </p>

                                    <p class="search-card__detail">
                                        <span class="search-card__detail-label">Service Type</span>
                                        <span>AmeriCorps NCCC Leader</span>
                                    </p>

                                    <p class="search-card__detail">
                                        <span class="search-card__detail-label">Service Date</span>
                                        <span>Oct 17, 2018 - Oct 17, 2018</span>
                                    </p>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </a>
        <button class="search-card__footer">
            <span class="show-for-small-only mrh">
                View Profile
            </span>
            <span><svg class="svg-icon svg-icon--deep-medium-navy" role="img">
                    <use xmlns:xlink="http://www.w3.org/1999/xlink"
                         xlink:href="/static/svg/sprite/symbol/sprite.svg#icon--angle-right"></use>
                </svg></span>
        </button>
    </div>
</div>

<!-- MOBILE/COMPACT -->
<div class="row small-collapse">
    <div class="columns small-12 medium-4">
        <div class="search-card search-card--compact search-card--corps-members is-alum">
            <a class="search-card__content" href="#">
                <div class="search-card__status-color is-searching">
                </div>

                <div class="search-card__inner">
                    <div class="search-card__header">
                        <div class="search-card__avatar lazyloaded" data-bg="https://placehold.it/250x150"
                             style="background-image: url('https://placehold.it/96x96');"></div>
                        <noscript>
                            <div class="search-card__avatar"
                                 style="background-image: url('https://placehold.it/96x96');"></div>
                        </noscript>
                        <div class="search-card__flag">
                            <svg class="svg-icon svg-icon--white" role="img">
                                <use xmlns:xlink="http://www.w3.org/1999/xlink"
                                     xlink:href="/static/svg/sprite/symbol/sprite.svg#icon--sy-mark"></use>
                            </svg>
                        </div>
                        <p class="search-card__heading">Anna Cooper</p>
                        <p class="search-card__meta">
                            <span class="search-card__meta-item">
                                <svg class="svg-icon svg-icon--deep-medium-navy mrh" role="presentation">
                                    <use xmlns:xlink="http://www.w3.org/1999/xlink"
                                         xlink:href="/static/svg/sprite/symbol/sprite.svg#icon--pointer"></use>
                                </svg>
                                Washington, DC
                            </span>
                        </p>
                    </div>

                    <div class="search-card__info">
                        <div class="search-card__details-wrap">
                            <p class="search-card__status is-searching">Actively Searching</p>
                            <div class="search-card__details">

                                <p class="search-card__detail" style="flex-basis:100%;">
                                    <span class="search-card__detail-label">Location</span> <span>Washington, DC</span>
                                </p>

                                <p class="search-card__detail" style="flex-basis:100%;">
                                    <span class="search-card__detail-label">Focus</span> <span>Community &amp; Nonprofit
                                        Development</span>
                                </p>

                                <p class="search-card__detail" style="flex-basis:100%;">
                                    <span class="search-card__detail-label">Start Date</span>
                                    <span>
                                        Available Indefinitely
                                    </span>
                                </p>
                            </div>


                            <p class="search-card__status is-served">Served <span
                                class="label label--verified-service">Verified Service</span></p>

                            <div class="search-card__details">
                                <p class="search-card__detail">
                                    <span class="search-card__detail-label">Location</span>
                                    <span>Greenville, NC</span>
                                </p>

                                <p class="search-card__detail">
                                    <span class="search-card__detail-label">Host</span> <span>Love Lee</span>
                                </p>

                                <p class="search-card__detail">
                                    <span class="search-card__detail-label">Service Type</span>
                                    <span>AmeriCorps NCCC Leader</span>
                                </p>

                                <p class="search-card__detail">
                                    <span class="search-card__detail-label">Service Date</span>
                                    <span>Oct 17, 2018 - Oct 17, 2018</span>
                                </p>
                            </div>
                        </div>
                    </div>
                </div>
            </a>
            <button class="search-card__footer">
                <span class="mrh">
                    View Profile
                </span>
                <span><svg class="svg-icon svg-icon--deep-medium-navy" role="img">
                        <use xmlns:xlink="http://www.w3.org/1999/xlink"
                             xlink:href="/static/svg/sprite/symbol/sprite.svg#icon--angle-right"></use>
                    </svg></span>
            </button>
        </div>
    </div>
</div>

<!-- 2nd card -->

<div class="row small-collapse">
    <div class="columns small-12 search-card search-card--corps-members">
        <a class="search-card__content" href="#">
            <div class="search-card__status-color is-serving">
            </div>

            <div class="search-card__inner">
                <div class="search-card__header">
                    <div class="search-card__avatar lazyloaded" data-bg="https://placehold.it/250x150"
                         style="background-image: url('https://placehold.it/96x96');"></div>
                    <noscript>
                        <div class="search-card__avatar" style="background-image: url('https://placehold.it/96x96');">
                        </div>
                    </noscript>
                    <p class="search-card__heading">Anna Cooper</p>
                    <p class="search-card__meta">
                        <span class="search-card__meta-item">
                            <svg class="svg-icon svg-icon--deep-medium-navy mrh" role="presentation">
                                <use xmlns:xlink="http://www.w3.org/1999/xlink"
                                     xlink:href="/static/svg/sprite/symbol/sprite.svg#icon--pointer"></use>
                            </svg>
                            Washington, DC
                        </span>
                    </p>
                </div>

                <div class="search-card__info">
                    <div class="search-card__details-wrap">
                        <div class="search-card__status-wrapper  search-card__status--multiple">

                            <div class="search-card__status-block">
                                <p class="search-card__status is-serving">Currently Serving</p>
                                <div class="search-card__details">
                                    <p class="search-card__detail">
                                        <span class="search-card__detail-label">Location</span>
                                        <span>Washington, DC</span>
                                    </p>

                                    <p class="search-card__detail">
                                        <span class="search-card__detail-label">Host</span>
                                        <span>Love Lee</span>
                                    </p>

                                    <p class="search-card__detail">
                                        <span class="search-card__detail-label">Service Date</span>
                                        <span>Apr 15, 2019 - May 2, 2019</span>
                                    </p>
                                </div>
                            </div>

                            <div class="search-card__status-block">
                                <p class="search-card__status is-served">Served</p>
                                <div class="search-card__details">
                                    <p class="search-card__detail">
                                        <span class="search-card__detail-label">Host</span>
                                        <span>US Army</span>
                                    </p>

                                    <p class="search-card__detail">
                                        <span class="search-card__detail-label">Service Type</span>
                                        <span>Military Service</span>
                                    </p>

                                    <p class="search-card__detail">
                                        <span class="search-card__detail-label">Service Date</span>
                                        <span>2010 - 2015</span>
                                    </p>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </a>
        <button class="search-card__footer">
            <span class="show-for-small-only mrh">
                View Profile
            </span>
            <span><svg class="svg-icon svg-icon--deep-medium-navy" role="img">
                    <use xmlns:xlink="http://www.w3.org/1999/xlink"
                         xlink:href="/static/svg/sprite/symbol/sprite.svg#icon--angle-right"></use>
                </svg></span>
        </button>
    </div>
</div>

<!-- MOBILE/COMPACT -->
<div class="row small-collapse">
    <div class="columns small-12 medium-4">
        <div class="search-card search-card--compact search-card--corps-members">
            <a class="search-card__content" href="#">
                <div class="search-card__status-color is-serving">
                </div>

                <div class="search-card__inner">
                    <div class="search-card__header">
                        <div class="search-card__avatar lazyloaded" data-bg="https://placehold.it/250x150"
                             style="background-image: url('https://placehold.it/96x96');"></div>
                        <noscript>
                            <div class="search-card__avatar"
                                 style="background-image: url('https://placehold.it/96x96');"></div>
                        </noscript>
                        <p class="search-card__heading">Anna Cooper</p>
                        <p class="search-card__meta">
                            <span class="search-card__meta-item">
                                <svg class="svg-icon svg-icon--deep-medium-navy mrh" role="presentation">
                                    <use xmlns:xlink="http://www.w3.org/1999/xlink"
                                         xlink:href="/static/svg/sprite/symbol/sprite.svg#icon--pointer"></use>
                                </svg>
                                Washington, DC
                            </span>
                        </p>
                    </div>

                    <div class="search-card__info">
                        <div class="search-card__details-wrap">
                            <p class="search-card__status is-serving">Currently Serving</p>
                            <div class="search-card__details">

                                <p class="search-card__detail" style="flex-basis:100%;">
                                    <span class="search-card__detail-label">Location</span> <span>Washington, DC</span>
                                </p>

                                <p class="search-card__detail">
                                    <span class="search-card__detail-label">Host</span>
                                    <span>Love Lee</span>
                                </p>

                                <p class="search-card__detail">
                                    <span class="search-card__detail-label">Service Date</span>
                                    <span>Apr 15, 2019 - May 2, 2019</span>
                                </p>
                            </div>


                            <p class="search-card__status is-served">Served</p>

                            <div class="search-card__details">
                                <p class="search-card__detail" style="flex-basis:100%;">
                                    <span class="search-card__detail-label">Host</span> <span>US Army</span>
                                </p>

                                <p class="search-card__detail">
                                    <span class="search-card__detail-label">Service Type</span>
                                    <span>Military Service</span>
                                </p>

                                <p class="search-card__detail">
                                    <span class="search-card__detail-label">Service Date</span>
                                    <span>2010 - 2015</span>
                                </p>
                            </div>
                        </div>
                    </div>
                </div>
            </a>
            <button class="search-card__footer">
                <span class="mrh">
                    View Profile
                </span>
                <span><svg class="svg-icon svg-icon--deep-medium-navy" role="img">
                        <use xmlns:xlink="http://www.w3.org/1999/xlink"
                             xlink:href="/static/svg/sprite/symbol/sprite.svg#icon--angle-right"></use>
                    </svg></span>
            </button>
        </div>
    </div>
</div>

<!-- 3rd card -->

<div class="search-card search-card--corps-members is-alum search-card--actions ">
    <a id="search-card-1" class="search-card__content " href="">
        <div class="search-card__status-color is-searching"></div>
        <div class="search-card__inner">
            <div class="search-card__header">
                <div class="search-card__avatar search-card__avatar-no-default lazyloaded"
                     data-bg="/media/users/profile/--9b3d9382-1742-11ed-b342-7adc2835820f_300_300_crop_rgb_c.jpeg"
                     style="background-image: url(&quot;/static/images/defaults/avatar-cm-yellow.jpg&quot;);">
                </div>
                <noscript>
                    <div class="search-card__avatar search-card__avatar-no-default"
                         style="background-image: url(&quot;/static/images/defaults/avatar-cm-yellow.jpg&quot;);">
                    </div>
                </noscript>
                <div class="search-card__flag">
                    <svg class="svg-icon svg-icon--white svg-icon--small" role="img" aria-hidden="true">
                        <use xlink:href="/static/svg/sprite/symbol/sprite.svg#icon--sy-mark"></use>
                    </svg>
                </div>
                <p class="search-card__heading">
                    <span class="">Enrolled Corps Member</span>
                </p>
                <p class="search-card__meta">
                    <span class="search-card__meta-item">
                    <svg class="svg-icon svg-icon--deep-medium-navy" role="presentation" aria-hidden="true"><use
                        xlink:href="/static/svg/sprite/symbol/sprite.svg#icon--pointer"></use></svg>
                    San Diego County, CA
                    </span>
                </p>
            </div>
            <div class="search-card__info">
                <hr>
                <div class="search-card__details-wrap">
                    <div class="search-card__status-wrapper  search-card__status--multiple">
                        <div class="search-card__status-block">
                            <p class="search-card__status is-searching">Actively Searching</p>
                            <div class="search-card__details">
                                <p class="search-card__detail location">
                                    <span class="search-card__detail-label">Location</span> <span>Kissimmee, FL + <span title="Butler County, OH">1 more</span> </span>
                                </p>
                                <p class="search-card__detail focus-area__top">
                                    <span class="search-card__detail-label">Focus</span>
                                    <span>Arts &amp; Culture + <span title="Economic Security, Homelessness &amp; Housing">2 more</span> </span>
                                </p>
                                <p class="search-card__detail">
                                    <span class="search-card__detail-label">Start Date</span>
                                    <span> Available Indefinitely </span>
                                </p>
                            </div>
                        </div>
                        <div class="search-card__status-block ">
                            <p class="search-card__status is-served"> Served <span
                                class="label label--verified-service">Verified Service</span></p>
                            <div class="search-card__details">
                                <p class="search-card__detail">
                                    <span class="search-card__detail-label">Location</span>
                                    <span> Virginia Beach, VA </span>
                                </p>
                                <p class="search-card__detail">
                                    <span class="search-card__detail-label">Host</span>
                                    <span>The Money Bin</span>
                                </p>
                                <p class="search-card__detail">
                                    <span class="search-card__detail-label">Service Date</span>
                                    <span> Jan 1, 2023 - Jan 1, 2024 </span>
                                </p>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </a>
    <div class="search-card__footer--buttons ">
        <div class="search-card__button-group">
            <a class="search-card__button search-card__button--wide search-card__button--secondary show-for-small-only"
               href="#">
                <span class="search-card__footer-link mrh"> View Profile </span>
                <svg class="svg-icon svg-icon--deep-medium-navy" role="presentation" aria-hidden="true">
                    <use xlink:href="/static/svg/sprite/symbol/sprite.svg#icon--angle-right"></use>
                </svg>
            </a>
            <a class="search-card__button search-card__button--wide" href="">
                <svg class="svg-icon svg-icon--white" role="presentation" aria-hidden="true">
                    <use xlink:href="/static/svg/sprite/symbol/sprite.svg#icon--message"></use>
                </svg>
                <span> Send Message </span>
            </a>

        </div>
    </div>
</div>
<!-- Mobile / Compact -->
<div class="row small-collapse">
    <div class="search-card__carousel js-match-card ga-matches-card"
         data-ga-card-selector="alum_matches_2" data-test="match-card" style="" data-slick-index="1"
         aria-hidden="false">
        <div class="search-card search-card--corps-members is-alum search-card--compact ">
            <a class="search-card__content " href="#" tabindex="0">
                <div class="search-card__status-color is-served"></div>
                <div class="search-card__inner">
                    <div class="search-card__header pt1 pb0">
                        <div class="search-card__avatar search-card__avatar-no-default lazyloaded"
                             data-bg="/static/images/defaults/avatar-cm-yellow.jpg"
                             style="background-image: url(&quot;/static/images/defaults/avatar-cm-yellow.jpg&quot;);">
                        </div>
                        <noscript>
                            <div class="search-card__avatar search-card__avatar-no-default"
                                 style="background-image: url(/static/images/defaults/avatar-cm-yellow.jpg);">
                            </div>
                        </noscript>
                        <div class="search-card__flag">
                            <svg class="svg-icon svg-icon--white svg-icon--small" role="img" aria-hidden="true">
                                <use xlink:href="/static/svg/sprite/symbol/sprite.svg#icon--sy-mark"></use>
                            </svg>
                        </div>
                        <p class="search-card__heading">
                            <span class="hide-for-small-only">Enrolled Corps Member</span>
                            <span class="show-for-small-only">Enrolled Corps Member</span>
                        </p>
                        <p class="search-card__meta">
                            <span class="search-card__meta-item">
                                <svg class="svg-icon svg-icon--deep-medium-navy" role="presentation" aria-hidden="true">
                                    <use xlink:href="/static/svg/sprite/symbol/sprite.svg#icon--pointer"></use>
                                </svg>
                                San Diego County, CA
                            </span>
                        </p>
                    </div>
                    <div class="search-card__info">
                        <div class="search-card__details-wrap">
                            <div class="search-card__status-wrapper ">
                                <div class="search-card__status-block mt0">
                                    <p class="search-card__status is-served">
                                        Served <span class="label label--verified-service">Verified Service</span>
                                    </p>
                                    <div class="search-card__details">
                                        <p class="search-card__detail">
                                            <span class="search-card__detail-label">Location</span>
                                            <span>
                                                Washington, DC
                                            </span>
                                        </p>
                                        <p class="search-card__detail">
                                            <span class="search-card__detail-label">Host</span>
                                            <span>Premium Certified Organization</span>
                                        </p>
                                        <p class="search-card__detail">
                                            <span class="search-card__detail-label">Service Type</span>
                                            <span>
                                                AmeriCorps State/National
                                            </span>
                                        </p>
                                        <p class="search-card__detail">
                                            <span class="search-card__detail-label">Service Date</span>
                                            <span>
                                                Sep 2, 2021 - Dec 10, 2021
                                            </span>
                                        </p>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </a>
            <div class="search-card__footer-cont">
                <a class="search-card__message  search-card__view-profile search-card__button--half-width show-for-small-only search-card__smaller-font "
                   href="#" tabindex="0">
                    <span class="mrh">
                        View Profile
                    </span>
                    <span><svg class="svg-icon svg-icon--deep-medium-navy" role="img" aria-hidden="true">
                            <use xlink:href="/static/svg/sprite/symbol/sprite.svg#icon--angle-right"></use>
                        </svg></span>
                </a>

                <a class="search-card__message search-card__message-send search-card__smaller-font "
                   href="" tabindex="0">
                    <span class="mrh"><svg class="svg-icon search-card__message_icon-color" role="img"
                                           aria-hidden="true">
                            <use xlink:href="/static/svg/sprite/symbol/sprite.svg#icon--message"></use>
                        </svg></span>
                    <span>
                        Send Message
                    </span>
                </a>
            </div>
            <div class="show-for-sr js-links-disable-tabindex">
                <a href="#" tabindex="0">View Profile</a>
                <a href="#" tabindex="0">end Message</a>
            </div>
        </div>
    </div>
</div>

<div class="row small-collaps">
    <img src="/styleguide/images/search-cards/matches-alum-mobile-card.png">
</div>


25.3Listing Search Card

Only one status color can show at a time and the first relevant status that applies to the listing card determines the color displayed.

  • Green: Actively Recruiting
  • Blue: Coming Soon
  • Red: Closed
Show Markup

<div class="row small-collapse">
    <div class="columns small-12 search-card search-card--listings">
        <a class="search-card__content" href="/tutoringaplus/literacy-tutor-certificationlogt/72QwJ5/">
            <div class="search-card__status-color is-coming-soon">
            </div>

            <div class="search-card__inner">
                <div class="search-card__header">
                    <div class="search-card__avatar search-card__avatar-no-default lazyloaded" data-bg="https://placehold.it/96x96" style="background-image: url('https://placehold.it/96x96');"></div>
                    <noscript>
                        <div class="search-card__avatar search-card__avatar-no-default" style="background-image: url('https://placehold.it/96x96');"></div>
                    </noscript>
                    <p class="search-card__heading">All Grades- Healthy Behavior Tutor-Des Moines</p>
                    <p class="search-card__meta">
                        <svg class="svg-icon svg-icon--deep-medium-navy mrh" role="presentation" ><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="/static/svg/sprite/symbol/sprite.svg#icon--organization"></use></svg> 1 A+ Tutoring
                    </p>
                </div>

                <div class="search-card__info">
                    <div class="search-card__description">
                        <p>Students in need of the most intensive support are referred to small-group tutoring with an AmeriCorps Tutor. Groups of 4-5 students meet daily for 30 minutes and get the chance to get the help they need without the distraction of a large group ...</p>
                    </div>
                    <div class="search-card__details-wrap">
                        <p class="search-card__status is-coming-soon">Coming Soon</p>
                        <div class="search-card__details">
                            <p class="search-card__detail">
                                <span class="search-card__detail-label">Location</span>
                                <span>Los Angeles, CA +
                                    <span title="Washington, DC; Ottawa, IL; Springdale, MD; New York, NY; Philadelphia, PA; Springfield, PA; Ooltewah, TN; Hagåtña, GU; 00802, VI; U.S. Virgin Islands">10 more</span>
                                </span>
                            </p>
                            <p class="search-card__detail">
                                <span class="search-card__detail-label">Focus</span>
                                <span>Education &amp; Youth</span>
                            </p>
                            <p class="search-card__detail">
                                <span class="search-card__detail-label">Duration</span>
                                <span>June 3, 2017 - July 14, 2017</span>
                            </p>
                            <p class="search-card__detail">
                                <span class="search-card__detail-label">Deadline</span>
                                <span>April 1, 2017</span>
                            </p>
                        </div>
                    </div>
                </div>
            </div>
        </a>

        <button class="search-card__footer">
            <span class="show-for-small-only mrh">
                View Listing
            </span>
            <span><svg class="svg-icon svg-icon--deep-medium-navy" role="img" ><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="/static/svg/sprite/symbol/sprite.svg#icon--angle-right"></use></svg></span>
        </button>
    </div>
</div>

<!-- MOBILE/COMPACT -->
<div class="row small-collapse">
    <div class="columns small-12 medium-4">
        <div class="search-card search-card--listings search-card--compact">
            <a class="search-card__content" href="/tutoringaplus/literacy-tutor-certificationlogt/72QwJ5/">
                <div class="search-card__status-color is-coming-soon">
                </div>

                <div class="search-card__inner">
                    <div class="search-card__header">
                        <div class="search-card__avatar search-card__avatar-no-default lazyloaded" data-bg="https://placehold.it/96x96" style="background-image: url('https://placehold.it/96x96');"></div>
                        <noscript>
                            <div class="search-card__avatar search-card__avatar-no-default" style="background-image: url('https://placehold.it/96x96');"></div>
                        </noscript>
                        <p class="search-card__heading">All Grades- Healthy Behavior Tutor-Des...</p>
                        <p class="search-card__meta">
                            <span class="search-card__meta-item">
                                <svg class="svg-icon svg-icon--deep-medium-navy mrh" role="presentation" ><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="/static/svg/sprite/symbol/sprite.svg#icon--organization"></use></svg> 1 A+ Tutoring
                            </span>
                        </p>
                    </div>

                    <div class="search-card__info">
                        <div class="search-card__description">
                            <p>Students in need of the most intensive support are referred to small-group tutoring with an AmeriCorps Tutor. Groups of 4-5 students meet daily for 30 ...</p>
                        </div>
                        <div class="search-card__details-wrap">
                            <p class="search-card__status is-coming-soon">Coming Soon</p>
                            <div class="search-card__details">
                                <p class="search-card__detail">
                                    <span class="search-card__detail-label">Location</span>
                                    <span>Los Angeles, CA +
                                        <span title="Washington, DC; Ottawa, IL; Springdale, MD; New York, NY; Philadelphia, PA; Springfield, PA; Ooltewah, TN; Hagåtña, GU; 00802, VI; U.S. Virgin Islands">10 more</span>
                                    </span>
                                </p>
                                <p class="search-card__detail">
                                    <span class="search-card__detail-label">Focus</span>
                                    <span>Education &amp; Youth</span>
                                </p>
                                <p class="search-card__detail">
                                    <span class="search-card__detail-label">Duration</span>
                                    <span>June 3, 2017 - July 14, 2017</span>
                                </p>
                                <p class="search-card__detail">
                                    <span class="search-card__detail-label">Deadline</span>
                                    <span>April 1, 2017</span>
                                </p>
                            </div>
                        </div>
                    </div>
                </div>
            </a>

            <button class="search-card__footer">
                <span class="mrh">
                    View Listing
                </span>
                <span><svg class="svg-icon svg-icon--deep-medium-navy" role="img" ><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="/static/svg/sprite/symbol/sprite.svg#icon--angle-right"></use></svg></span>
            </button>
        </div>
    </div>
</div>


25.4Match Card

Match search cards extend the base card template, but include "Saving" functionality via clicking on a heart icon in the top right corner.

Match cards contain only critical information to keep them compact. This includes:

  • Logo
  • Listing name
  • Organization name
  • Duration
  • Focus Areas
Show Markup

<!-- MOBILE/COMPACT -->
<div class="row small-collapse search-card__match">
    <div class="columns small-12 medium-4">
        <div class="search-card search-card--listings search-card--compact " data-test="search-card">
            <a class="search-card__content" href="#" tabindex="0">
                <div class="search-card__status-color is-actively-recruiting"></div>
                <div class="search-card__inner">
                    <div class="search-card__header">
                        <button type="button" class="search-card__content" tabindex="-1">
                            <div class="syadmin__score" id="search-card__score">
                                <small>
                                    Score: 1.0
                                </small>
                            </div>
                            <div class="search-card__avatar search-card__avatar-no-default lazyloaded" data-bg="https://sy-heroku.s3.amazonaws.com:443/reviewapps/serviceyear-staging-pr-4378/media/organizations/organizationprofile/--31ad1bea-52d4-11e8-886f-aad8a8fbbc04_300_300_crop_rgb_c.jpeg" style="background-image: url(&quot;https://sy-heroku.s3.amazonaws.com:443/reviewapps/serviceyear-staging-pr-4378/media/organizations/organizationprofile/--31ad1bea-52d4-11e8-886f-aad8a8fbbc04_300_300_crop_rgb_c.jpeg&quot;);">
                            </div>
                            <noscript>
                                <div class="search-card__avatar search-card__avatar-no-default"
                                     style="background-image: url(https://sy-heroku.s3.amazonaws.com:443/reviewapps/serviceyear-staging-pr-4378/media/organizations/organizationprofile/--31ad1bea-52d4-11e8-886f-aad8a8fbbc04_300_300_crop_rgb_c.jpeg);">
                                </div>
                            </noscript>
                        </button>
                        <form class="mb0" method="post" action="">
                            <button type="button" class="search-card__save ga-save-listing-match" tabindex="0"></button>
                        </form>
    
                        <p class="search-card__heading" data-test="search-card-result">
                            <span class="hide-for-small-only">Middle School Literacy Tutors copy copy</span>
                            <span class="show-for-small-only">Middle School Literacy Tutors copy copy</span>
                        </p>
                        <p class="search-card__meta">
                            <span class="search-card__meta-item">
                                <svg class="svg-icon svg-icon--deep-medium-navy mrh" role="presentation" ><use xlink:href="/static/svg/sprite/symbol/sprite.svg#icon--organization"></use></svg>
                                1 A+ Tutoring
                            </span>
                        </p>
                    </div>
                    <div class="search-card__info">
                        <div class="search-card__description">
                            <p class="hide-for-small-only">Students in need of the most intensive support are referred to small-group tutoring with an AmeriCorps Tutor. Groups of 4-5 students meet daily for 30 minutes, and stay together throughout the school year, allowing students the time they need to ...</p>
                            <p class="show-for-small-only">Students in need of the most intensive support are referred to small-group tutoring with an AmeriCorps Tutor. Groups of 4-5 students meet ...</p>
                        </div>
                        <div class="search-card__details-wrap">
                            <div class="search-card__status-wrapper ">
                                <div class="search-card__details">
                                    <p class="search-card__detail location">
                                        <span class="search-card__detail-label">Location</span> <span>California, US</span>
                                    </p>
                                    <p class="search-card__detail focus-area__top">
                                        <span class="search-card__detail-label">Focus</span> <span>Education &amp; Youth</span>
                                    </p>
                                    <p class="search-card__detail">
                                        <span class="search-card__detail-label">Duration</span>
                                        <span class="search-card__detail--mdy">Dec. 1, 2015 - June 24, 2016</span>
                                        <span style="display: none;" class="search-card__detail--my">Dec 2015 - Jun 2016</span>
                                    </p>
                                    <p class="search-card__detail deadline">
                                        <span class="search-card__detail-label">Deadline</span>
                                        Dec. 31, 2018
                                    </p>
                                    <p class="search-card__detail focus-area__bottom">
                                        <span class="search-card__detail-label">Focus Areas</span>
                                        <span>Education &amp; Youth</span>
                                    </p>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </a>
            
        </div>
    </div>
</div>

<script>
    document.addEventListener('DOMContentLoaded', function() {
        var heart = document.querySelector('.search-card__save');
        heart.addEventListener('click', function(e) {
            e.target.classList.toggle('search-card__save--active');
        })
    });
</script>


25.5Organization Search Card

Organization search cards only show a gray status color, which is indicative of no status.

Show Markup

<div class="row small-collapse">
    <div class="columns small-12 search-card search-card--organizations">
        <a class="search-card__content" href="#">
            <div class="search-card__status-color is-no-status">
            </div>

            <div class="search-card__inner">
                <div class="search-card__header">
                    <div class="search-card__avatar search-card__avatar-no-default lazyloaded" data-bg="https://placehold.it/96x96" style="background-image: url('https://placehold.it/96x96');"></div>
                    <noscript>
                        <div class="search-card__avatar search-card__avatar-no-default" style="background-image: url('https://placehold.it/96x96');"></div>
                    </noscript>
                    <p class="search-card__heading">American Conservation Experience</p>
                    <p class="search-card__meta">
                        <span class="search-card__meta-item">
                            <svg class="svg-icon svg-icon--deep-medium-navy mrh" role="presentation" ><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="/static/svg/sprite/symbol/sprite.svg#icon--pointer"></use></svg> Flagstaff, AZ 86001
                        </span>
                    </p>
            </div>

                <div class="search-card__info">
                    <div class="search-card__description">
                        <p>Offered as an advanced, long-term opportunity to earn significant practical and environmental work experience, AmeriCorps Professional Development Members will spend approximately 3-6 months participating on a variety of projects that are proven to be ...</p>
                    </div>
                    <div class="search-card__details-wrap">
                        <div class="search-card__details">
                            <p class="search-card__detail">
                                <span class="search-card__detail-label">Legal Form</span>
                                <span>501c3</span>
                            </p>
                            <p class="search-card__detail">
                                <span class="search-card__detail-label">Focus</span>
                                <span>Environment</span>
                            </p>
                            <span class="search-card__detail">
                                <span class="search-card__detail-label">Positions</span>
                                <span>1 Position Actively Recruiting</span>
                            </span>
                        </div>
                    </div>
                </div>
            </div>
        </a>
        <button class="search-card__footer">
            <span class="show-for-small-only mrh">
                View Organization
            </span>
            <span><svg class="svg-icon svg-icon--deep-medium-navy" role="img" ><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="/static/svg/sprite/symbol/sprite.svg#icon--angle-right"></use></svg></span>
        </button>
    </div>
</div>

<!-- MOBILE/COMPACT -->
<div class="row small-collapse">
    <div class="columns small-12 medium-4">
        <div class="search-card search-card--compact search-card--organizations">
            <a class="search-card__content" href="#">
                <div class="search-card__status-color is-no-status">
                </div>

                <div class="search-card__inner">
                    <div class="search-card__header">
                        <div class="search-card__avatar search-card__avatar-no-default lazyloaded" data-bg="https://placehold.it/96x96" style="background-image: url('https://placehold.it/96x96');"></div>
                        <noscript>
                            <div class="search-card__avatar search-card__avatar-no-default" style="background-image: url('https://placehold.it/96x96');"></div>
                        </noscript>
                        <p class="search-card__heading">American Conservation Experience</p>
                        <p class="search-card__meta">
                            <span class="search-card__meta-item">
                                <svg class="svg-icon svg-icon--deep-medium-navy mrh" role="presentation" ><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="/static/svg/sprite/symbol/sprite.svg#icon--pointer"></use></svg> Flagstaff, AZ 86001
                            </span>
                        </p>
                </div>

                    <div class="search-card__info">
                        <div class="search-card__description">
                            <p>Offered as an advanced, long-term opportunity to earn significant practical and environmental work experience, AmeriCorps Professional Development ...</p>
                        </div>
                        <div class="search-card__details-wrap">
                            <div class="search-card__details">
                                <p class="search-card__detail">
                                    <span class="search-card__detail-label">Legal Form</span>
                                    <span>501c3</span>
                                </p>
                                <p class="search-card__detail">
                                    <span class="search-card__detail-label">Focus</span>
                                    <span>Environment</span>
                                </p>
                                <span class="search-card__detail">
                                    <span class="search-card__detail-label">Positions</span>
                                    <span>1 Position Actively Recruiting</span>
                                </span>
                            </div>
                        </div>
                    </div>
                </div>
            </a>
            <button class="search-card__footer">
                <span class="mrh">
                    View Organization
                </span>
                <span><svg class="svg-icon svg-icon--deep-medium-navy" role="img" ><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="/static/svg/sprite/symbol/sprite.svg#icon--angle-right"></use></svg></span>
            </button>
        </div>
    </div>
</div>


25.6Position Search Card

Only one status color can show at a time and the first relevant status that applies to the position card determines the color displayed.

  • Green: Actively Recruiting
  • Grey: Not Actively Recruiting
Show Markup

<div class="row small-collapse">
    <div class="columns small-12 search-card search-card--positions">
        <a class="search-card__content" href="/educationworkse/old-assistant-site-coordinators/">
            <div class="search-card__status-color is-no-status">
            </div>

            <div class="search-card__inner">
                <div class="search-card__header">
                    <div class="search-card__avatar lazyloaded" data-bg="https://placehold.it/96x96" style="background-image: url('https://placehold.it/96x96');"></div>
                    <noscript>
                        <div class="search-card__avatar" style="background-image: url(https://placehold.it/96x96);">
                        </div>
                    </noscript>
                    <p class="search-card__heading">Assistant Site Coordinators</p>
                    <p class="search-card__meta">
                        <svg class="svg-icon svg-icon--deep-medium-navy mrh" role="presentation" ><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="/static/svg/sprite/symbol/sprite.svg#icon--organization"></use></svg><span>EducationWorks EP</span>
                    </p>
                </div>

                <div class="search-card__info">
                    <div class="search-card__description">
                        <p>Both positions include direct activity with students (e.g,, teaching, coaching, leading activities) 15 hours a week during the school year and 30-40 hours a week during the summer and provide a great opportunitty to get exeperience working with students ...</p>
                    </div>
                    <div class="search-card__details-wrap">
                        <p class="search-card__status is-no-status">Not Actively Recruiting</p>
                        <div class="search-card__details">
                            <p class="search-card__detail">
                                <span class="search-card__detail-label">Focus</span>
                                <span>Animals</span>
                            </p>
                        </div>
                    </div>
                </div>
            </div>
        </a>
        <button class="search-card__footer">
            <span class="show-for-small-only mrh">
                View Position
            </span>
            <span><svg class="svg-icon svg-icon--deep-medium-navy" role="img" ><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="/static/svg/sprite/symbol/sprite.svg#icon--angle-right"></use></svg></span>
        </button>
    </div>
</div>

<!-- MOBILE/COMPACT -->
<div class="row small-collapse">
    <div class="columns small-12 medium-4">
        <div class="search-card search-card--positions search-card--compact">
            <a class="search-card__content" href="/educationworkse/old-assistant-site-coordinators/">
                <div class="search-card__status-color is-no-status">
                </div>

                <div class="search-card__inner">
                    <div class="search-card__header">
                        <div class="search-card__avatar lazyloaded" data-bg="https://placehold.it/96x96" style="background-image: url('https://placehold.it/96x96');"></div>
                        <noscript>
                            <div class="search-card__avatar" style="background-image: url('https://placehold.it/96x96');">
                            </div>
                        </noscript>
                        <p class="search-card__heading">Assistant Site Coordinators</p>
                        <p class="search-card__meta">
                            <span class="search-card__meta-item">
                                <svg class="svg-icon svg-icon--deep-medium-navy mrh" role="presentation" ><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="/static/svg/sprite/symbol/sprite.svg#icon--organization"></use></svg> EducationWorks EP
                            </span>
                        </p>
                    </div>

                    <div class="search-card__info">
                        <div class="search-card__description">
                            <p>Both positions include direct activity with students (e.g,, teaching, coaching, leading activities) 15 hours a week during the school year and 30-40 hours a ...</p>
                        </div>
                        <div class="search-card__details-wrap">
                            <p class="search-card__status is-no-status">Not Actively Recruiting</p>
                            <div class="search-card__details">
                                <p class="search-card__detail">
                                    <span class="search-card__detail-label">Focus</span>
                                    <span>Animals</span>
                                </p>
                            </div>
                        </div>
                    </div>
                </div>
            </a>
            <button class="search-card__footer">
                <span class="mrh">
                    View Position
                </span>
                <span><svg class="svg-icon svg-icon--deep-medium-navy" role="img" ><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="/static/svg/sprite/symbol/sprite.svg#icon--angle-right"></use></svg></span>
            </button>
        </div>
    </div>
</div>


Show Markup

<div class="row">
    <div class="small-12 columns text-center">
        <div class="row small-collapse text-left">
            <div class="columns">
                <div class="search-card search-card--listings search-card--actions" data-test="search-card">
                    <a class="search-card__content" href="#">
                        <div class="search-card__status-color is-actively-recruiting"></div>
                        <div class="search-card__inner">
                            <div class="search-card__header">
                                <div class="search-card__avatar search-card__avatar-no-default lazyloaded" data-bg="/media/organizations/organizationprofile/--31ad1bea-52d4-11e8-886f-aad8a8fbbc04_300_300_crop_rgb_c.jpeg" style="background-image: url('https://placehold.it/96x96');">
                                </div>
                                <noscript>
                                    <div class="search-card__avatar search-card__avatar-no-default" style="background-image: url('https://placehold.it/96x96');">
                                    </div>
                                </noscript>
                                <p class="search-card__heading" data-test="search-card-result">
                                    <span class="hide-for-small-only">Literacy Tutors: Pittsburgh</span>
                                    <span class="show-for-small-only">Literacy Tutors: Pittsburgh</span>
                                </p>
                                <p class="search-card__meta">
                                    <span class="search-card__meta-item">
                                <svg class="svg-icon svg-icon--deep-medium-navy mrh" role="presentation" ><use xlink:href="/static/svg/sprite/symbol/sprite.svg#icon--organization"></use></svg>
                                1 A+ Tutoring
                            </span>
                                </p>
                            </div>
                            <div class="search-card__info">
                                <div class="search-card__description">
                                    <p class="hide-for-small-only">Students in need of the most intensive support are referred to small-group tutoring with an AmeriCorps Tutor. Groups of 4-5 students meet daily for 30 minutes, and stay together throughout the school year, allowing students the time they need to ...</p>
                                    <p class="show-for-small-only">Students in need of the most intensive support are referred to small-group tutoring with an AmeriCorps Tutor. Groups of 4-5 students meet ...</p>
                                </div>
                                <div class="search-card__details-wrap">
                                    <p class="search-card__status is-actively-recruiting">Actively Recruiting</p>
                                    <div class="search-card__status-wrapper ">
                                        <div class="search-card__details">
                                            <p class="search-card__detail location">
                                                <span class="search-card__detail-label">Location</span> <span>Pittsburgh, PA</span>
                                            </p>
                                            <p class="search-card__detail focus-area__top">
                                                <span class="search-card__detail-label">Focus</span> <span>Education &amp; Youth</span>
                                            </p>
                                            <p class="search-card__detail">
                                                <span class="search-card__detail-label">Duration</span>
                                                <span class="search-card__detail--mdy">Sept. 10, 2018 - June 28, 2019</span>
                                                <span class="sy-hide search-card__detail--my">Sep 2018 - Jun 2019</span>
                                            </p>
                                            <p class="search-card__detail deadline">
                                                <span class="search-card__detail-label">Deadline</span> Aug. 31, 2018
                                            </p>
                                            <p class="search-card__detail focus-area__bottom">
                                                <span class="search-card__detail-label">Focus area</span>
                                                <span>Education &amp; Youth</span>
                                            </p>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </a>
                    <div class="search-card__footer--buttons">
                        <div class="search-card__button-group search-card__button-group--draft">
                            <button class="search-card__button search-card__button--secondary">
                                <svg class="svg-icon svg-icon--deep-medium-navy" role="presentation">
                                    <use xlink:href="/static/svg/sprite/symbol/sprite.svg#icon--trash"></use>
                                </svg>
                                <span>Delete</span>
                            </button>
                            <button class="search-card__button">
                                <svg class="svg-icon svg-icon--white" role="presentation">
                                    <use xlink:href="/static/svg/sprite/symbol/sprite.svg#icon--pencil"></use>
                                </svg>
                                <span>Continue Applying</span>
                            </button>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
<!-- MOBILE/COMPACT -->
<div class="row small-collapse">
    <div class="columns small-12 medium-4">
        <div class="search-card search-card--compact search-card--listings search-card--actions" data-test="search-card">
            <a class="search-card__content" href="#">
                <div class="search-card__status-color is-actively-recruiting"></div>
                <div class="search-card__inner">
                    <div class="search-card__header">
                        <div class="search-card__avatar search-card__avatar-no-default lazyloaded" data-bg="/media/organizations/organizationprofile/--31ad1bea-52d4-11e8-886f-aad8a8fbbc04_300_300_crop_rgb_c.jpeg" style="background-image: url('https://placehold.it/96x96');">
                        </div>
                        <noscript>
                            <div class="search-card__avatar search-card__avatar-no-default" style="background-image: url('https://placehold.it/96x96');">
                            </div>
                        </noscript>
                        <p class="search-card__heading" data-test="search-card-result">
                            <span class="hide-for-small-only">Literacy Tutors: Pittsburgh</span>
                            <span class="show-for-small-only">Literacy Tutors: Pittsburgh</span>
                        </p>
                        <p class="search-card__meta">
                            <span class="search-card__meta-item">
                        <svg class="svg-icon svg-icon--deep-medium-navy mrh" role="presentation" ><use xlink:href="/static/svg/sprite/symbol/sprite.svg#icon--organization"></use></svg>
                        1 A+ Tutoring
                    </span>
                        </p>
                    </div>
                    <div class="search-card__info">
                        <div class="search-card__description">
                            <p class="hide-for-small-only">Students in need of the most intensive support are referred to small-group tutoring with an AmeriCorps Tutor. Groups of 4-5 students meet daily for 30 minutes, and stay together throughout the school year, allowing students the time they need to ...</p>
                            <p class="show-for-small-only">Students in need of the most intensive support are referred to small-group tutoring with an AmeriCorps Tutor. Groups of 4-5 students meet ...</p>
                        </div>
                        <div class="search-card__details-wrap">
                            <p class="search-card__status is-actively-recruiting">Actively Recruiting</p>
                            <div class="search-card__status-wrapper ">
                                <div class="search-card__details">
                                    <p class="search-card__detail location">
                                        <span class="search-card__detail-label">Location</span> <span>Pittsburgh, PA</span>
                                    </p>
                                    <p class="search-card__detail focus-area__top">
                                        <span class="search-card__detail-label">Focus</span> <span>Education &amp; Youth</span>
                                    </p>
                                    <p class="search-card__detail">
                                        <span class="search-card__detail-label">Duration</span>
                                        <span class="search-card__detail--mdy">Sept. 10, 2018 - June 28, 2019</span>
                                        <span class="sy-hide search-card__detail--my">Sep 2018 - Jun 2019</span>
                                    </p>
                                    <p class="search-card__detail deadline">
                                        <span class="search-card__detail-label">Deadline</span> Aug. 31, 2018
                                    </p>
                                    <p class="search-card__detail focus-area__bottom">
                                        <span class="search-card__detail-label">Focus area</span>
                                        <span>Education &amp; Youth</span>
                                    </p>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </a>
            <div class="search-card__footer--buttons">
                <div class="search-card__button-group search-card__button-group--draft">
                    <button class="search-card__button search-card__button--secondary" style="height: 60px">
                        <svg class="svg-icon svg-icon--deep-medium-navy" role="presentation">
                            <use xlink:href="/static/svg/sprite/symbol/sprite.svg#icon--trash"></use>
                        </svg>
                        <span>Delete</span>
                    </button>
                    <button class="search-card__button" style="height: 60px">
                        <svg class="svg-icon svg-icon--white" role="presentation">
                            <use xlink:href="/static/svg/sprite/symbol/sprite.svg#icon--pencil"></use>
                        </svg>
                        <span>Continue Applying</span>
                    </button>
                </div>
            </div>
        </div>
    </div>
</div>


Show Markup

<div class="row">
    <div class="small-12 columns text-center">
        <div class="row small-collapse text-left">
            <div class="columns">
                <div class="search-card search-card--listings search-card--actions" data-test="search-card">
                    <a class="search-card__content" href="#">
                        <div class="search-card__status-color is-closed"></div>
                        <div class="search-card__inner">
                            <div class="search-card__header">
                                <div class="search-card__avatar search-card__avatar-no-default lazyloaded" data-bg="/media/organizations/organizationprofile/--31ad1bea-52d4-11e8-886f-aad8a8fbbc04_300_300_crop_rgb_c.jpeg" style="background-image: url('https://placehold.it/96x96');">
                                </div>
                                <noscript>
                                    <div class="search-card__avatar search-card__avatar-no-default" style="background-image: url('https://placehold.it/96x96');">
                                    </div>
                                </noscript>
                                <p class="search-card__heading" data-test="search-card-result">
                                    <span class="hide-for-small-only">Literacy Tutors: Pittsburgh</span>
                                    <span class="show-for-small-only">Literacy Tutors: Pittsburgh</span>
                                </p>
                                <p class="search-card__meta">
                                    <span class="search-card__meta-item">
                                <svg class="svg-icon svg-icon--deep-medium-navy mrh" role="presentation" ><use xlink:href="/static/svg/sprite/symbol/sprite.svg#icon--organization"></use></svg>
                                1 A+ Tutoring
                            </span>
                                </p>
                            </div>
                            <div class="search-card__info">
                                <div class="search-card__description">
                                    <p class="hide-for-small-only">Students in need of the most intensive support are referred to small-group tutoring with an AmeriCorps Tutor. Groups of 4-5 students meet daily for 30 minutes, and stay together throughout the school year, allowing students the time they need to ...</p>
                                    <p class="show-for-small-only">Students in need of the most intensive support are referred to small-group tutoring with an AmeriCorps Tutor. Groups of 4-5 students meet ...</p>
                                </div>
                                <div class="search-card__details-wrap">
                                    <p class="search-card__status is-closed">Closed</p>
                                    <div class="search-card__status-wrapper ">
                                        <div class="search-card__details">
                                            <p class="search-card__detail location">
                                                <span class="search-card__detail-label">Location</span> <span>Pittsburgh, PA</span>
                                            </p>
                                            <p class="search-card__detail focus-area__top">
                                                <span class="search-card__detail-label">Focus</span> <span>Education &amp; Youth</span>
                                            </p>
                                            <p class="search-card__detail">
                                                <span class="search-card__detail-label">Duration</span>
                                                <span class="search-card__detail--mdy">Sept. 10, 2018 - June 28, 2019</span>
                                                <span class="sy-hide search-card__detail--my">Sep 2018 - Jun 2019</span>
                                            </p>
                                            <p class="search-card__detail focus-area__bottom">
                                                <span class="search-card__detail-label">Focus area</span>
                                                <span>Education &amp; Youth</span>
                                            </p>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </a>
                    <div class="search-card__footer--buttons">
                        <div class="search-card__button-group search-card__button-group--draft">
                            <button class="search-card__button search-card__button--secondary">
                                <svg class="svg-icon svg-icon--deep-medium-navy" role="presentation">
                                    <use xlink:href="/static/svg/sprite/symbol/sprite.svg#icon--trash"></use>
                                </svg>
                                <span>Delete</span>
                            </button>
                            <button class="search-card__button button--disabled">
                                <svg class="svg-icon svg-icon--black" role="presentation">
                                    <use xlink:href="/static/svg/sprite/symbol/sprite.svg#icon--pencil-strike"></use>
                                </svg>
                                <span>Deadline Passed</span>
                            </button>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
<!-- MOBILE/COMPACT -->
<div class="row small-collapse">
    <div class="columns small-12 medium-4">
        <div class="search-card search-card--compact search-card--listings search-card--actions" data-test="search-card">
            <a class="search-card__content" href="#">
                <div class="search-card__status-color is-closed"></div>
                <div class="search-card__inner">
                    <div class="search-card__header">
                        <div class="search-card__avatar search-card__avatar-no-default lazyloaded" data-bg="/media/organizations/organizationprofile/--31ad1bea-52d4-11e8-886f-aad8a8fbbc04_300_300_crop_rgb_c.jpeg" style="background-image: url('https://placehold.it/96x96');">
                        </div>
                        <noscript>
                            <div class="search-card__avatar search-card__avatar-no-default" style="background-image: url('https://placehold.it/96x96');">
                            </div>
                        </noscript>
                        <p class="search-card__heading" data-test="search-card-result">
                            <span class="hide-for-small-only">Literacy Tutors: Pittsburgh</span>
                            <span class="show-for-small-only">Literacy Tutors: Pittsburgh</span>
                        </p>
                        <p class="search-card__meta">
                            <span class="search-card__meta-item">
                        <svg class="svg-icon svg-icon--deep-medium-navy mrh" role="presentation" ><use xlink:href="/static/svg/sprite/symbol/sprite.svg#icon--organization"></use></svg>
                        1 A+ Tutoring
                    </span>
                        </p>
                    </div>
                    <div class="search-card__info">
                        <div class="search-card__description">
                            <p class="hide-for-small-only">Students in need of the most intensive support are referred to small-group tutoring with an AmeriCorps Tutor. Groups of 4-5 students meet daily for 30 minutes, and stay together throughout the school year, allowing students the time they need to ...</p>
                            <p class="show-for-small-only">Students in need of the most intensive support are referred to small-group tutoring with an AmeriCorps Tutor. Groups of 4-5 students meet ...</p>
                        </div>
                        <div class="search-card__details-wrap">
                            <p class="search-card__status is-closed">Closed</p>
                            <div class="search-card__status-wrapper ">
                                <div class="search-card__details">
                                    <p class="search-card__detail location">
                                        <span class="search-card__detail-label">Location</span> <span>Pittsburgh, PA</span>
                                    </p>
                                    <p class="search-card__detail focus-area__top">
                                        <span class="search-card__detail-label">Focus</span> <span>Education &amp; Youth</span>
                                    </p>
                                    <p class="search-card__detail">
                                        <span class="search-card__detail-label">Duration</span>
                                        <span class="search-card__detail--mdy">Sept. 10, 2018 - June 28, 2019</span>
                                        <span class="sy-hide search-card__detail--my">Sep 2018 - Jun 2019</span>
                                    </p>
                                    <p class="search-card__detail focus-area__bottom">
                                        <span class="search-card__detail-label">Focus area</span>
                                        <span>Education &amp; Youth</span>
                                    </p>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </a>
            <div class="search-card__footer--buttons">
                <div class="search-card__button-group search-card__button-group--draft">
                    <button class="search-card__button search-card__button--secondary" style="height: 60px">
                        <svg class="svg-icon svg-icon--deep-medium-navy" role="presentation">
                            <use xlink:href="/static/svg/sprite/symbol/sprite.svg#icon--trash"></use>
                        </svg>
                        <span>Delete</span>
                    </button>
                    <button class="search-card__button button--disabled" style="height: 60px">
                        <svg class="svg-icon svg-icon--black" role="presentation">
                            <use xlink:href="/static/svg/sprite/symbol/sprite.svg#icon--pencil-strike"></use>
                        </svg>
                        <span>Deadline Passed</span>
                    </button>
                </div>
            </div>
        </div>
    </div>
</div>


25.9Application Card

Application search cards extend the base card template, but includes an Action Footer. The action footer includes one dropdown button, that opens a menu for all relevant actions.

The “Actions” menu includes view application, message host, cancel application, and next steps. If next steps have been defined by the host org, clicking on the "Next Steps" menu item, will make the Next Steps modal appear with the link for more info (if defined). Otherwise, the default text and a "Message Host" button appear.

Show Markup

<div class="row">
    <div class="small-12 columns text-center">
        <div class="row small-collapse text-left">
            <div class="columns">
                <div class="search-card search-card--listings search-card--actions" data-test="search-card">
                    <a class="search-card__content" href="#">
                        <div class="search-card__status-color is-actively-recruiting"></div>
                        <div class="search-card__inner">
                            <div class="search-card__header">
                                <div class="search-card__avatar search-card__avatar-no-default lazyloaded" data-bg="/media/organizations/organizationprofile/--31ad1bea-52d4-11e8-886f-aad8a8fbbc04_300_300_crop_rgb_c.jpeg" style="background-image: url('https://placehold.it/96x96');">
                                </div>
                                <noscript>
                                    <div class="search-card__avatar search-card__avatar-no-default" style="background-image: url('https://placehold.it/96x96');">
                                    </div>
                                </noscript>
                                <p class="search-card__heading" data-test="search-card-result">
                                    <span class="hide-for-small-only">Literacy Tutors: Pittsburgh</span>
                                    <span class="show-for-small-only">Literacy Tutors: Pittsburgh</span>
                                </p>
                                <p class="search-card__meta">
                                    <span class="search-card__meta-item">
                                <svg class="svg-icon svg-icon--deep-medium-navy mrh" role="presentation" ><use xlink:href="/static/svg/sprite/symbol/sprite.svg#icon--organization"></use></svg>
                                1 A+ Tutoring
                            </span>
                                </p>
                            </div>
                            <div class="search-card__info">
                                <div class="search-card__description">
                                    <p class="hide-for-small-only">Students in need of the most intensive support are referred to small-group tutoring with an AmeriCorps Tutor. Groups of 4-5 students meet daily for 30 minutes, and stay together throughout the school year, allowing students the time they need to ...</p>
                                    <p class="show-for-small-only">Students in need of the most intensive support are referred to small-group tutoring with an AmeriCorps Tutor. Groups of 4-5 students meet ...</p>
                                </div>
                                <div class="search-card__details-wrap">
                                    <p class="search-card__status is-actively-recruiting">Actively Recruiting</p>
                                    <div class="search-card__status-wrapper ">
                                        <div class="search-card__details">
                                            <p class="search-card__detail location">
                                                <span class="search-card__detail-label">Location</span> <span>Pittsburgh, PA</span>
                                            </p>
                                            <p class="search-card__detail focus-area__top">
                                                <span class="search-card__detail-label">Focus</span> <span>Education &amp; Youth</span>
                                            </p>
                                            <p class="search-card__detail">
                                                <span class="search-card__detail-label">Duration</span>
                                                <span class="search-card__detail--mdy">Sept. 10, 2018 - June 28, 2019</span>
                                                <span class="sy-hide search-card__detail--my">Sep 2018 - Jun 2019</span>
                                            </p>
                                            <p class="search-card__detail deadline">
                                                <span class="search-card__detail-label">Deadline</span> Aug. 31, 2018
                                            </p>
                                            <p class="search-card__detail focus-area__bottom">
                                                <span class="search-card__detail-label">Focus area</span>
                                                <span>Education &amp; Youth</span>
                                            </p>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </a>
                    <div class="search-card__footer--buttons">
                        <p class="search-card__footer-text">
                            Applied on Aug. 14, 2018
                        </p>
                        <form class="mb0">
                            <input type="hidden">
                            <div class="search-card__button-group search-card__button-group--application-actions">
                                <button type="button" class="search-card__button search-card__button js-open-dropdown search-card__button--full-width"
                                   data-toggle="drop-application-0">
                                    <svg class="svg-icon svg-icon--white svg-icon--large" role="presentation" >
                                        <use xlink:href="/static/svg/sprite/symbol/sprite.svg#icon--binoculars"></use>
                                    </svg>
                                    <span class="mrh">Actions</span>
                                    <svg class="svg-icon svg-icon--white" role="presentation" >
                                        <use xlink:href="/static/svg/sprite/symbol/sprite.svg#icon--angle-down"></use>
                                    </svg>
                                </button>
                                <div id="drop-application-0"
                                     class="dropdown-pane small"
                                     data-position="top"
                                     data-alignment="right"
                                     data-close-on-click="true"
                                     data-dropdown>
                                        <ul class="applications-dropdown">
                                            <li class="dropdown-pane__list-item">
                                                <a href="#">
                                                    <svg class="svg-icon svg-icon--deep-medium-navy svg-icon--large" role="presentation" >
                                                        <use xlink:href="/static/svg/sprite/symbol/sprite.svg#icon--eye"></use>
                                                    </svg>
                                                    <span>View Application</span>
                                                </a>
                                            </li>
                                            <li class="dropdown-pane__list-item">
                                                <a href="#" class="js-next-steps ga-card-open-next-steps"
                                                   data-card-index-for-modal="0" data-test="next-steps-button">
                                                        <svg class="svg-icon svg-icon--deep-medium-navy svg-icon--large" role="presentation" >
                                                            <use xlink:href="/static/svg/sprite/symbol/sprite.svg#icon--newspaper"></use>
                                                        </svg>
                                                        <span>Next Steps</span>
                                                </a>
                                            </li>
                                            <li class="dropdown-pane__list-item">
                                                <a href="#">
                                                    <svg class="svg-icon svg-icon--deep-medium-navy svg-icon--large" role="presentation" >
                                                        <use xlink:href="/static/svg/sprite/symbol/sprite.svg#icon--message"></use>
                                                    </svg>
                                                    <span>Message Host</span>
                                                </a>
                                            </li>
                                            <li class="dropdown-pane__list-item">
                                                <a href="#" class="js-cancel-application">
                                                    <svg class="svg-icon svg-icon--deep-medium-navy svg-icon--large" role="presentation" >
                                                        <use xlink:href="/static/svg/sprite/symbol/sprite.svg#icon--cancel-circle"></use>
                                                    </svg>
                                                    <span>Cancel Application</span>
                                                </a>
                                            </li>
                                        </ul>
                                </div>
                            </div>
                        </form>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
<!-- MOBILE/COMPACT -->
<div class="row small-collapse">
    <div class="columns small-12 medium-4">
        <div class="search-card search-card--compact search-card--listings search-card--actions" data-test="search-card">
            <a class="search-card__content" href="#">
                <div class="search-card__status-color is-actively-recruiting"></div>
                <div class="search-card__inner">
                    <div class="search-card__header">
                        <div class="search-card__avatar search-card__avatar-no-default lazyloaded" data-bg="/media/organizations/organizationprofile/--31ad1bea-52d4-11e8-886f-aad8a8fbbc04_300_300_crop_rgb_c.jpeg" style="background-image: url('https://placehold.it/96x96');">
                        </div>
                        <noscript>
                            <div class="search-card__avatar search-card__avatar-no-default" style="background-image: url('https://placehold.it/96x96');">
                            </div>
                        </noscript>
                        <p class="search-card__heading" data-test="search-card-result">
                            <span class="hide-for-small-only">Literacy Tutors: Pittsburgh</span>
                            <span class="show-for-small-only">Literacy Tutors: Pittsburgh</span>
                        </p>
                        <p class="search-card__meta">
                            <span class="search-card__meta-item">
                        <svg class="svg-icon svg-icon--deep-medium-navy mrh" role="presentation" ><use xlink:href="/static/svg/sprite/symbol/sprite.svg#icon--organization"></use></svg>
                        1 A+ Tutoring
                    </span>
                        </p>
                    </div>
                    <div class="search-card__info">
                        <div class="search-card__description">
                            <p class="hide-for-small-only">Students in need of the most intensive support are referred to small-group tutoring with an AmeriCorps Tutor. Groups of 4-5 students meet daily for 30 minutes, and stay together throughout the school year, allowing students the time they need to ...</p>
                            <p class="show-for-small-only">Students in need of the most intensive support are referred to small-group tutoring with an AmeriCorps Tutor. Groups of 4-5 students meet ...</p>
                        </div>
                        <div class="search-card__details-wrap">
                            <p class="search-card__status is-actively-recruiting">Actively Recruiting</p>
                            <div class="search-card__status-wrapper ">
                                <div class="search-card__details">
                                    <p class="search-card__detail location">
                                        <span class="search-card__detail-label">Location</span> <span>Pittsburgh, PA</span>
                                    </p>
                                    <p class="search-card__detail focus-area__top">
                                        <span class="search-card__detail-label">Focus</span> <span>Education &amp; Youth</span>
                                    </p>
                                    <p class="search-card__detail">
                                        <span class="search-card__detail-label">Duration</span>
                                        <span class="search-card__detail--mdy">Sept. 10, 2018 - June 28, 2019</span>
                                        <span class="sy-hide search-card__detail--my">Sep 2018 - Jun 2019</span>
                                    </p>
                                    <p class="search-card__detail deadline">
                                        <span class="search-card__detail-label">Deadline</span> Aug. 31, 2018
                                    </p>
                                    <p class="search-card__detail focus-area__bottom">
                                        <span class="search-card__detail-label">Focus area</span>
                                        <span>Education &amp; Youth</span>
                                    </p>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </a>
            <div class="search-card__footer--buttons">
                <p class="search-card__footer-text">
                    Applied on Aug. 14, 2018
                </p>
                <form class="mb0" style="width: 100%;">
                    <input type="hidden">
                    <div class="search-card__button-group search-card__button-group--application-actions">
                        <button type="button" class="search-card__button search-card__button js-open-dropdown search-card__button--full-width"
                           data-toggle="drop-application-1">
                            <svg class="svg-icon svg-icon--white svg-icon--large" role="presentation" >
                                <use xlink:href="/static/svg/sprite/symbol/sprite.svg#icon--binoculars"></use>
                            </svg>
                            <span class="mrh">Actions</span>
                            <svg class="svg-icon svg-icon--white" role="presentation" >
                                <use xlink:href="/static/svg/sprite/symbol/sprite.svg#icon--angle-down"></use>
                            </svg>
                        </button>
                        <div id="drop-application-1"
                             class="dropdown-pane small btns-example-center"
                             data-position="top"
                             data-alignment="right"
                             data-close-on-click="true"
                             data-dropdown>
                                <ul class="applications-dropdown">
                                    <li class="dropdown-pane__list-item">
                                        <a href="#">
                                            <svg class="svg-icon svg-icon--deep-medium-navy svg-icon--large" role="presentation" >
                                                <use xlink:href="/static/svg/sprite/symbol/sprite.svg#icon--eye"></use>
                                            </svg>
                                            <span>View Application</span>
                                        </a>
                                    </li>
                                    <li class="dropdown-pane__list-item">
                                        <a href="#" class="js-next-steps ga-card-open-next-steps"
                                           data-card-index-for-modal="0" data-test="next-steps-button">
                                            <svg class="svg-icon svg-icon--deep-medium-navy svg-icon--large" role="presentation" >
                                                <use xlink:href="/static/svg/sprite/symbol/sprite.svg#icon--newspaper"></use>
                                            </svg>
                                            <span>Next Steps</span>
                                        </a>
                                    </li>
                                    <li class="dropdown-pane__list-item">
                                        <a href="#">
                                            <svg class="svg-icon svg-icon--deep-medium-navy svg-icon--large" role="presentation" >
                                                <use xlink:href="/static/svg/sprite/symbol/sprite.svg#icon--message"></use>
                                            </svg>
                                            <span>Message Host</span>
                                        </a>
                                    </li>
                                    <li class="dropdown-pane__list-item">
                                        <a href="#" class="js-cancel-application">
                                            <svg class="svg-icon svg-icon--deep-medium-navy svg-icon--large" role="presentation" >
                                                <use xlink:href="/static/svg/sprite/symbol/sprite.svg#icon--cancel-circle"></use>
                                            </svg>
                                            <span>Cancel Application</span>
                                        </a>
                                    </li>
                                </ul>
                        </div>
                    </div>
                </form>
            </div>
        </div>
    </div>
    <div class="columns small-12 medium-4">
        <img src="/styleguide/images/search-cards/application-mobile-dropdown.png" alt="">
    </div>
</div>

<style type="text/css">
    .btns-example-center {
        left: 0px !important; 
        right: 0px; 
        margin: auto;
    }
</style>

25.10Candidate Card

Candidate cards have a search card label within the card header if the candidate has viewed the application with the text "Viewed Application". These are only available to Organization Admins in the "Corps Members" view.

Show Markup

<div class="row small-collapse">
    <div class="columns small-12 search-card search-card--corps-members search-card--actions">
        <a class="search-card__content" href="/organizations/21/dashboard/candidates/300/">
            <div class="search-card__status-color is-searching"></div>
            <div class="search-card__inner">
                <div class="search-card__header">
                    <div class="search-card__avatar search-card__avatar-no-default lazyloaded" data-bg="/static/images/defaults/avatar-cm-blue.png" style="background-image: url('/static/images/defaults/avatar-cm-blue.png');"></div>
                    <noscript>
                        <div class="search-card__avatar search-card__avatar-no-default" style="background-image: url(/static/images/defaults/avatar-cm-blue.png);"></div>
                    </noscript>
                    <div class="search-card__label search-card__label--slot">
                        Viewed Application
                    </div>
                    <p class="search-card__heading" data-test="search-card-result">
                        <span class="hide-for-small-only">Alex Smith</span>
                        <span class="show-for-small-only">Alex Smith</span>
                    </p>
                    <p class="search-card__meta">
                        <span class="search-card__meta-item">
                            <svg class="svg-icon svg-icon--deep-medium-navy" role="presentation" ><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="/static/svg/sprite/symbol/sprite.svg#icon--pointer"></use></svg>
                            Schenectady, NY
                        </span>
                    </p>
                </div>
                <div class="search-card__info">
                    <div class="search-card__details-wrap">
                        <div class="search-card__status-wrapper ">
                            <div class="search-card__status-block">
                                <p class="search-card__status is-searching">Actively Searching</p>
                                <div class="search-card__details">
                                    <p class="search-card__detail">
                                        <span class="search-card__detail-label">Start Date</span>
                                        <span>Available Indefinitely</span>
                                    </p>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </a>
        <div class="search-card__footer--buttons">
            <div class="search-card__footer--data row">
                <div class="columns">
                    <div class="chip chip--small">
                        <div class="chip__dot" style="background-color: #ff0000"></div><span class="chip__title">Emailed</span>
                    </div>
                    <span class="chips-additional-data">
                        + <span title="Screened; Called; Interviewed">3 more</span>
                    </span>
                </div>
                <div class="columns">
                    <p class="search-card__footer-text">
                        Applied to Elementary School Literacy Tutors
                    </p>
                </div>
            </div>
            <form class="mb0" action="" method="post">
                <div class="search-card__button-group">
                    <button class="search-card__button search-card__button--secondary" name="delete" type="submit" value="583">
                        <svg class="svg-icon svg-icon--deep-medium-navy" role="presentation" ><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="/static/svg/sprite/symbol/sprite.svg#icon--cancel-circle"></use></svg>
                        <span>Decline</span>
                    </button>
                    <a href="#" class="search-card__button">
                        <svg class="svg-icon svg-icon--white" role="presentation" ><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="/static/svg/sprite/symbol/sprite.svg#icon--check-open-circle"></use></svg>
                        Enroll
                    </a>
                </div>
            </form>
        </div>
    </div>
</div>

<!-- MOBILE/COMPACT -->
<div class="row small-collapse">
    <div class="columns small-12 medium-4">
        <div class="search-card--compact search-card search-card--corps-members search-card--actions" data-test="search-card">
            <a class="search-card__content" href="/organizations/21/dashboard/candidates/300/">
                <div class="search-card__status-color is-searching"></div>
                <div class="search-card__inner">
                    <div class="search-card__header">
                        <div class="search-card__avatar search-card__avatar-no-default lazyloaded" data-bg="/static/images/defaults/avatar-cm-blue.png" style="background-image: url(&quot;/static/images/defaults/avatar-cm-blue.png&quot;);"></div>
                        <noscript>
                            &lt;div class="search-card__avatar search-card__avatar-no-default" style="background-image: url(/static/images/defaults/avatar-cm-blue.png);"&gt;&lt;/div&gt;
                        </noscript>
                        <div class="search-card__label search-card__label--slot">
                            <span>Viewed App</span>
                        </div>
                        <p class="search-card__heading" data-test="search-card-result">
                            <span class="hide-for-small-only">Alex Smith</span>
                            <span class="show-for-small-only">Alex Smith</span>
                        </p>
                        <p class="search-card__meta mb0">
                            <span class="search-card__meta-item">
                                <svg class="svg-icon svg-icon--deep-medium-navy" role="presentation" ><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="/static/svg/sprite/symbol/sprite.svg#icon--pointer"></use></svg>
                                Schenectady, NY
                            </span>
                        </p>
                    </div>
                    <div class="search-card__info">
                        <div class="search-card__details-wrap">

                            <div class="search-card__status-wrapper ">

                                <div class="search-card__status-block">
                                    <p class="search-card__status is-searching">Actively Searching</p>
                                    <div class="search-card__details">
                                        <p class="search-card__detail">
                                            <span class="search-card__detail-label">Start Date</span>
                                            <span>Available Indefinitely</span>
                                        </p>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </a>
            <div class="search-card__footer--buttons">
                <div class="search-card__footer--data row" style="border-top: 1px solid #e0e6f0; padding-top: 1.25rem; margin-left: 14px !important; margin-right: 18px !important;">
                    <div class="columns">
                        <div class="chip chip--small">
                            <div class="chip__dot" style="background-color: #ff0000"></div><span class="chip__title">Emailed</span>
                        </div>
                        <span class="chips-additional-data">
                            + <span title="Screened; Called; Interviewed">3 more</span>
                        </span>
                    </div>
                    <div class="columns">
                        <p class="search-card__footer-text" style="margin-left: 0px; border-top: 0px; padding-top: 0rem;">
                            Applied to Elementary School Literacy Tutors
                        </p>
                    </div>
                </div>
                <div class="search-card__button-group">
                    <form class="mb0 search-card__button--half-width" action="#" method="post">
                        <button class="search-card__button search-card__button--secondary search-card__button--full-width js-apply test-apply" type="submit" tabindex="0">
                            <svg class="svg-icon svg-icon--deep-medium-navy" role="presentation" ><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="/static/svg/sprite/symbol/sprite.svg#icon--cancel-circle"></use></svg>
                            <span>Decline</span>
                        </button>
                    </form>
                    <form class="mb0 search-card__button--half-width" action="#" method="post">
                        <button class="search-card__button search-card__button--full-width js-apply test-apply application-confirmation" type="submit" tabindex="0">
                            <svg class="svg-icon svg-icon--white" role="presentation" ><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="/static/svg/sprite/symbol/sprite.svg#icon--check-open-circle"></use></svg>
                            Enroll
                        </button>
                    </form>
                </div>
            </div>
        </div>
    </div>
</div>


25.11Recommendation Card

Recommendation search cards extend the base card template, but includes an Action Footer with buttons for the user to take an action i.e. Message, Enroll, Decline.

Only one status color can show at a time and the first relevant status that applies to the position card determines the color displayed.

  • Green: Actively Recruiting
  • Blue: Not Actively Recruiting
Show Markup

<div class="row">
    <div class="small-12 columns text-center">
        <div class="row small-collapse text-left">
            <div class="columns">
                <div class="search-card search-card--listings search-card--actions">
                    <a class="search-card__content" href="#" tabindex="0">
                        <div class="search-card__status-color is-actively-recruiting"></div>
                        <div class="search-card__inner">
                            <div class="search-card__header">
                                <div class="search-card__avatar search-card__avatar-no-default lazyloaded" data-bg="https://placehold.it/96x96" style="background-image: url('https://placehold.it/96x96');"></div>
                                <p class="search-card__heading">
                                    <span class="hide-for-small-only">Elementary School Literacy Tutors</span>
                                    <span class="show-for-small-only">Elementary School Literacy Tutors</span>
                                </p>
                                <p class="search-card__meta">
                                    <span class="search-card__meta-item">
                                        <svg class="svg-icon svg-icon--deep-medium-navy mrh" role="presentation" ><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="/static/svg/sprite/symbol/sprite.svg#icon--organization"></use></svg>
                                        1 A+ Tutoring
                                    </span>
                                </p>
                            </div>
                            <div class="search-card__info">
                                <div class="search-card__description">
                                    <p>Students in need of the most intensive support are referred to small-group tutoring with an AmeriCorps Tutor. Groups of 4-5 students meet daily for 30 minutes, and stay together throughout the school year, allowing students the time they need to ...</p>
                                </div>
                                <div class="search-card__details-wrap">
                                    <p class="search-card__status is-actively-recruiting">Actively Recruiting</p>
                                    <div class="search-card__status-wrapper ">
                                        <div class="search-card__details">
                                            <p class="search-card__detail">
                                                <span class="search-card__detail-label">Location</span> <span>Rancho Cucamonga, CA</span>
                                            </p>
                                            <p class="search-card__detail">
                                                <span class="search-card__detail-label">Focus</span> <span>Education &amp; Youth</span>
                                            </p>
                                            <p class="search-card__detail">
                                                <span class="search-card__detail-label">Duration</span>
                                                <span>July 21, 2017 - July 6, 2018</span>
                                            </p>
                                            <p class="search-card__detail">
                                                <span class="search-card__detail-label">Deadline</span>June 1, 2017
                                            </p>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </a>
                    <div class="search-card__footer--buttons">
                        <p class="search-card__footer-text">
                            Devvy McDeverson invited you to apply.
                        </p>
                        <div class="search-card__button-group">
                            <a class="search-card__button search-card__button--secondary" title="Message Host" href="#" tabindex="0">
                                <svg class="svg-icon svg-icon--deep-medium-navy" role="presentation" ><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="/static/svg/sprite/symbol/sprite.svg#icon--message"></use></svg>
                                <span>Message Host</span>
                            </a>
                            <form class="mb0 search-card__button--half-width" action="#" method="post">
                                <button class="search-card__button search-card__button--secondary search-card__button--full-width js-apply test-apply" title="Decline 1 A+ Tutoring's listing recommendation." type="submit" tabindex="0">
                                    <svg class="svg-icon svg-icon--deep-medium-navy" role="presentation" ><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="/static/svg/sprite/symbol/sprite.svg#icon--cancel-circle"></use></svg>
                                    <span>Decline</span>
                                </button>
                            </form>
                            <form class="mb0 search-card__button--half-width" action="#" method="post">
                                <button class="search-card__button search-card__button--full-width js-apply test-apply application-confirmation" title="Apply for 1 A+ Tutoring's listing." type="submit" tabindex="0">
                                    <svg class="svg-icon svg-icon--white" role="presentation" ><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="/static/svg/sprite/symbol/sprite.svg#icon--check-open-circle"></use></svg>
                                    Apply
                                </button>
                            </form>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

<!-- MOBILE/COMPACT -->
<div class="row small-collapse">
    <div class="columns small-12 medium-4">
        <div class="search-card search-card--compact search-card--listings search-card--actions">
            <a class="search-card__content" href="#" tabindex="0">
                <div class="search-card__status-color is-actively-recruiting"></div>
                <div class="search-card__inner">
                    <div class="search-card__header">
                        <div class="search-card__avatar search-card__avatar-no-default lazyloaded" data-bg="https://placehold.it/96x96" style="background-image: url('https://placehold.it/96x96');"></div>
                        <p class="search-card__heading">
                            <span class="hide-for-small-only">Elementary School Literacy Tutors</span>
                            <span class="show-for-small-only">Elementary School Literacy Tutors</span>
                        </p>
                        <p class="search-card__meta">
                            <span class="search-card__meta-item">
                                <svg class="svg-icon svg-icon--deep-medium-navy mrh" role="presentation" ><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="/static/svg/sprite/symbol/sprite.svg#icon--organization"></use></svg>
                                1 A+ Tutoring
                            </span>
                        </p>
                    </div>
                    <div class="search-card__info">
                        <div class="search-card__description">
                            <p>Students in need of the most intensive support are referred to small-group tutoring with an AmeriCorps Tutor. Groups of 4-5 students meet daily for 30 ...</p>
                        </div>
                        <div class="search-card__details-wrap">
                            <p class="search-card__status is-actively-recruiting">Actively Recruiting</p>
                            <div class="search-card__status-wrapper ">
                                <div class="search-card__details">
                                    <p class="search-card__detail">
                                        <span class="search-card__detail-label">Location</span> <span>Rancho Cucamonga, CA</span>
                                    </p>
                                    <p class="search-card__detail">
                                        <span class="search-card__detail-label">Focus</span> <span>Education &amp; Youth</span>
                                    </p>
                                    <p class="search-card__detail">
                                        <span class="search-card__detail-label">Duration</span>
                                        <span>July 21, 2017 - July 6, 2018</span>
                                    </p>
                                    <p class="search-card__detail">
                                        <span class="search-card__detail-label">Deadline</span>June 1, 2017
                                    </p>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </a>
            <div class="search-card__footer--buttons">
                <p class="search-card__footer-text">
                    Devvy McDeverson invited you to apply.
                </p>
                <div class="search-card__button-group">
                    <a class="search-card__button search-card__button--secondary" title="Message Host" href="#" tabindex="0">
                        <svg class="svg-icon svg-icon--deep-medium-navy" role="presentation" ><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="/static/svg/sprite/symbol/sprite.svg#icon--message"></use></svg>
                        <span>Message Host</span>
                    </a>
                    <form class="mb0 search-card__button--half-width" action="#" method="post">
                        <button class="search-card__button search-card__button--secondary search-card__button--full-width js-apply test-apply" title="Decline 1 A+ Tutoring's listing recommendation." type="submit" tabindex="0">
                            <svg class="svg-icon svg-icon--deep-medium-navy" role="presentation" ><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="/static/svg/sprite/symbol/sprite.svg#icon--cancel-circle"></use></svg>
                            <span>Decline</span>
                        </button>
                    </form>
                    <form class="mb0 search-card__button--half-width" action="#" method="post">
                        <button class="search-card__button search-card__button--full-width js-apply test-apply application-confirmation" title="Apply to 1 A+ Tutoring's listing." type="submit" tabindex="0">
                            <svg class="svg-icon svg-icon--white" role="presentation" ><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="/static/svg/sprite/symbol/sprite.svg#icon--check-open-circle"></use></svg>
                            Apply
                        </button>
                    </form>
                </div>
            </div>
        </div>
    </div>
</div>


25.12Slot Card - CM View

Slot cards have specific information pertinent to a slot within a position. They can have the (optional) action footer which includes a "Download Service Certificate". These cards live in "My Service Year" under the "Past" tab.

Show Markup

<div class="row small-collapse">
    <div class="columns small-12 search-card search-card--positions search-card--actions" data-test="search-card">
        <a class="search-card__content" href="#">
            <div class="search-card__status-color is-no-status"></div>
            <div class="search-card__inner">
                <div class="search-card__header">
                    <div class="search-card__avatar search-card__avatar-no-default lazyloaded" data-bg="https://d2bfxmg9u56x1o.cloudfront.net/media/organizations/pZ87Dn1k--d82b92f2-96e8-11e6-83e8-0af2e193c4e3_250_150_crop_rgb_c.jpg" style="background-image: url(&quot;https://d2bfxmg9u56x1o.cloudfront.net/media/organizations/pZ87Dn1k--d82b92f2-96e8-11e6-83e8-0af2e193c4e3_250_150_crop_rgb_c.jpg&quot;);">
                    </div>
                    <noscript>
                        <div class="search-card__avatar search-card__avatar-no-default"
                             style="background-image: url(https://d2bfxmg9u56x1o.cloudfront.net/media/organizations/pZ87Dn1k--d82b92f2-96e8-11e6-83e8-0af2e193c4e3_250_150_crop_rgb_c.jpg);">
                        </div>
                    </noscript>
                    <p class="search-card__heading" data-test="search-card-result">
                        <span class="hide-for-small-only">AmeriCorps- Certified - Education</span>
                        <span class="show-for-small-only">AmeriCorps- Certified - Education</span>
                    </p>
                    <p class="search-card__meta">
                        <span class="search-card__meta-item">
                            <svg class="svg-icon svg-icon--deep-medium-navy mrh" role="presentation" ><use xlink:href="/static/svg/sprite/symbol/sprite.svg#icon--organization"></use></svg>
                            SYx Testing Organization
                        </span>
                    </p>
                </div>
                <div class="search-card__info">
                <div class="search-card__details-wrap my-sy-position">
                    <div class="search-card__status-wrapper">
                        <div class="search-card__status-block">
                            <p class="search-card__detail">
                                <span class="search-card__detail-label">Start Date</span>
                                <span>August 9, 2015</span>
                            </p>
                            <p class="search-card__detail">
                                <span class="search-card__detail-label">End Date</span>
                                <span>June 27, 2016</span>
                            </p>
                            <p class="search-card__detail">
                                <span class="search-card__detail-label">Service Location</span>
                                <span>Beverly Hills, CA 90210</span>
                            </p>
                        </div>
                        <div class="search-card__status-block">
                            <p class="search-card__detail">
                                <span class="search-card__detail-label">Supervisor</span>
                                <span>Dev McDeve</span>
                            </p>
                            <p class="search-card__detail">
                                <span class="search-card__detail-label">Email</span>
                                <span>devs@serviceyear.org</span>
                            </p>
                        </div>
                    </div>
                </div>
                </div>
            </div>
        </a>
        <div class="search-card__footer--buttons">
            <form class="mb0 js-form-decline-enrollment" action="#" method="post" id="decline-enrollment-form">
                <input type="hidden">
                <div class="search-card__button-group">
                    <a href="#" class="search-card__button search-card__button--full-width mb0" target="_blank">
                        <svg class="svg-icon svg-icon--white" role="presentation" ><use xlink:href="/static/svg/sprite/symbol/sprite.svg#icon--newspaper"></use></svg>
                        Download Service Certificate
                    </a>

                </div>
            </form>
        </div>
    </div>
</div>

<!-- MOBILE/COMPACT -->

<div class="row small-collapse">
    <div class="columns small-12 medium-4">
        <div class="search-card search-card--compact search-card--positions search-card--actions" data-test="search-card">
            <a class="search-card__content" href="#">
                <div class="search-card__status-color is-no-status"></div>
                <div class="search-card__inner">
                    <div class="search-card__header">
                        <div class="search-card__avatar search-card__avatar-no-default lazyloaded" data-bg="https://d2bfxmg9u56x1o.cloudfront.net/media/organizations/pZ87Dn1k--d82b92f2-96e8-11e6-83e8-0af2e193c4e3_250_150_crop_rgb_c.jpg" style="background-image: url(&quot;https://d2bfxmg9u56x1o.cloudfront.net/media/organizations/pZ87Dn1k--d82b92f2-96e8-11e6-83e8-0af2e193c4e3_250_150_crop_rgb_c.jpg&quot;);">
                        </div>
                        <noscript>
                            <div class="search-card__avatar search-card__avatar-no-default"
                                 style="background-image: url(https://d2bfxmg9u56x1o.cloudfront.net/media/organizations/pZ87Dn1k--d82b92f2-96e8-11e6-83e8-0af2e193c4e3_250_150_crop_rgb_c.jpg);">
                            </div>
                        </noscript>
                        <p class="search-card__heading" data-test="search-card-result">
                            <span class="hide-for-small-only">AmeriCorps- Certified - Education</span>
                            <span class="show-for-small-only">AmeriCorps- Certified - Education</span>
                        </p>
                        <p class="search-card__meta">
                            <span class="search-card__meta-item">
                                <svg class="svg-icon svg-icon--deep-medium-navy mrh" role="presentation" ><use xlink:href="/static/svg/sprite/symbol/sprite.svg#icon--organization"></use></svg>
                                SYx Testing Organization
                            </span>
                        </p>
                    </div>
                    <div class="search-card__info">
                    <div class="search-card__details-wrap my-sy-position">
                        <div class="search-card__status-wrapper">
                            <div class="search-card__status-block">
                                <p class="search-card__detail">
                                    <span class="search-card__detail-label">Start Date</span>
                                    <span>August 9, 2015</span>
                                </p>
                                <p class="search-card__detail">
                                    <span class="search-card__detail-label">End Date</span>
                                    <span>June 27, 2016</span>
                                </p>
                                <p class="search-card__detail">
                                    <span class="search-card__detail-label">Service Location</span>
                                    <span>Beverly Hills, CA 90210</span>
                                </p>
                            </div>
                            <div class="search-card__status-block">
                                <p class="search-card__detail">
                                    <span class="search-card__detail-label">Supervisor</span>
                                    <span>Dev McDeve</span>
                                </p>
                                <p class="search-card__detail">
                                    <span class="search-card__detail-label">Email</span>
                                    <span>devs@serviceyear.org</span>
                                </p>
                            </div>
                        </div>
                    </div>
                    </div>
                </div>
            </a>
            <div class="search-card__footer--buttons">
                <form class="mb0 js-form-decline-enrollment" action="#" method="post" id="decline-enrollment-form" style="width: 100%;">
                    <input type="hidden">
                    <div class="search-card__button-group">
                        <a href="#" download="https://d2bfxmg9u56x1o.cloudfront.net/media/certificate/0MBw9J/0MBw9J-certificate.pdf" class="search-card__button search-card__button--full-width mb0" target="_blank">
                            <svg class="svg-icon svg-icon--white" role="presentation" ><use xlink:href="/static/svg/sprite/symbol/sprite.svg#icon--newspaper"></use></svg>
                            Download Service Certificate
                        </a>
                    </div>
                </form>
            </div>
        </div>
    </div>
</div>


25.13Slot Card - Org View

Slot cards have specific information pertinent to a slot within a position. These cards live in the Organization Dashboard under "Exited Corps Members".

Show Markup

<div class="row small-collapse">
    <div class="columns small-12 search-card search-card--corps-members is-alum" data-test="search-card">
        <a class="search-card__content" href="#">
            <div class="search-card__status-color is-served"></div>
            <div class="search-card__inner">
                <div class="search-card__header">
                    <div class="search-card__avatar search-card__avatar-no-default lazyloaded" data-bg="/static/images/defaults/avatar-cm-blue.png" style="background-image: url('/static/images/defaults/avatar-cm-blue.png');"></div>
                    <noscript>
                        <div class="search-card__avatar search-card__avatar-no-default" style="background-image: url(/static/images/defaults/avatar-cm-blue.png);"></div>
                    </noscript>
                    <div class="search-card__flag">
                        <svg class="svg-icon svg-icon--white svg-icon--small" role="img" ><use xlink:href="/static/svg/sprite/symbol/sprite.svg#icon--sy-mark"></use></svg>
                    </div>
                    <p class="search-card__heading" data-test="search-card-result">
                        <span class="hide-for-small-only">Anna Cooper</span>
                        <span class="show-for-small-only">Anna Cooper</span>
                    </p>

                    <p class="search-card__meta">
                        <span class="search-card__meta-item">
                            <svg class="svg-icon svg-icon--deep-medium-navy" role="presentation" ><use xlink:href="/static/svg/sprite/symbol/sprite.svg#icon--pointer"></use></svg>
                            Washington, DC
                        </span>
                        <span class="search-card__meta-item">
                            <svg class="svg-icon svg-icon--deep-medium-navy" role="presentation" ><use xlink:href="/static/svg/sprite/symbol/sprite.svg#icon--envelope"></use></svg>
                            person@serviceyear.org
                        </span>
                        <span class="search-card__meta-item">
                            <svg class="svg-icon svg-icon--deep-medium-navy" role="presentation" ><use xlink:href="/static/svg/sprite/symbol/sprite.svg#icon--phone"></use></svg>
                            5555555555
                        </span>
                    </p>
                </div>
                <div class="search-card__info">
                    <div class="search-card__details-wrap">
                        <p class="search-card__status is-served">Served</p>
                        <div class="search-card__status-wrapper">
                            <div class="search-card__status-block">
                                <p class="search-card__detail">
                                    <span class="search-card__detail-label">Position</span>
                                    <span>Healthy Behaviors Tutor-Multiple Locations.</span>
                                </p>
                                <p class="search-card__detail">
                                    <span class="search-card__detail-label">Start Date</span>
                                    <span>Aug. 3, 2015</span>
                                </p>
                                <p class="search-card__detail">
                                    <span class="search-card__detail-label">End Date</span>
                                    <span>June 22, 2016</span>
                                </p>
                            </div>
                            <div class="search-card__status-block">
                                <p class="search-card__detail">
                                    <span class="search-card__detail-label">Supervisor</span>
                                    <span>Jonas Kane</span>
                                </p>
                                <p class="search-card__detail">
                                    <span class="search-card__detail-label">Location</span>
                                    <span>Baltimore, MD, US</span>
                                </p>

                                <p class="search-card__detail">
                                    <span class="search-card__detail-label">Site Name</span>
                                    <span></span>
                                </p>

                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </a>
        <a class="search-card__footer" href="#">
            <span class="search-card__footer-link mrh">View Details</span>
            <span><svg class="svg-icon svg-icon--deep-medium-navy" role="img" ><use xlink:href="/static/svg/sprite/symbol/sprite.svg#icon--angle-right"></use></svg></span>
        </a>
    </div>
</div>

<!-- MOBILE/COMPACT -->
<div class="row small-collapse">
    <div class="columns small-12 medium-4">
        <div class="search-card search-card--compact search-card--corps-members is-alum" data-test="search-card">
            <a class="search-card__content" href="#">
                <div class="search-card__status-color is-served"></div>
                <div class="search-card__inner">
                    <div class="search-card__header">
                        <div class="search-card__avatar search-card__avatar-no-default lazyloaded" data-bg="/static/images/defaults/avatar-cm-blue.png" style="background-image: url('/static/images/defaults/avatar-cm-blue.png');"></div>
                        <noscript>
                            <div class="search-card__avatar search-card__avatar-no-default" style="background-image: url(/static/images/defaults/avatar-cm-blue.png);"></div>
                        </noscript>
                        <div class="search-card__flag">
                            <svg class="svg-icon svg-icon--white svg-icon--small" role="img" ><use xlink:href="/static/svg/sprite/symbol/sprite.svg#icon--sy-mark"></use></svg>
                        </div>
                        <p class="search-card__heading" data-test="search-card-result">
                            <span class="hide-for-small-only">Anna Cooper</span>
                            <span class="show-for-small-only">Anna Cooper</span>
                        </p>

                        <p class="search-card__meta" style="display: flex; flex-direction: column;">
                            <span class="search-card__meta-item">
                                <svg class="svg-icon svg-icon--deep-medium-navy" role="presentation" ><use xlink:href="/static/svg/sprite/symbol/sprite.svg#icon--pointer"></use></svg>
                                Washington, DC
                            </span>
                            <span class="search-card__meta-item">
                                <svg class="svg-icon svg-icon--deep-medium-navy" role="presentation" ><use xlink:href="/static/svg/sprite/symbol/sprite.svg#icon--envelope"></use></svg>
                                person@serviceyear.org
                            </span>
                            <span class="search-card__meta-item">
                                <svg class="svg-icon svg-icon--deep-medium-navy" role="presentation" ><use xlink:href="/static/svg/sprite/symbol/sprite.svg#icon--phone"></use></svg>
                                5555555555
                            </span>
                        </p>
                    </div>
                    <div class="search-card__info">
                        <div class="search-card__details-wrap">
                            <p class="search-card__status is-served">Served</p>
                            <div class="search-card__status-wrapper">
                                <div class="search-card__status-block">
                                    <p class="search-card__detail">
                                        <span class="search-card__detail-label">Position</span>
                                        <span>Healthy Behaviors Tutor-Multiple Locations.</span>
                                    </p>
                                    <p class="search-card__detail">
                                        <span class="search-card__detail-label">Start Date</span>
                                        <span>Aug. 3, 2015</span>
                                    </p>
                                    <p class="search-card__detail">
                                        <span class="search-card__detail-label">End Date</span>
                                        <span>June 22, 2016</span>
                                    </p>
                                </div>
                                <div class="search-card__status-block">
                                    <p class="search-card__detail">
                                        <span class="search-card__detail-label">Supervisor</span>
                                        <span>Jonas Kane</span>
                                    </p>
                                    <p class="search-card__detail">
                                        <span class="search-card__detail-label">Location</span>
                                        <span>Baltimore, MD, US</span>
                                    </p>

                                    <p class="search-card__detail">
                                        <span class="search-card__detail-label">Site Name</span>
                                        <span></span>
                                    </p>

                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </a>
            <a class="search-card__footer" href="#">
                <span class="search-card__footer-link mrh">View Details</span>
                <span><svg class="svg-icon svg-icon--deep-medium-navy" role="img" ><use xlink:href="/static/svg/sprite/symbol/sprite.svg#icon--angle-right"></use></svg></span>
            </a>
        </div>
    </div>
</div>