<div class="search-card">
    <div class="search-card__content">
        <span class="search-card__item-type">
            <div class="metadata-eyebrow-small">
                <div class="metadata-eyebrow-small__type">
                    <div class="metadata-eyebrow-small__type__label">
                        blog
                    </div>
                </div>
            </div>
        </span>
        <a class="linked-text-with-icon linked-text-with-icon--headline5" href="#">Lorem nibh felis adipiscing varius adipiscing in lacinia vel tellus urna<span class="linked-text-with-icon__chevron-icon">
                <svg role="img" class="right-chevron" xmlns="http://www.w3.org/2000/svg" fill="currentColor" aria-hidden="true" viewBox="0 0 8 12">
                    <title>right chevron</title>
                    <path class="_mark right-chevron__shape" d="M4.50496 5.98003L0.00107202 0.0064757L0.00964937 2.55136e-07L3.49611 5.59932e-07L8 5.97463L3.48968 12L-9.53674e-07 12L4.50496 5.98003Z" />
                </svg>
            </span></a>
        <div class="search-card__snippet">
            Sunt sunt dolore velit consectetur ipsum cupidatat. Dolore, velit consectetur ipsum cupidatat irure.
        </div>
    </div>

</div>
<div class="search-card">
    <div class="search-card__content">
        <span class="search-card__item-type">
            {% include 'partials/metadata-eyebrow-small/metadata-eyebrow-small.twig' %}
        </span>
        {% include 'bits/linked-text-with-icon/linked-text-with-icon.twig' with {
            link: {
                text: post.title,
                url: post.permalink,
                type: 'internal_link'
            },
            variant: 'headline5'
        } %}
        <div class="search-card__snippet">
            {{ post.snippet }}
        </div>
    </div>

</div>
{
  "site": {
    "title": "National Network of Public Health Institutes"
  },
  "background": "white",
  "breadcrumbs": [
    {
      "title": "Home",
      "url": "#"
    },
    {
      "title": "Primary Page One",
      "url": "#"
    },
    {
      "title": "Interior Page One",
      "url": "#"
    }
  ],
  "footerLinks": {
    "items": [
      {
        "title": "Subscribe to our newsletter",
        "url": "#"
      },
      {
        "title": "Explore membership benefits",
        "url": "#"
      },
      {
        "title": "See career opportunities",
        "url": "#"
      }
    ]
  },
  "contactInfo": {
    "copyright": "© National Network of Public Health Institutes. All Rights Reserved",
    "facebookLink": "https://facebook.com",
    "linkedInLink": "https://linkedin.com",
    "youtubeLink": "https://youtube.com",
    "flickrLink": "https://flickr.com",
    "twitterLink": "https://twitter.com",
    "instagramLink": "https://instagram.com",
    "youTubeLink": "https://youtube.com"
  },
  "utilityNavigation": {
    "items": [
      {
        "title": "Member directory",
        "url": "#"
      },
      {
        "title": "Events",
        "url": "#",
        "isActive": true
      },
      {
        "title": "Blog",
        "url": "#"
      }
    ]
  },
  "primaryNavigation": {
    "items": [
      {
        "title": "Workforce resources",
        "url": "#",
        "children": [
          {
            "title": "Resource Directory",
            "url": "#",
            "children": []
          },
          {
            "title": "Trainings",
            "url": "#",
            "children": [
              {
                "title": "Training Level 3 example",
                "url": "#"
              }
            ]
          }
        ]
      },
      {
        "title": "Programs & Projects",
        "url": "#",
        "isDescendantActive": true,
        "children": [
          {
            "title": "Data Modernization",
            "url": "#",
            "children": []
          },
          {
            "title": "Environmental Health and Emergency Preparedness",
            "url": "#",
            "children": []
          },
          {
            "title": "Evaluation and Impact",
            "url": "#",
            "isDescendantActive": true,
            "children": [
              {
                "title": "Third level example",
                "url": "#",
                "isActive": true,
                "children": [
                  {
                    "title": "Fourth level example",
                    "url": "#",
                    "isActive": true,
                    "children": [
                      {
                        "title": "Fifth level example",
                        "url": "#",
                        "isActive": true
                      }
                    ]
                  },
                  {
                    "title": "Fourth level example 2",
                    "url": "#"
                  },
                  {
                    "title": "Fourth level example 3",
                    "url": "#"
                  }
                ]
              }
            ]
          },
          {
            "title": "Multisector Strategies and Population Health",
            "url": "#",
            "children": []
          },
          {
            "title": "Public Health Events and Convenings Management",
            "url": "#",
            "children": []
          },
          {
            "title": "Public Health Infrastructure Grant",
            "url": "#",
            "children": []
          },
          {
            "title": "Public health training",
            "url": "#",
            "children": []
          }
        ]
      },
      {
        "title": "Explore the Network",
        "url": "#",
        "children": [
          {
            "title": "Member Directory",
            "url": "#",
            "children": []
          },
          {
            "title": "Membership paths",
            "url": "#",
            "children": []
          }
        ]
      },
      {
        "title": "Partner with us",
        "url": "#"
      },
      {
        "title": "About",
        "url": "#",
        "children": [
          {
            "title": "Blog",
            "url": "#",
            "children": []
          },
          {
            "title": "Events",
            "url": "#",
            "children": []
          },
          {
            "title": "Newsletters",
            "url": "#",
            "children": []
          },
          {
            "title": "Signature programs",
            "url": "#",
            "children": []
          },
          {
            "title": "Contact us",
            "url": "#",
            "children": []
          },
          {
            "title": "Meet the team",
            "url": "#",
            "children": []
          }
        ]
      }
    ]
  },
  "name": "Event",
  "post": {
    "title": "Lorem nibh felis adipiscing varius adipiscing in lacinia vel tellus urna",
    "type": "blog",
    "permalink": "#",
    "snippet": "Sunt sunt dolore velit consectetur ipsum cupidatat. Dolore, velit consectetur ipsum cupidatat irure."
  }
}
  • Content:
    .search-card {
        &__content {
            display: flex;
            flex-direction: column;
            gap: 0.5rem;
        }
        &__snippet {
            @include bodySmall;
            margin-block-start: 0.25rem;
        }
    }
    
  • URL: /components/raw/search-card/search-card.scss
  • Filesystem Path: patterns/partials/search-card/search-card.scss
  • Size: 204 Bytes

No notes defined.