<span class="program-icon program-icon--major program-icon--hide-label">
<span class="program-icon__short">M</span>
<span class="program-icon__category">
Major </span>
</span>
{% if program_icon is not empty %}
<span class="program-icon {{ program_icon.variant }}">
<span class="program-icon__short">{{ program_icon.category_short }}</span>
<span class="program-icon__category">
{% spaceless %}
{{- program_icon.category|raw -}}
{%- if program_icon.category_detail -%}
<span class="program-icon__category-detail">{{- program_icon.category_detail -}}</span>
{%- endif -%}
{% endspaceless %}
</span>
</span>
{% endif %}
{
"program_icon": {
"category": "Major",
"category_short": "M",
"variant": "program-icon--major program-icon--hide-label"
}
}
.program-icon {
display: inline-flex;
align-items: flex-start;
.program-icon__category {
margin-left: rem(10px);
margin-top: rr-gridbase(0.5);
.program-icon__category-detail {
display: block;
margin-top: rr-gridbase(0.5);
}
}
.program-icon__short {
line-height: 1.2em;
padding: rem(4px) rem(6px);
font-weight: bold;
color: color(davidson-white);
background-position: center center;
background-repeat: no-repeat;
background-size: contain;
// for weird accidental cases where a major/minor/pre-pro class isn't passed,
// show the square:
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%236e6e6e' d='M1 1h22v22H1z'/%3E%3C/svg%3E%0A");
}
&.program-icon--major {
.program-icon__short {
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%236e6e6e' d='M1 1h22v22H1z'/%3E%3C/svg%3E%0A");
}
}
&.program-icon--minor {
.program-icon__short {
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Ccircle cx='12' cy='12' r='11' fill='%236e6e6e'/%3E%3C/svg%3E%0A");
}
}
&.program-icon--pre-professional {
.program-icon__short {
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%236e6e6e' d='M12 0l11 6v12l-11 6-11-6V6l11-6z'/%3E%3C/svg%3E%0A");
padding-left: rem(8px);
padding-right: rem(8px);
}
}
}
.program-icon.program-icon--hide-label {
.program-icon__category {
@include visually-hidden;
}
}
// allow the 'available' flag to be set either on the icon itself,
// or by the parent .program-card container
.program-card--major-available .program-icon--major,
.program-icon--major.program-icon--available {
.program-icon__short {
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23D42121' d='M1 1h22v22H1z'/%3E%3C/svg%3E%0A");
}
}
.program-card--minor-available .program-icon--minor,
.program-icon--minor.program-icon--available {
.program-icon__short {
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Ccircle cx='12' cy='12' r='11' fill='%23D42121'/%3E%3C/svg%3E%0A");
}
}
.program-card--pre-professional-available .program-icon--pre-professional,
.program-icon--pre-professional.program-icon--available {
.program-icon__short {
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23D42121' d='M12 0l11 6v12l-11 6-11-6V6l11-6z'/%3E%3C/svg%3E%0A");
}
}
Text icon for displaying if a program is offered as a major, minor, and/or pre-professional program.
These icons are typically included by other patterns and not intended to be used as standalone pieces.