<div class="card-content">
    <div class="label font-bold text-2xs md:text-xs text-gray-darker uppercase leading-tight tracking-wider">Home Care</div>
    <a href="#" class="card-content__heading-link">
        <h2 class="heading font-bold text-xl md:text-2xl text-black leading-tight mt-3">Just some of the reasons why CHOICE stands out</h2>
        <h3 class="subheading font-normal text-gray-darkest text-base md:text-lg leading-tight mt-3">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</h3>
    </a>
    <p class="description text-gray-darkest text-sm md:text-base leading-normal mt-3">VNSNY CHOICE is part of the Visiting Nurse Service of New York, and shares its not-for-profit mission of care and compassion for New Yorkers in need.</p>
    <div class="mt-4">
        <ul class="comma-separated-list list-reset">
            <li class="author inline text-gray-dark text-xs md:text-sm tracking-wide md:tracking-normal">Emily Dickinson</li>
            <li class="author inline text-gray-dark text-xs md:text-sm tracking-wide md:tracking-normal">Walt Wiltman</li>
            <li class="author inline text-gray-dark text-xs md:text-sm tracking-wide md:tracking-normal">Jason Loewenstein</li>
        </ul>
    </div>
    <time class="date text-gray-dark text-base mt-4 block tracking-wide md:tracking-normal">  March 7, 2020</time>
    <p class="description text-gray-darker font-normal text-lg leading-normal mt-2">
        2 pm – 6 pm. 3050 Chaffee Ave, The Bronx, NY 10465
    </p>

</div>
<div class="card-content">
  {{#if label}}
    <div class="label font-bold text-2xs md:text-xs text-gray-darker uppercase leading-tight tracking-wider">{{label}}</div>
  {{/if}}
      {{#if link}}
      <a href="{{link.url}}" class="card-content__heading-link">
    {{/if}}
  {{#if heading}}
    <h2 class="heading font-bold text-xl md:text-2xl text-black leading-tight mt-3">{{heading}}</h2>
  {{/if}}
  {{#if subheading}}
    <h3 class="subheading font-normal text-gray-darkest text-base md:text-lg leading-tight mt-3">{{subheading}}</h3>
  {{/if}}
  {{#if link}}
    </a>
  {{/if}}
  {{#if description}}
    <p class="description text-gray-darkest text-sm md:text-base leading-normal mt-3">{{description}}</p>
  {{/if}}
   {{#if author}}
    <div class="mt-4">
      {{> @comma-separated-list}}
    </div>
  {{/if}}
  {{#if date}}
    {{#with date}}
      <time class="date text-gray-dark text-base mt-4 block tracking-wide md:tracking-normal"> {{#if lastUpdated}} Last Updated {{/if}} {{month}} {{day}}, {{year}}</time>
    {{/with}}
  {{/if}}
  {{#if eventDetails}}
    {{#with eventDetails}}
      <p class="description text-gray-darker font-normal text-lg leading-normal mt-2">
        {{time}}. {{address}}
      </p>
   {{/with}}
  {{/if}}

</div>
{
  "label": "Home Care",
  "heading": "Just some of the reasons why CHOICE stands out",
  "subheading": "Lorem ipsum dolor sit amet, consectetur adipiscing elit.",
  "description": "VNSNY CHOICE is part of the Visiting Nurse Service of New York, and shares its not-for-profit mission of care and compassion for New Yorkers in need.",
  "author": [
    "Emily Dickinson",
    "Walt Wiltman",
    "Jason Loewenstein"
  ],
  "date": {
    "month": "March",
    "day": "7",
    "year": "2020",
    "lastUpdated": null
  },
  "eventDetails": {
    "time": "2 pm – 6 pm",
    "address": "3050 Chaffee Ave, The Bronx, NY 10465"
  },
  "link": {
    "url": "#"
  }
}
  • Content:
    .card-content {
      &__heading-link {
        .heading, .subheading {
            transition: background-color 0.2s ease,
                  color 0.2s ease,
                  border-color 0.2s ease,
                  opacity 0.2s ease;
          }
        &:hover {
          .heading, .subheading {
            @apply text-primary-light;
          }
        }
      }
    }
    
  • URL: /components/raw/card-content/card-content.scss
  • Filesystem Path: components/02-general-components/card-content/card-content.scss
  • Size: 321 Bytes

There are no notes for this item.