<div class="text-component text-component--dark text-component--music text-component--large">
<div class="text-component__content text-component__content--dark">
<h2 class="text-component__header " id="A header passed in as a string">
A header passed in as a string
</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean euismod bibendum laoreet. Proin gravida dolor sit amet lacus accumsan et viverra justo commodo. Proin sodales pulvinar sic tempor. Sociis natoque penatibus et magnis dis parturient
montes, nascetur ridiculus mus. Nam fermentum, <a href='#'>nulla luctus pharetra vulputate</a>, felis tellus mollis orci, sed rhoncus pronin sapien nunc accuan.</p>
<h4>Ph.D students</h4>
<ul>
<li>Max Eisenburger: Economic Development and the Solar Industry. Ph.D. Expected 2019 </li>
<li>Steve Sherman: Policing, Planmaking and Anchor Institutions. Ph.D. Expected 2019 </li>
<li><strong>Ozge Yenigun:</strong> Migration, Diversity and Economic Development. Ph.D. Expected 2021. </li>
</ul>
<h4>MUP students</h4>
<ul>
<li>Adrienne Cooke: Fair Workweek Policies (Spring 2019) </li>
<li>Tejashree Kulkarni: Workforce Development (Spring 2019) </li>
<li>Jacob Malmsten: East-Central Illinois Labor Market Profile (Spring 2019)</li>
</ul>
<hr>
<h4>Ordered List</h4>
<ol>
<li>1st level
<ol>
<li>2nd level</li>
<li>2nd level</li>
<ol>
<li>3rd level</li>
<li>3rd level</li>
</ol>
</li>
</ol>
</li>
</ol>
<p>Lorem<sup>1</sup> ipsum<sub>1</sub> dolor sit amet, consectetur adipiscing elit. Aenean euismod bibendum laoreet. Proin gravida dolor sit amet lacus accumsan et viverra justo commodo. Proin sodales pulvinar sic tempor. Sociis natoque penatibus
et magnis</p>
</div>
</div>
{% import "bits/macros/imageSource.twig" as imageMacros %}
{% if is_wordpress %}
{{ enqueue_script('image-modal') }}
{% endif %}
<div class="text-component text-component--{{ background }} text-component--{{ siteUnit }} text-component--{{ componentSpacing }}">
{% if component.imageToggle and component.image %}
{% if component.enableLightbox %}
<div class="text-component__image text-component__image--{{ component.placement }}
text-component__image--{{ component.width }}" data-image-grid>
<div class="text-component__image-container" data-trigger-modal>
<button class="text-component__image-button">
{{ imageMacros.createAlwaysFullWidthNoCrop(component.image, background) }}
</button>
</div>
{% include 'partials/image-modal/image-modal.twig' with {
image: component.image,
size: 1200
} %}
</div>
{% else%}
<div class="text-component__image text-component__image--{{ component.placement }}
text-component__image--{{ component.width }}">
{{ imageMacros.createWidthOnlyCrop(component.image, 500, background) }}
</div>
{% endif %}
{% endif %}
<div class="text-component__content text-component__content--{{ background }}">
{% if component.header|default and (component.header|trim) %}
<h2 class="text-component__header {{ component.hideHeader ? 'text-component__header--is-hidden' : '' }}"
id="{{ component.header|sanitize }}">
{{ component.header }}
</h2>
{% endif %}
{{ component.richText | raw }}
</div>
{% if component.imageToggle %}
<div class="text-component__mobile-image">
{{ imageMacros.createWidthOnlyCrop(component.image, 500, background) }}
</div>
{% endif %}
</div>
{
"siteUnit": "music",
"departmentName": "Music",
"background": "dark",
"componentSpacing": "large",
"component": {
"type": "text",
"header": "A header passed in as a string",
"richText": "<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean euismod bibendum laoreet. Proin gravida dolor sit amet lacus accumsan et viverra justo commodo. Proin sodales pulvinar sic tempor. Sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nam fermentum, <a href='#'>nulla luctus pharetra vulputate</a>, felis tellus mollis orci, sed rhoncus pronin sapien nunc accuan.</p><h4>Ph.D students</h4> <ul><li>Max Eisenburger: Economic Development and the Solar Industry. Ph.D. Expected 2019 </li><li>Steve Sherman: Policing, Planmaking and Anchor Institutions. Ph.D. Expected 2019 </li><li><strong>Ozge Yenigun:</strong> Migration, Diversity and Economic Development. Ph.D. Expected 2021. </li></ul> <h4>MUP students</h4> <ul><li>Adrienne Cooke: Fair Workweek Policies (Spring 2019) </li><li>Tejashree Kulkarni: Workforce Development (Spring 2019) </li><li>Jacob Malmsten: East-Central Illinois Labor Market Profile (Spring 2019)</li></ul> <hr><h4>Ordered List</h4><ol><li>1st level<ol><li>2nd level</li><li>2nd level</li><ol><li>3rd level</li><li>3rd level</li></ol></li></ol></li></ol><p>Lorem<sup>1</sup> ipsum<sub>1</sub> dolor sit amet, consectetur adipiscing elit. Aenean euismod bibendum laoreet. Proin gravida dolor sit amet lacus accumsan et viverra justo commodo. Proin sodales pulvinar sic tempor. Sociis natoque penatibus et magnis</p>",
"image": {
"src": "https://picsum.photos/1280/850",
"altText": "placeholder",
"caption": "Caption of image"
},
"width": "third",
"placement": "left"
}
}
.text-component
@extends $richText
&--large
@extends $componentWithMargin
&--medium
@extends $componentWithMarginMedium
&--small
@extends $componentWithMarginSmall
&:has(+ .buttons-component)
margin-bottom 0;
clear fix
&__image
display none
+above(coursePreviewFlexBreakpoint)
display initial
&--left
float left
margin 0 48px 24px 0
&--right
float right
margin 0 0 24px 48px
&--half
width 50%
&--third
width 33%
&__header
@extends $headline1
overflow-wrap break-word
&--is-hidden
@extends $visually-hidden
&__content--dark
@extends $richTextOnDark
&__mobile-image
display block
+above(coursePreviewFlexBreakpoint)
display none
There are no notes for this item.