<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."
    }
  }
}
  • Content:
    .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);
                }
            }
        }
    }
  • URL: /components/raw/program-type-key/program-type-key.scss
  • Filesystem Path: patterns/organisms/program-type-key/program-type-key.scss
  • Size: 2.1 KB

There are no notes for this item.