<div class="card-group card-group--news">
    <h2 class="heading text-black font-bold text-2xl md:text-3xl text-center">Latest News</h2>
    <p class="max-w-screen-lg mx-auto mt-2 text-black font-normal text-lg md:text-xl font-sans text-center">Your source for all the latest updates from around the art world</p>
    <div class="md:flex md:-mr-4 my-5">
        <div class="w-full md:w-1/4 md:mr-4 mb-4 md:mb-0 last:mb-0">
            <form>
                <label class="font-normal font-sans text-black">Category</label>
                <select class="border-2 border-gray-light bg-white rounded block h-10 text-lg w-full mt-2">
        <option value="default">All</option>
        <option value="option-0">VNSNY CHOICE MLTC</option>
        <option value="option-1">VNSNY CHOICE Total</option>
      </select>
            </form>
        </div>
    </div>
    <div class="mt-8 card-group--column__body flex flex-col">
        <div class="mb-8 last:mb-0">
            <div class="card card--news relative overflow-hidden bg-white border-gray-light rounded flex flex-col md:flex-row md:items-stretch">
                <div class="w-2 h-full absolute bg-primary rounded-l"></div>

                <div class="event__content pr-4 pl-6 lg:ml-2 py-6 md:p-6 block w-full md:flex md:items-center md:justify-between md:justify-between">
                    <div class="w-3/4">
                        <div class="card-content">
                            <div class="label font-bold text-2xs md:text-xs text-gray-darker uppercase leading-tight tracking-wider">VNSNY CHOICE MLTC</div>
                            <h2 class="heading font-bold text-xl md:text-2xl text-black leading-tight mt-3">VNSNY CHOICE expands service area to upstate New York regions</h2>
                            <time class="date text-gray-dark text-base mt-4 block tracking-wide md:tracking-normal">  March 7, 2020</time>

                        </div>
                    </div>
                    <div class="md:w-1/4 md:text-right">
                        <a class="event__link block text-lg text-primary mr-2 mt-2 md:mt-0" href="#">
          Learn More
        </a>
                    </div>
                </div>
            </div>
        </div>
        <div class="mb-8 last:mb-0">
            <div class="card card--news relative overflow-hidden bg-white border-gray-light rounded flex flex-col md:flex-row md:items-stretch">
                <div class="w-2 h-full absolute bg-primary rounded-l"></div>

                <div class="event__content pr-4 pl-6 lg:ml-2 py-6 md:p-6 block w-full md:flex md:items-center md:justify-between md:justify-between">
                    <div class="w-3/4">
                        <div class="card-content">
                            <div class="label font-bold text-2xs md:text-xs text-gray-darker uppercase leading-tight tracking-wider">VNSNY CHOICE MLTC</div>
                            <h2 class="heading font-bold text-xl md:text-2xl text-black leading-tight mt-3">Increased coverage for MLTC plan members</h2>
                            <time class="date text-gray-dark text-base mt-4 block tracking-wide md:tracking-normal">  March 8, 2020</time>

                        </div>
                    </div>
                    <div class="md:w-1/4 md:text-right">
                        <a class="event__link block text-lg text-primary mr-2 mt-2 md:mt-0" href="#">
          Learn More
        </a>
                    </div>
                </div>
            </div>
        </div>
        <div class="mb-8 last:mb-0">
            <div class="card card--news relative overflow-hidden bg-white border-gray-light rounded flex flex-col md:flex-row md:items-stretch">
                <div class="w-2 h-full absolute bg-primary rounded-l"></div>

                <div class="event__content pr-4 pl-6 lg:ml-2 py-6 md:p-6 block w-full md:flex md:items-center md:justify-between md:justify-between">
                    <div class="w-3/4">
                        <div class="card-content">
                            <div class="label font-bold text-2xs md:text-xs text-gray-darker uppercase leading-tight tracking-wider">VNSNY CHOICE MLTC</div>
                            <h2 class="heading font-bold text-xl md:text-2xl text-black leading-tight mt-3">Renew your Medicaid for the 2021 year — Here’s how</h2>
                            <time class="date text-gray-dark text-base mt-4 block tracking-wide md:tracking-normal">  March 9, 2020</time>

                        </div>
                    </div>
                    <div class="md:w-1/4 md:text-right">
                        <a class="event__link block text-lg text-primary mr-2 mt-2 md:mt-0" href="#">
          Learn More
        </a>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
