MSMU Component Library

Program Meta 

<!-- Program Meta -->
<div class="program_meta" id="meta" data-type="program" data-category="On-Campus, Online, B.S., M.S., ">
    <div class="fs-row">
        <div class="fs-cell">
            <div class="program_meta_inner">
                <div class="program_details">
                    <div class="program_detail">
                        <div class="program_detail_label">Degree Type<span class="program_detail_label_hint">:</span></div>
                        <div class="program_detail_data">
                            B.S., M.S. </div>
                    </div>
                    <div class="program_detail">
                        <div class="program_detail_label">Mode of Study<span class="program_detail_label_hint">:</span></div>
                        <div class="program_detail_data">
                            On-Campus, Online </div>
                    </div>
                </div>
                <div class="program_ctas">

                    <a href="#" class="program_cta_button_link">
                        <span class="program_cta_button_link_inner">
                            <span class="program_cta_button_link_label">Apply Now</span><span class="program_cta_button_link_icon" data-nowrap="true" aria-hidden="true">&#xfeff;
                                <svg class="icon icon_arrow_right">
                                    <use href="/images/icons.svg#arrow_right" />
                                </svg>
                            </span>
                        </span>
                    </a>
                    <a href="#" class="program_cta_button_link">
                        <span class="program_cta_button_link_inner">
                            <span class="program_cta_button_link_label">Chat with a Counselor</span><span class="program_cta_button_link_icon" data-nowrap="true" aria-hidden="true">&#xfeff;
                                <svg class="icon icon_arrow_right">
                                    <use href="/images/icons.svg#arrow_right" />
                                </svg>
                            </span>
                        </span>
                    </a>
                </div>
            </div>
        </div>
    </div>
</div>
<!-- END: Program Meta -->
 
{#
	{% include '@partial-program-meta' with {
		mode: ['Mode'],
		level: ['Level'],
		department: {
			url: '#',
			label: 'Department'
		},
		degree: ['Degree']
	} %}
#}

<!-- Program Meta -->
<div class="program_meta" id="meta" data-type="program" data-category="{% for item in level %}{{ item }}, {% endfor %}{% if department %}{{ department.label }}, {% endif %}{% for item in mode %}{{ item }}, {% endfor %}{% for item in degree %}{{ item }}, {% endfor %}">
	<div class="fs-row">
		<div class="fs-cell">
			<div class="program_meta_inner">
				<div class="program_details">
					{% if degree %}
						<div class="program_detail">
							<div class="program_detail_label">Degree Type<span class="program_detail_label_hint">:</span></div>
							<div class="program_detail_data">
								{% for item in degree %}
									{{ item }}{% if not loop.last %}, {% endif %}
								{% endfor %}
							</div>
						</div>
					{% endif %}
					{% if mode %}
						<div class="program_detail">
							<div class="program_detail_label">Mode of Study<span class="program_detail_label_hint">:</span></div>
							<div class="program_detail_data">
								{% for item in mode %}
									{{ item }}{% if not loop.last %}, {% endif %}
								{% endfor %}
							</div>
						</div>
					{% endif %}
				</div>
				{% if buttons %}
				<div class="program_ctas">
					{% for button in buttons %}
						{% include '@partial-link' with {
							title: button.label,
							url: button.url,
							class: 'program_cta_button',
							icon: 'arrow_right',
							aria: '',
							nowrap: true
						} %}
					{% endfor %}
				</div>
				{% endif %}
			</div>
		</div>
	</div>
</div>
<!-- END: Program Meta -->

No notes defined.