<li class="o-list-card  js-watch u-watch--fade-up">
    <a href="#" class="o-list-card__link">
        <div class="o-list-card__content">
            <h4 class="o-list-card__title f-title--h5">
                <span class="u-hover-drawline">Academy Science Camp: Secrets of the museum</span>
            </h4>

            <p class="o-list-card__eyebrow f-text--tag f-upper">Daily Activity <span class="u-sep-dot"></span> Free</p>

            <p class="o-list-card__description f-text--small">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam a purus auctor massa in.</p>

            <p class="o-list-card__date f-text--time">Thursday, March 25</p>

        </div>

        <div class="o-list-card__image">

            <div class="o-list-card__image-fallback"></div>

        </div>

    </a>
</li>
{% set hTag = hTag is defined ? hTag : "h4" %}

<li class="o-list-card {{ classes }} js-watch u-watch--fade-up">
  <a href="{{ link }}" class="o-list-card__link{% if noImage %} o-list-card__link--no-image{% endif %}">
    <div class="o-list-card__content">
      <{{ hTag }} class="o-list-card__title f-title--h5">
        <span class="u-hover-drawline">{{title}}</span>
      </{{ hTag}}>
      {% if tag or cost %}
      <p class="o-list-card__eyebrow f-text--tag f-upper">{{ tag }}{% if tag and cost %} <span class="u-sep-dot"></span> {% endif %}{{ cost }}</p>
      {% endif %}
      {% if description %}
      <p class="o-list-card__description f-text--small">{{ description }}</p>
      {% endif %}
      {% if date %}
      <p class="o-list-card__date f-text--time">{{ date }}</p>
      {% endif %}

    </div>
    {% if not noImage %}
      <div class="o-list-card__image">
        {% if image %}
          {{ image|raw }}
        {% else %}
          <div class="o-list-card__image-fallback"></div>
        {% endif %}
      </div>
    {% endif %}
  </a>
</li>
{
  "pageColorTheme": "teal",
  "title": "Academy Science Camp: Secrets of the museum",
  "tag": "Daily Activity",
  "cost": "Free",
  "image": false,
  "description": "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam a purus auctor massa in.",
  "date": "Thursday, March 25",
  "time": "2:00p.m.–3:00p.m.",
  "link": "#"
}
  • Content:
    .o-list-card {
    
      & + & {
        margin-top: 4.8rem;
      }
    }
    
    .o-list-card__link {
      display: block;
      display: flex;
      flex-direction: column-reverse;
    
      @include break($sm) {
        flex-direction: row-reverse;
      }
    }
    
    .o-list-card__content {
      margin-top: 2.4rem;
      display: flex;
      flex-direction: column;
    
      @include break($sm) {
        flex: 0 0 50%;
        margin-top: 0;
        padding-left: 3.2rem;
    
        .o-list-card__link--no-image & {
          flex: 0 0 100%;
          padding-left: 0;
        }
      }
    }
    
    .o-list-card__eyebrow {
      order: 1;
      margin-bottom: 1.6rem;
      color: $c-charcoal;
    }
    
    .o-list-card__title {
      order: 2;
    }
    
    .o-list-card__description {
      order: 3;
      margin-top: 1.2rem;
    }
    
    .o-list-card__date {
      order: 4;
      margin-top: 2rem;
    }
    
    .o-list-card__image {
    
      @include break($sm) {
        flex: 0 0 50%;
      }
    }
    
    .o-list-card__image-fallback {
      padding-bottom: 75%;
      background-color: $c-charcoal-light;
    }
    
  • URL: /components/raw/list-card/list-card.scss
  • Filesystem Path: patterns\04-objects\list-card\list-card.scss
  • Size: 963 Bytes

No notes defined.