<div class="card-group card-group--news">
  {{#if heading }}
    <h2 class="heading text-black font-bold text-2xl md:text-3xl text-center">{{heading}}</h2>
  {{/if}}
  {{#if subheading }}
  <p class="max-w-screen-lg mx-auto mt-2 text-black font-normal text-lg md:text-xl font-sans text-center">{{subheading}}</p>
  {{/if}}
  {{#if filters}}
  <div class="md:flex md:-mr-4 my-5">
    {{#each filters.dropdowns}}
    <div class="w-full md:w-1/4 md:mr-4 mb-4 md:mb-0 last:mb-0">
    {{> @form--dropdown}}
    </div>
    {{/each}}
  </div>
  {{/if}}
  <div class="mt-8 card-group--column__body flex flex-col">
    {{#each cards}}
      <div class="mb-8 last:mb-0">{{> @card--news}}</div>
    {{/each}}
  </div>
  {{#if button}}
    <div class="text-center mt-8">
    {{#with button}}
      {{> @button--outline }}
    {{/with}}
  </div>
  {{/if}}
</div>
{
  "heading": "Latest News",
  "subheading": "Your source for all the latest updates from around the art world",
  "cards": [
    {
      "date": {
        "month": "March",
        "day": "7",
        "year": "2020"
      },
      "isNewsCard": true,
      "label": "VNSNY CHOICE MLTC",
      "heading": "VNSNY CHOICE expands service area to upstate New York regions",
      "subheading": null,
      "description": null,
      "image": null,
      "author": null,
      "button": {
        "text": "Learn More",
        "url": "#"
      }
    },
    {
      "date": {
        "month": "March",
        "day": "8",
        "year": "2020"
      },
      "isNewsCard": true,
      "label": "VNSNY CHOICE MLTC",
      "heading": "Increased coverage for MLTC plan members",
      "subheading": null,
      "description": null,
      "image": null,
      "author": null,
      "button": {
        "text": "Learn More",
        "url": "#"
      }
    },
    {
      "date": {
        "month": "March",
        "day": "9",
        "year": "2020"
      },
      "isNewsCard": true,
      "label": "VNSNY CHOICE MLTC",
      "heading": "Renew your Medicaid for the 2021 year — Here’s how",
      "subheading": null,
      "description": null,
      "image": null,
      "author": null,
      "button": {
        "text": "Learn More",
        "url": "#"
      }
    }
  ],
  "modifier": "news",
  "filters": {
    "dropdowns": [
      {
        "default": "All",
        "label": "Category",
        "option": [
          {
            "label": "VNSNY CHOICE MLTC"
          },
          {
            "label": "VNSNY CHOICE Total"
          }
        ]
      }
    ]
  }
}
  • Content:
    .card-group {
          &--small {
          .card--small {
                  @apply border border-gray;
                  border-top: none !important;
          }
          &__cell {
                  &:before {
                      @apply block w-full bg-primary;
                      content: '';
                      height: 10px;
                  }
              &:nth-child(2n+0) {
                      &:before {
                          @apply bg-primary-light;
                      }
                  }
              &:nth-child(3n+0) {
                      &:before {
                          @apply bg-primary;
                      }
                  }
              &:nth-child(4n+0) {
                      &:before {
                          @apply bg-primary-light;
                      }
                  }
          }
      }
    }
    
  • URL: /components/raw/card-group/card-group.scss
  • Filesystem Path: components/05-layout-components/card-group/card-group.scss
  • Size: 748 Bytes

There are no notes for this item.