<div class="text-component">
<div class="text-component__content">
<h2 class="text-component__header " id="A header passed in as a string">
A header passed in as a string
</h2>
<div class="text-component__image text-component__image--left
text-component__image--third">
<figure class="captioned-image">
<picture class="captioned-image__picture">
<img class="captioned-image__image" loading="lazy" src="holder.js/800x650" alt="placeholder">
</picture>
<figcaption class="captioned-image__caption captioned-image__caption--light">
Caption of image
</figcaption>
</figure>
</div>
<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>
<h4>Ordered List</h4>
<ol>
<li>1st level<ol>
<li>2nd level</li>
<li>2nd level</li>
</ol>
</li>
<li>1st level</li>
<li>1st level</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 class="text-component__mobile-image">
<figure class="captioned-image">
<picture class="captioned-image__picture">
<img class="captioned-image__image" loading="lazy" src="holder.js/800x650" alt="placeholder">
</picture>
<figcaption class="captioned-image__caption captioned-image__caption--light">
Caption of image
</figcaption>
</figure>
</div>
</div>
</div>
{% import "bits/macros/imageSource.twig" as imageMacros %}
{% if is_wordpress %}
{{ enqueue_script('image-modal') }}
{% endif %}
<div class="text-component">
<div class="text-component__content">
{% if component.header|default %}
<h2 class="text-component__header {{ component.hideHeader ? 'text-component__header--is-hidden' : '' }}"
id="{{ component.header|sanitize }}">
{{ component.header }}
</h2>
{% endif %}
{% if component.imageToggle %}
{% 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 %}
{{ component.richText }}
{% if component.imageToggle %}
<div class="text-component__mobile-image">
{{ imageMacros.createWidthOnlyCrop(component.image, 500, background) }}
</div>
{% endif %}
</div>
</div>
{
"site": {
"name": "E3 Alliance"
},
"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> <h4>Ordered List</h4><ol><li>1st level<ol><li>2nd level</li><li>2nd level</li></ol></li><li>1st level</li><li>1st level</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>",
"imageToggle": true,
"image": {
"src": "holder.js/800x650",
"altText": "placeholder",
"caption": "Caption of image"
},
"width": "third",
"placement": "left"
},
"background": "light"
}
.text-component
clear fix
@extends $richText
&__image
display none
+above(600px)
display initial
&--left
float left
margin 0 24px 12px 0
&--right
float right
margin 0 0 12px 24px
&--half
width 50%
&--third
width 33%
&__header
@extends $headline1
overflow-wrap break-word
&--is-hidden
@extends $visually-hidden
&__mobile-image
display block
+above(600px)
display none
No notes defined.