Davidson Styleguide

Program Icon: Pre Professional 

<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>
 
{% 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": "Pre-professional Program",
    "category_short": "P",
    "variant": "program-icon--pre-professional"
  }
}
  • Content: 
    .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");
    }
}
  • URL: /components/raw/program-icon/program-icon.scss
  • Filesystem Path: patterns/atoms/text/program-icon/program-icon.scss
  • Size: 3 KB

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.