<div class="search-result-card">
    <div class="search-result-card__type">event</div>
    <div class="search-result-card__title-container">

        <h3 class="linked-title linked-title--h3">
            <a href="http://localhost:3000/components/detail/event" class="linked-title__link">
                <span class="linked-title__link-text">Event Title</span>
            </a>
        </h3>
    </div>
    <div class="search-result-card__description">Lorem ipsum dolor sit studies, consectetuer adipiscing elit. Donec odio. Quisque volutpat mattis eros. Nullam malesuada erat ut turpis. Suspendisse urna nibh, viverra non, semper suscipit, posuere a, pede.</div>
</div>
<div class="search-result-card">
    <div class="search-result-card__type">{{ card.postType }}</div>
    <div class="search-result-card__title-container">
        {% include 'bits/linked-title/linked-title.twig' with {
            headingLevel: 3,
            text: card.title,
            url: card.url,
        }%}
    </div>
    <div class="search-result-card__description">{{ card.description }}</div>
</div>
{
  "card": {
    "title": "Event Title",
    "url": "http://localhost:3000/components/detail/event",
    "postType": "event",
    "description": "Lorem ipsum dolor sit studies, consectetuer adipiscing elit. Donec odio. Quisque volutpat mattis eros. Nullam malesuada erat ut turpis. Suspendisse urna nibh, viverra non, semper suscipit, posuere a, pede."
  }
}
  • Content:
    .search-result-card
        --titleColor blue500
        --labelColor grey500
    
        border-bottom 2px solid coolGray3
        padding-bottom 24px
    
        &__type
            @extends $label
            color var(--labelColor)
            margin-bottom 8px
            text-transform uppercase
    
        &__title-container
            margin-bottom 8px
    
        &__link
            text-decoration none
    
        &__description
            @extends $bodySmall
            color grey500
            margin-top 8px
    
        & mark
            background-color alachua
            color inherit
            padding 0 2px
    
  • URL: /components/raw/search-result-card/search-result-card.styl
  • Filesystem Path: patterns/partials/search-result-card/search-result-card.styl
  • Size: 535 Bytes
  • Handle: @search-result-card
  • Preview:
  • Filesystem Path: patterns/partials/search-result-card/search-result-card.twig

No notes defined.