<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"
}
}
}
.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;
}
}
}
}
}
Special card-style block for displaying info about a program inside a program list.