JTCC Component Library

Program Meta 

<div class="program_meta" id="meta" data-type="program" data-category="Graduate, Undergraduate, Doctoral, Business Administration, 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_details_inner">
                        <div class="program_detail">
                            <div class="program_detail_label">Degree & Certificate Type<span class="program_detail_label_hint">:</span></div>
                            <div class="program_detail_data">
                                Graduate, Undergraduate, Doctoral </div>
                        </div>
                        <div class="program_detail">
                            <div class="program_detail_label">Career Cluster<span class="program_detail_label_hint">:</span></div>
                            <div class="program_detail_data">
                                On-campus, Online </div>
                        </div>
                        <div class="program_detail">
                            <div class="program_detail_label">Modes of Study<span class="program_detail_label_hint">:</span></div>
                            <div class="program_detail_data">
                                B.S., M.S. </div>
                        </div>
                    </div>
                </div>
                <div class="program_meta_aside">

                    <a href="#" class="program_meta_link">
                        <span class="program_meta_link_inner">
                            <span class="program_meta_link_label">View all Majors</span>
                            <span class="program_meta_link_icon" aria-hidden="true">
                                <span class="program_meta_link_icon_inner">
                                    <span class="program_meta_link_icon_space">&#xfeff;</span>

                                    <svg class="icon icon_caret_right">
                                        <use href="/images/icons.svg#caret_right" />
                                    </svg>

                                </span>
                            </span>
                        </span>
                    </a>
                </div>
            </div>
        </div>
    </div>
</div>
 
<div class="program_meta" id="meta" data-type="program" data-category="{% for item in level %}{{ item }}, {% endfor %}{% if department %}{{ department }}, {% 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">
					<div class="program_details_inner">
						{% if level %}
						<div class="program_detail">
							<div class="program_detail_label">Degree & Certificate Type<span class="program_detail_label_hint">:</span></div>
							<div class="program_detail_data">
								{% for item in level %}
								{{ item }}{% if not loop.last %}, {% endif %}
								{% endfor %}
							</div>
						</div>
						{% endif %}
						{% if mode %}
						<div class="program_detail">
							<div class="program_detail_label">Career Cluster<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 %}
						{% if degree %}
						<div class="program_detail">
							<div class="program_detail_label">Modes of Study<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 %}
					</div>
				</div>
				<div class="program_meta_aside">
					{% render '@partial-link' with {
						title: "View all Majors",
						url: "#",
						class: "program_meta",
						icon: "caret_right"
					} %}
				</div>
			</div>
		</div>
	</div>
</div>

No notes defined.