<div class="card date-card d-flex flex-row borderless">
    <div class="date-card-date">
        <div class="event-date">
            <abbr class="event-month make-inview animate-wipe" title="November">Nov</abbr> <span class="event-day make-counter">25</span>
        </div>
    </div>
    <div class="date-card-body border-left">
        <h2 class="h5 date-card-title">Name of the date or deadline in the calendar</h2>
        <div class="date-card-description links-animate-underline">Some additional description of the date that might include <a href="#">a link</a>.</div>
    </div>
</div>
<div class="card date-card d-flex flex-row{{date_card_style}}">
  <div class="date-card-date">{{ render '@event-date-short--animated' }}</div>
  <div class="date-card-body border-left">
    <h2 class="h5 date-card-title">{{{date_card_title}}}</h2>
    <div class="date-card-description links-animate-underline">{{{date_card_description}}}</div>
  </div>
</div>
{
  "date_card_style": " borderless",
  "date_card_title": "Name of the date or deadline in the calendar",
  "date_card_description": "Some additional description of the date that might include <a href=\"#\">a link</a>."
}
  • Content:
    // base pattern styles
    .date-card {
      .date-time,
      .date-location {
        padding-left:1.5rem;
        position:relative;
        &::before {
          color:rgba(black,0.4);
          font-family: "Font Awesome 5 Free";
          font-weight:900;
          left:0;
          position:absolute;
          text-align:center;
          width:1rem;
        }
      }
      .date-time {
        &::before {
          content:"\f017";
        }
      }
      .date-location {
        &::before {
          content:"\f3c5";
        }
      }
    }
    
    // pattern styles
    .date-card {
      box-shadow:0px 1px 4px rgba(black,0.2);
      position:relative;
      transition:all 0.25s;
      .date-card-date {
        padding:0.875rem;
        .event-date {
          width:3rem;
        }
      }
      .date-card-body {
        padding:0.875rem;
      }
      .date-card-title + .date-card-description {
        margin-top:0.5rem;
      }
      &.js-date-clickthrough {
        .date-card-title a {
          background-image:none !important;
          border:none !important;
          text-decoration:none !important;
        }
        &:hover {
          border-color:rgba(black,0.2);
          cursor:pointer;
          transform:scale(1.06);
        }
      }
      &.borderless {
        border:none;
        box-shadow:none;
        .date-card-date {
          padding:0 0.875rem 0 0;
        }
        .date-card-body {
          border-left:none !important;
          padding:0 0 0 0.375rem;
        }
      }
    }
  • URL: /components/raw/date-card/date-card.scss
  • Filesystem Path: source/patterns/organisms/cards/date-card/date-card.scss
  • Size: 1.3 KB

There are no notes for this item.