<a href="#" class="program-card ">
    <div class="program-card__image">
        <img src="https://magicyeti.us/800/600/davidson" alt="Placeholder image. This should be real alt text when implemented." class="" /> </div>
    <div class="program-card__content">
        <h3 class="headline-group ">

            <span class="headline-group__head">Program Title</span>

        </h3>

        <div class="program-card__availability">
            <span class="program-icon program-icon--major">
    <span class="program-icon__short">M</span>
            <span class="program-icon__category">
        Major    </span>
            </span>
            <span class="program-icon program-icon--minor">
    <span class="program-icon__short">m</span>
            <span class="program-icon__category">
        Minor    </span>
            </span>
            <span class="program-icon program-icon--pre-professional">
    <span class="program-icon__short">P</span>
            <span class="program-icon__category">
        Pre-professional Program    </span>
            </span>
        </div>
    </div>
</a>
{% if program_card is not empty %}
<a href="#" class="program-card {{ program_card.variant }}">
  {% if program_card.image is not empty %}
    <div class="program-card__image">
      {% include '@image' with { image: program_card.image } %}
    </div>
  {% endif %}
  <div class="program-card__content">
    {% block program_card_content %}
        {% include '@headline-group' with { hg: program_card.hg } %}
        {% if program_card.availability is not empty %}
        <div class="program-card__availability">
            {% for item in program_card.availability %}
                {% include '@program-icon' with { program_icon: item.program_icon } %}
            {% endfor %}
        </div>
        {% endif %}
    {% endblock %}
  </div>  
</a>
{% endif %}
{
  "program_card": {
    "hg": {
      "tag": "h3",
      "headline": "Program Title"
    },
    "link": {
      "url": "http://www.example.com"
    },
    "availability": [
      {
        "program_icon": {
          "category": "Major",
          "category_short": "M",
          "variant": "program-icon--major"
        }
      },
      {
        "program_icon": {
          "category": "Minor",
          "category_short": "m",
          "variant": "program-icon--minor"
        }
      },
      {
        "program_icon": {
          "category": "Pre-professional Program",
          "category_short": "P",
          "variant": "program-icon--pre-professional"
        }
      }
    ],
    "image": {
      "ratio": "4:3",
      "width": 800,
      "alt": "Placeholder image. This should be real alt text when implemented.",
      "tag": "davidson"
    }
  }
}
  • Content:
    .program-card {
      display: flex;
      flex-flow: column nowrap;
      text-decoration: none;
      @include card($link: true);
    
      .program-card__content {
        display: flex;
        flex-flow: column nowrap;
        // The following rule caused https://gitlab.com/newcity/davidson-drupal/issues/495
        // I am leaving this commented with a note because I'm not sure what removing
        // it will break.
        //height: 100%; 
        padding: rr-gridbase(2);
    
        @include rr-break-directive(m) {
          padding: rr-gridbase(3);
        }
    
        .headline-group {
          margin-bottom: rr-gridbase(4);
    
          .headline-group__head {
            font-weight: $rubik-heavier-weight;
            @include rr-font-compute(xl, tight);
          }
        }
    
        .program-card__availability {
          margin-top: auto;
    
          .program-icon__category {
            @include visually-hidden;
          }
        }
      }
    
      .headline-group__head {
        transition: background-color $transition-time $transition-easing;
      }
    
      &:hover,
      &:active {
    
        // some hover styles also come from the card mixin btw
        .headline-group__head {
          @include link-fancy-hover;
        }
      }
    
      &.program-card--interdisciplinary,
      &.program-card--non-degree {
        .headline-group__head {
          &::after {
            color: color(davidson-red);
            @include rr-font-compute(xl, tight);
          }
        }
      }
    
      &.program-card--interdisciplinary {
        .headline-group__head {
          &::after {
            content: '*';
          }
        }
      }
    
      &.program-card--non-degree {
        .headline-group {
          // offset for the superhead dagger
          margin-top: rem(-8px);
    
          .headline-group__head {
            &::after {
              content: '†';
              vertical-align: super;
            }
          }
        }
      }
    }
    
  • URL: /components/raw/program-card/program-card.scss
  • Filesystem Path: patterns/molecules/blocks/program-card/program-card.scss
  • Size: 1.7 KB

Special card-style block for displaying info about a program inside a program list.