TyBs Patterns

Animated 

<div class="card date-card d-flex flex-row make-inview animate-wipe">
    <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": " make-inview animate-wipe",
  "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.