<div class="program-type-key ">
<div class="program-type-key__intro">
<p class="intro">
This is an optional introduction to this keyed content. Lorem ipsum dolor sit amet.
</p>
</div>
<div class="program-type-key__availability">
<span class="program-icon program-icon--major program-icon--available">
<span class="program-icon__short">M</span>
<span class="program-icon__category">
Major </span>
</span>
<span class="program-icon program-icon--minor program-icon--available">
<span class="program-icon__short">m</span>
<span class="program-icon__category">
Minor </span>
</span>
<span class="program-icon program-icon--pre-professional program-icon--available">
<span class="program-icon__short">P</span>
<span class="program-icon__category">
Pre-professional Program </span>
</span>
</div>
<div class="program-type-key__interdisciplinary">
<span class="program-type-key__interdisciplinary-label">
Indicates an interdisciplinary program
</span>
<span class="program-type-key__non-degree-label">
Indicates a non-degree program
</span>
</div>
</div>
{% if program_type_key is not empty %}
<div class="program-type-key {{ program_type_key.variant }}">
<div class="program-type-key__intro">
{% include '@p' with { p: program_type_key.intro } %}
</div>
<div class="program-type-key__availability">
{% for item in program_type_key.availability %}
{% include '@program-icon' with { program_icon: item.program_icon } %}
{% endfor %}
</div>
<div class="program-type-key__interdisciplinary">
<span class="program-type-key__interdisciplinary-label">
Indicates an interdisciplinary program
</span>
<span class="program-type-key__non-degree-label">
Indicates a non-degree program
</span>
</div>
</div>
{% endif %}
{
"program_type_key": {
"availability": [
{
"program_icon": {
"category": "Major",
"category_short": "M",
"variant": "program-icon--major program-icon--available"
}
},
{
"program_icon": {
"category": "Minor",
"category_short": "m",
"variant": "program-icon--minor program-icon--available"
}
},
{
"program_icon": {
"category": "Pre-professional Program",
"category_short": "P",
"variant": "program-icon--pre-professional program-icon--available"
}
}
],
"intro": {
"variant": "intro",
"content": "This is an optional introduction to this keyed content. Lorem ipsum dolor sit amet."
}
}
}
.program-type-key {
display: flex;
flex-flow: row wrap;
margin-bottom: rr-gridbase(6);
@include rr-font-compute(s, tight);
@include rr-break-directive(l) {
flex-flow: row nowrap;
}
.program-type-key__availability,
.program-type-key__interdisciplinary {
flex: 0 1 100%;
@include rr-break-directive(l) {
flex: 0 0 20%;
padding: rr-gridbase(3);
border-left: color(gray-light) 1px solid;
}
}
.intro {
margin-right: rr-gridbase(3);
flex: 0 1 100%;
@include rr-break-directive(l) {
flex: 0 1 50%;
}
}
.program-type-key__availability {
.program-icon {
display: flex;
margin-bottom: rr-gridbase(2);
&:last-child {
margin-bottom: rr-gridbase(4);
@include rr-break-directive(l) {
margin-bottom: 0;
}
}
.program-icon__category {
font-weight: bold;
.program-icon__category-detail {
font-weight: normal;
}
}
}
}
.program-type-key__interdisciplinary {
margin-top: rr-gridbase(2);
.program-type-key__interdisciplinary-label,
.program-type-key__non-degree-label {
display: flex;
align-items: center;
margin-bottom: rr-gridbase(2);
&:before {
display: inline;
font-weight: bold;
color: color(davidson-red);
font-size: rem(50px);
line-height: 0;
vertical-align: bottom;
margin-right: rem(10px);
}
}
.program-type-key__interdisciplinary-label {
&:before {
content: "*";
}
}
.program-type-key__non-degree-label {
&:before {
content: "†";
font-size: rem(20px);
margin: 0 rem(16px) 0 rem(6px);
}
}
}
}
There are no notes for this item.