<section class="content_grid container-fluid">
<div class="row">
<div class="col-md-6 col-12 content_grid-col">
<h2>This is the section title</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent volutpat sem vel nisi sodales, ut mollis metus rhoncus. Nulla accumsan ac purus ac venenatis. Suspendisse fringilla augue non laoreet auctor. Donec id justo feugiat, dignissim felis vel, varius metus. Pellentesque eget leo vel elit tempus ullamcorper. Donec laoreet dignissim metus, ac porttitor lectus commodo mattis. Nulla feugiat sed velit a rutrum. Morbi fermentum leo eu magna facilisis, et placerat lacus dictum. Ut sodales magna vitae iaculis feugiat. Duis sit amet libero pretium, mollis ex sit amet, consectetur sapien. Quisque condimentum consectetur libero, ac sollicitudin diam tempus id. In rutrum dolor tortor, non consectetur risus semper vel. Pellentesque non diam nec enim tincidunt tempor non luctus augue. Etiam bibendum sapien id est posuere rhoncus. Nullam tempor porta mi, a auctor nunc cursus sit amet. Nam sed dictum enim, eleifend tempus dolor.</p>
</div>
<div class="col-md-6 col-12 content_grid-col">
<div class="accordion" id="accordionaccordionExample">
<div class="accordion_item card">
<div class="card-header" id="headingone">
<h3 class="mb-0"><button aria-controls="collapseone" aria-expanded="true" class="accordion-btn btn btn-block btn-link text-left" data-target="#collapseone" data-toggle="collapse" type="button"><span class="accordion-button-text">This is the accordion heading 1 </span><i class="fa-chevron-down fas"></i> <span class="sr-only">Show the content</span></button></h3>
</div>
<div class="collapse show" id="collapseone" aria-labelledby="headingone" data-parent="#accordionaccordionExample">
<div class="card-body">This is the accordion content. Nam ornare lorem ligula, nec molestie enim facilisis eu. Quisque mi tortor, aliquet sit amet commodo ac, facilisis ut metus. Aenean vestibulum viverra suscipit. Cras consequat sagittis pretium. Donec accumsan turpis in nulla lacinia maximus. Duis et malesuada metus. Donec convallis vel dolor non feugiat.</div>
</div>
</div>
<div class="accordion_item card">
<div class="card-header" id="headingtwo">
<h3 class="mb-0"><button aria-controls="collapsetwo" aria-expanded="false" class="accordion-btn btn btn-block btn-link text-left" data-target="#collapsetwo" data-toggle="collapse" type="button"><span class="accordion-button-text">This is the accordion heading 2 </span><i class="fa-chevron-down fas"></i> <span class="sr-only">Show the content</span></button></h3>
</div>
<div class="collapse" id="collapsetwo" aria-labelledby="headingtwo" data-parent="#accordionaccordionExample">
<div class="card-body">This is the accordion content. Nam ornare lorem ligula, nec molestie enim facilisis eu. Quisque mi tortor, aliquet sit amet commodo ac, facilisis ut metus. Aenean vestibulum viverra suscipit. Cras consequat sagittis pretium. Donec accumsan turpis in nulla lacinia maximus. Duis et malesuada metus. Donec convallis vel dolor non feugiat.</div>
</div>
</div>
<div class="accordion_item card">
<div class="card-header" id="headingthree">
<h3 class="mb-0"><button aria-controls="collapsethree" aria-expanded="false" class="accordion-btn btn btn-block btn-link text-left" data-target="#collapsethree" data-toggle="collapse" type="button"><span class="accordion-button-text">This is the accordion heading 3 </span><i class="fa-chevron-down fas"></i> <span class="sr-only">Show the content</span></button></h3>
</div>
<div class="collapse" id="collapsethree" aria-labelledby="headingthree" data-parent="#accordionaccordionExample">
<div class="card-body">This is the accordion content. Nam ornare lorem ligula, nec molestie enim facilisis eu. Quisque mi tortor, aliquet sit amet commodo ac, facilisis ut metus. Aenean vestibulum viverra suscipit. Cras consequat sagittis pretium. Donec accumsan turpis in nulla lacinia maximus. Duis et malesuada metus. Donec convallis vel dolor non feugiat.</div>
</div>
</div>
</div>
</div>
<div class="col-md-6 col-12 content_grid-col">
<div class="button-list my-3"><a class="btn btn-primary dark-grey" href="/content-sections" role="button"><span class="button_text">Button 1 long name is longer</span> <span class="arrow fa-chevron-right fal" aria-hidden="true"></span> </a><a class="btn btn-primary dark-grey" href="/content-sections/content-previews" role="button"><span class="button_text">Button 2 long name is longer</span> <span class="arrow fa-chevron-right fal" aria-hidden="true"></span> </a><a class="btn btn-primary dark-grey" href="/pages/landing-page/landing-page-half-width-hero-hero-text-left" role="button"><span class="button_text">Button Three</span> <span class="arrow fa-chevron-right fal" aria-hidden="true"></span> </a><a class="btn btn-primary dark-grey" href="/pages" role="button"><span class="button_text">Button Four</span> <span class="arrow fa-chevron-right fal" aria-hidden="true"></span></a></div>
</div>
<div class="col-md-6 col-12 content_grid-col">
<section class="cta teal">
<div class="field field--label-hidden field__item field--name-field-cta-icon field--type-fontawesome-icon">
<div class=fontawesome-icons>
<div class=fontawesome-icon><i aria-hidden=true class="fa-leaf fas" data-fa-mask="" data-fa-transform="" style=--fa-primary-color:#000000;--fa-secondary-color:#000000></i></div>
</div>
</div>
<h2>Call to Action Test</h2>
<div class="field field--label-hidden field__item clearfix field--name-field-body field--type-text-long text-formatted">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam eget maximus nisl. Etiam nec metus neque. Donec purus sem, vehicula quis sapien id, gravida imperdiet purus.
</div><a class="btn btn-primary" href=/content-sections/people-content-listing role=button><span class=button_text>This is a Button</span> <span class="arrow fa-chevron-right fal" aria-hidden=true></span></a>
</section>
</div>
<div class="col-md-6 col-12 content_grid-col">
<div class=card>
<div class=card-image>
<div class="is-b-loaded media media--blazy media--image media--responsive"><img src="/img/lava-2.jpg" alt="hot lava" /></div>
</div>
<div class=card-body>
<h3 class=card-title><a class=ext data-extlink="" href=https://lehighsports.com rel="noopener noreferrer" target=_blank>Lets Go!<span class="extlink fa-ext"><span class="fa fa-external-link" aria-hidden=true aria-label="(link is external)"></span></span></a></h3>
<div class=card-text>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam eget maximus nisl.
</div>
<div class=card-buttons><a class="ext btn btn-primary dark-grey" data-extlink="" href=https://es.pn rel="noopener noreferrer" target=_blank role=button><span class=button_text>Sports!</span> <span class="arrow fa-chevron-right fal" aria-hidden=true></span> <span class="extlink fa-ext"><span class="fa fa-external-link" aria-hidden=true aria-label="(link is external)"></span></span></a></div>
</div>
</div>
</div>
<div class="col-md-6 col-12 content_grid-col">
<div class="paragraph paragraph--type--para-content-preview paragraph--view-mode--default">
<div class="card mb-3 preview_content">
<div class="no-gutters row">
<div class="col-sm content-preview-content">
<div class=card-body>
<h2 class=card-title><a href=/faculty/faculty>Faculty</a></h2>
<p>This is the summary for the Faculty page.
</div>
</div>
<div class=preview-img>
<div class="is-b-loaded media media--blazy media--image media--responsive">
<div class="profile-square"><img src="/img/silhoutte.jpg" alt="silhoutte profile" /></div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="col-md-6 col-12 content_grid-col">
<div class="document_list insecure">
<ul class=list>
<li class=list_item><span><a class=secure_doc href=/sites/default/files/docs/2022-12/educauseitsvccat_1.pdf>Educause Service Catalog</a></span>
<li class=list_item><span><a class=secure_doc href=/sites/default/files/docs/2022-12/educauseitsvccat_0.pdf>educause_it_svc_cat.pdf2</a></span>
<li class=list_item><span><a class=secure_doc href=/sites/default/files/docs/2022-12/educauseitsvccat.pdf>educause_it_svc_cat.pdf</a></span>
</ul>
</div>
</div>
<div class="col-md-6 col-12 content_grid-col">
<div class="paragraph paragraph--type--para-heading paragraph--view-mode--default">
<h2>This is a heading two</h2>
</div>
</div>
<div class="col-md-6 col-12 content_grid-col">
<div class="paragraph paragraph--type--para-heading paragraph--view-mode--default">
<h3>This is a heading three</h3>
</div>
</div>
<div class="col-md-6 col-12 content_grid-col">
<div class="paragraph paragraph--type--para-heading paragraph--view-mode--default">
<h4>This is a heading four</h4>
</div>
</div>
<div class="col-md-6 col-12 content_grid-col">
<div class="paragraph paragraph--type--para-heading paragraph--view-mode--default">
<h5>This is a heading five</h5>
</div>
</div>
<div class="col-md-6 col-12 content_grid-col">
<div class="paragraph paragraph--type--para-heading paragraph--view-mode--default">
<h6>This is a heading six</h6>
</div>
</div>
<div class="col-md-6 col-12 content_grid-col">
<div class="fifteenW image_w_text right">
<div class=image_w_text-image>
<div class=image_w_text-img>
<div class="is-b-loaded media media--blazy media--image media--responsive"><img src="/img/lava-2.jpg" alt="hot lava" /></div>
<div class=image_w_text-caption>
<p>This is the caption.
</div>
</div>
</div>
<div class=image_w_text-txt>
<div class="clearfix field field--label-hidden field--name-field-image-text-text field--type-text-long field__item text-formatted">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam eget maximus nisl. Etiam nec metus neque. Donec purus sem, vehicula quis sapien id, gravida imperdiet purus. Duis id dignissim ipsum. Curabitur commodo velit sit amet libero dapibus, sed porta lorem pretium. Donec accumsan tristique justo ut feugiat. Nunc a odio erat.
</div>
</div>
</div>
</div>
<div class="col-md-6 col-12 content_grid-col">
<div class=group_list>
<ul class=unordered-list>
<li class=list_item><span>
<p>List item is a long list item is very long.
</span>
<li class=list_item><span>
<p>This is a list item
</span>
</ul>
</div>
</div>
<div class="col-md-6 col-12 content_grid-col">
<div class=group_list>
<ol class=ordered-list>
<li class=list_item><span>
<p>List item one
</span>
<li class=list_item><span>
<p>List item 2
</span>
<li class=list_item><span>
<p>List item 3
</span>
</ol>
</div>
</div>
<div class="col-md-6 col-12 content_grid-col">
<div class="paragraph paragraph--type--para-people paragraph--view-mode--default">
<div class="erd-list--person-teaser field field--label-hidden field--name-field-people-person field--type-entity-reference field__items">
<div class=field__item>
<article class="contextual-region node node--view-mode-person-teaser node--type-faculty" role=article>
<h2><a href=/faculty/faculty rel=bookmark>Faculty</a></h2>
<div class=contextual data-contextual-id="node:node=106:changed=1667579686&langcode=en" data-contextual-token=JVrx0wrRaQ5sq4b-SflWkY9xJDDq6T_5tLyNx5Vh5xQ data-once=contextual-render><button aria-pressed=false class="focusable trigger visually-hidden" type=button>Open Faculty configuration options</button>
<ul class=contextual-links hidden>
<li class=entitynodeedit-form><a href="/node/106/edit?destination=/node/139">Edit</a>
<li class=entitynodedelete-form><a href="/node/106/delete?destination=/node/139">Delete</a>
</ul>
</div>
<div class="container-fluid person-profile">
<div class="row person-name">
<div class="col person-profile_name">
<h2></h2>
</div>
</div>
<div class="row person-details">
<div class="col-md-3 person-profile_left">
<div class=preview-img>
<div class="media media--blazy media--image media--responsive is-b-loaded">
<div class="profile-square"><img src="/img/silhoutte.jpg" alt="silhoutte profile" /></div>
</div>
</div>
<div class=person-email><span class="fa-envelope fas" aria-hidden=true><span class=sr-only>Email address:</span></span> <a href=mailto:abc123@lehigh.edu class=mailto data-extlink="">abc123@lehigh.edu<span class="extlink fa-mailto"><span class="fa fa-envelope-o" aria-hidden=true aria-label="(link sends email)"></span></span></a></div>
<div class="col-md-9 col-12 col-xl-10 person-titles">
<div class=person-position>
<div class=positions></div>
</div>
</div>
</div>
<div class="col-md-9 person-profile_right"></div>
</div>
</div>
<div class=node__content></div>
<style>
ed11y-element-panel,
ed11y-element-result {
opacity: 1;
outline: 0 !important
}
.ed11y-hidden-highlight {
box-shadow: inset 0 0 0 1px #fad859, inset 0 0 0 2px #276499, 0 0 0 1px #fad859, 0 0 0 3px #276499, 0 0 1px 3px !important
}
.ed11y-ring-red {
box-shadow: 0 0 0 1px #fff, inset 0 0 0 2px #b80519, 0 0 0 3px #b80519, 0 0 1px 3px;
outline: 2px solid #b80519;
outline-offset: 1px
}
.ed11y-ring-yellow {
box-shadow: 0 0 0 1px #fff, inset 0 0 0 2px #fad859, 0 0 0 3px #fad859, 0 0 1px 3px;
outline: 2px solid #fad859;
outline-offset: 1px
}
</style>
<style></style>
</article>
</div>
<div class=field__item>
<article class="contextual-region node node--view-mode-person-teaser node--type-person" role=article>
<h2><a href=/pages/person rel=bookmark>Person</a></h2>
<div class=contextual data-contextual-id="node:node=124:changed=1680877654&langcode=en" data-contextual-token=f5rsgDKKUbgEkfQMv43xSkoY3CL4x-4apQFMyDrrBYo data-once=contextual-render><button aria-pressed=false class="focusable trigger visually-hidden" type=button>Open Person configuration options</button>
<ul class=contextual-links hidden>
<li class=entitynodeedit-form><a href="/node/124/edit?destination=/node/139">Edit</a>
<li class=entitynodedelete-form><a href="/node/124/delete?destination=/node/139">Delete</a>
</ul>
</div>
<div class="container-fluid person-profile">
<div class="row person-name">
<div class="col person-profile_name">
<h2></h2>
</div>
</div>
<div class="row person-details">
<div class="col-md-3 person-profile_left">
<div class=preview-img>
<div class="media media--blazy media--image media--responsive is-b-loading">
<div class="profile-square"><img src="/img/silhoutte.jpg" alt="silhoutte profile" /></div>
</div>
</div>
<div class=person-email><span class="fa-envelope fas" aria-hidden=true><span class=sr-only>Email address:</span></span> <a href=mailto:abc123@lehigh.edu class=mailto data-extlink="">abc123@lehigh.edu<span class="extlink fa-mailto"><span class="fa fa-envelope-o" aria-hidden=true aria-label="(link sends email)"></span></span></a></div>
<div class="col-md-9 col-12 col-xl-10 person-titles">
<div class=person-position>
<div class=positions></div>
</div>
<div class=person-position>
<div class=positions></div>
</div>
</div>
</div>
<div class="col-md-9 person-profile_right"></div>
</div>
</div>
<div class=node__content></div>
<style>
ed11y-element-panel,
ed11y-element-result {
opacity: 1;
outline: 0 !important
}
.ed11y-hidden-highlight {
box-shadow: inset 0 0 0 1px #fad859, inset 0 0 0 2px #276499, 0 0 0 1px #fad859, 0 0 0 3px #276499, 0 0 1px 3px !important
}
.ed11y-ring-red {
box-shadow: 0 0 0 1px #fff, inset 0 0 0 2px #b80519, 0 0 0 3px #b80519, 0 0 1px 3px;
outline: 2px solid #b80519;
outline-offset: 1px
}
.ed11y-ring-yellow {
box-shadow: 0 0 0 1px #fff, inset 0 0 0 2px #fad859, 0 0 0 3px #fad859, 0 0 1px 3px;
outline: 2px solid #fad859;
outline-offset: 1px
}
</style>
<style></style>
</article>
</div>
</div>
</div>
</div>
<div class="col-md-6 col-12 content_grid-col">
<section class=photo_gallery>
<div class=gallery_item><a class=gallery href=/img/lava.jpg rel=group1 title="hot lava caption"><img alt="hot lava" src=/img/lava.jpg></a></div>
<div class=gallery_item><a class=gallery href=/img/lava-2.jpg rel=group1 title="hot lava caption 2"><img alt="hot lava" src=/img/lava-2.jpg></a></div>
<div class=gallery_item><a class=gallery href=/img/maxresdefault.jpg rel=group1 title="hot lava caption 3"><img alt="hot lava" src=/img/maxresdefault.jpg></a></div>
<div class=gallery_item><a class=gallery href=/img/lava.jpg rel=group1 title="hot lava caption 4"><img alt="hot lava" src=/img/lava.jpg></a></div>
</section>
</div>
<div class="col-md-6 col-12 content_grid-col">
<div class="paragraph paragraph--type--para-quote paragraph--view-mode--default">
<blockquote class=quote>
<div class="clearfix field field--label-hidden field--name-field-quote-text field--type-text-long field__item text-formatted">
<p>He aha kaʻu e ʻōlelo ai koe wale nō, "Aloha ʻoe" No ke au, ka la, ka lani ʻEā, ʻaʻohe, ʻaʻohe He mea iki He kanaka demi-kāne maʻamau wau
</div>
<p class=source>Maui
</blockquote>
</div>
</div>
</div><!-- end row -->
</section>
<section class="content_grid container-fluid">
<div class="row">
{% block section_content %}
{% for column in columns %}
<div class="col-md-6 col-12 content_grid-col">
{{ column.content }}
</div>
{% endfor %}
{% endblock section_content %}
</div><!-- end row -->
</section>
{
"columns": {
"1": {
"content": "<h2>This is the section title</h2><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent volutpat sem vel nisi sodales, ut mollis metus rhoncus. Nulla accumsan ac purus ac venenatis. Suspendisse fringilla augue non laoreet auctor. Donec id justo feugiat, dignissim felis vel, varius metus. Pellentesque eget leo vel elit tempus ullamcorper. Donec laoreet dignissim metus, ac porttitor lectus commodo mattis. Nulla feugiat sed velit a rutrum. Morbi fermentum leo eu magna facilisis, et placerat lacus dictum. Ut sodales magna vitae iaculis feugiat. Duis sit amet libero pretium, mollis ex sit amet, consectetur sapien. Quisque condimentum consectetur libero, ac sollicitudin diam tempus id. In rutrum dolor tortor, non consectetur risus semper vel. Pellentesque non diam nec enim tincidunt tempor non luctus augue. Etiam bibendum sapien id est posuere rhoncus. Nullam tempor porta mi, a auctor nunc cursus sit amet. Nam sed dictum enim, eleifend tempus dolor.</p>"
},
"2": {
"content": "<div class=\"accordion\"id=\"accordionaccordionExample\"><div class=\"accordion_item card\"><div class=\"card-header\"id=\"headingone\"><h3 class=\"mb-0\"><button aria-controls=\"collapseone\"aria-expanded=\"true\"class=\"accordion-btn btn btn-block btn-link text-left\"data-target=\"#collapseone\"data-toggle=\"collapse\"type=\"button\"><span class=\"accordion-button-text\">This is the accordion heading 1 </span><i class=\"fa-chevron-down fas\"></i> <span class=\"sr-only\">Show the content</span></button></h3></div><div class=\"collapse show\"id=\"collapseone\"aria-labelledby=\"headingone\"data-parent=\"#accordionaccordionExample\"><div class=\"card-body\">This is the accordion content. Nam ornare lorem ligula, nec molestie enim facilisis eu. Quisque mi tortor, aliquet sit amet commodo ac, facilisis ut metus. Aenean vestibulum viverra suscipit. Cras consequat sagittis pretium. Donec accumsan turpis in nulla lacinia maximus. Duis et malesuada metus. Donec convallis vel dolor non feugiat.</div></div></div><div class=\"accordion_item card\"><div class=\"card-header\"id=\"headingtwo\"><h3 class=\"mb-0\"><button aria-controls=\"collapsetwo\"aria-expanded=\"false\"class=\"accordion-btn btn btn-block btn-link text-left\"data-target=\"#collapsetwo\"data-toggle=\"collapse\"type=\"button\"><span class=\"accordion-button-text\">This is the accordion heading 2 </span><i class=\"fa-chevron-down fas\"></i> <span class=\"sr-only\">Show the content</span></button></h3></div><div class=\"collapse\"id=\"collapsetwo\"aria-labelledby=\"headingtwo\"data-parent=\"#accordionaccordionExample\"><div class=\"card-body\">This is the accordion content. Nam ornare lorem ligula, nec molestie enim facilisis eu. Quisque mi tortor, aliquet sit amet commodo ac, facilisis ut metus. Aenean vestibulum viverra suscipit. Cras consequat sagittis pretium. Donec accumsan turpis in nulla lacinia maximus. Duis et malesuada metus. Donec convallis vel dolor non feugiat.</div></div></div><div class=\"accordion_item card\"><div class=\"card-header\"id=\"headingthree\"><h3 class=\"mb-0\"><button aria-controls=\"collapsethree\"aria-expanded=\"false\"class=\"accordion-btn btn btn-block btn-link text-left\"data-target=\"#collapsethree\"data-toggle=\"collapse\"type=\"button\"><span class=\"accordion-button-text\">This is the accordion heading 3 </span><i class=\"fa-chevron-down fas\"></i> <span class=\"sr-only\">Show the content</span></button></h3></div><div class=\"collapse\"id=\"collapsethree\"aria-labelledby=\"headingthree\"data-parent=\"#accordionaccordionExample\"><div class=\"card-body\">This is the accordion content. Nam ornare lorem ligula, nec molestie enim facilisis eu. Quisque mi tortor, aliquet sit amet commodo ac, facilisis ut metus. Aenean vestibulum viverra suscipit. Cras consequat sagittis pretium. Donec accumsan turpis in nulla lacinia maximus. Duis et malesuada metus. Donec convallis vel dolor non feugiat.</div></div></div></div>"
},
"3": {
"content": "<div class=\"button-list my-3\"><a class=\"btn btn-primary dark-grey\"href=\"/content-sections\"role=\"button\"><span class=\"button_text\">Button 1 long name is longer</span> <span class=\"arrow fa-chevron-right fal\"aria-hidden=\"true\"></span> </a><a class=\"btn btn-primary dark-grey\"href=\"/content-sections/content-previews\"role=\"button\"><span class=\"button_text\">Button 2 long name is longer</span> <span class=\"arrow fa-chevron-right fal\"aria-hidden=\"true\"></span> </a><a class=\"btn btn-primary dark-grey\"href=\"/pages/landing-page/landing-page-half-width-hero-hero-text-left\"role=\"button\"><span class=\"button_text\">Button Three</span> <span class=\"arrow fa-chevron-right fal\"aria-hidden=\"true\"></span> </a><a class=\"btn btn-primary dark-grey\"href=\"/pages\"role=\"button\"><span class=\"button_text\">Button Four</span> <span class=\"arrow fa-chevron-right fal\"aria-hidden=\"true\"></span></a></div>"
},
"4": {
"content": "<section class=\"cta teal\"><div class=\"field field--label-hidden field__item field--name-field-cta-icon field--type-fontawesome-icon\"><div class=fontawesome-icons><div class=fontawesome-icon><i aria-hidden=true class=\"fa-leaf fas\"data-fa-mask=\"\"data-fa-transform=\"\"style=--fa-primary-color:#000000;--fa-secondary-color:#000000></i></div></div></div><h2>Call to Action Test</h2><div class=\"field field--label-hidden field__item clearfix field--name-field-body field--type-text-long text-formatted\"><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam eget maximus nisl. Etiam nec metus neque. Donec purus sem, vehicula quis sapien id, gravida imperdiet purus.</div><a class=\"btn btn-primary\"href=/content-sections/people-content-listing role=button><span class=button_text>This is a Button</span> <span class=\"arrow fa-chevron-right fal\"aria-hidden=true></span></a></section>"
},
"5": {
"content": "<div class=card><div class=card-image><div class=\"is-b-loaded media media--blazy media--image media--responsive\"><img src=\"/img/lava-2.jpg\" alt=\"hot lava\" /></div></div><div class=card-body><h3 class=card-title><a class=ext data-extlink=\"\"href=https://lehighsports.com rel=\"noopener noreferrer\"target=_blank>Lets Go!<span class=\"extlink fa-ext\"><span class=\"fa fa-external-link\"aria-hidden=true aria-label=\"(link is external)\"></span></span></a></h3><div class=card-text><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam eget maximus nisl.</div><div class=card-buttons><a class=\"ext btn btn-primary dark-grey\"data-extlink=\"\"href=https://es.pn rel=\"noopener noreferrer\"target=_blank role=button><span class=button_text>Sports!</span> <span class=\"arrow fa-chevron-right fal\"aria-hidden=true></span> <span class=\"extlink fa-ext\"><span class=\"fa fa-external-link\"aria-hidden=true aria-label=\"(link is external)\"></span></span></a></div></div></div>"
},
"6": {
"content": "<div class=\"paragraph paragraph--type--para-content-preview paragraph--view-mode--default\"><div class=\"card mb-3 preview_content\"><div class=\"no-gutters row\"><div class=\"col-sm content-preview-content\"><div class=card-body><h2 class=card-title><a href=/faculty/faculty>Faculty</a></h2><p>This is the summary for the Faculty page.</div></div><div class=preview-img><div class=\"is-b-loaded media media--blazy media--image media--responsive\"><div class=\"profile-square\"><img src=\"/img/silhoutte.jpg\" alt=\"silhoutte profile\" /></div></div></div></div></div></div>"
},
"7": {
"content": "<div class=\"document_list insecure\"><ul class=list><li class=list_item><span><a class=secure_doc href=/sites/default/files/docs/2022-12/educauseitsvccat_1.pdf>Educause Service Catalog</a></span><li class=list_item><span><a class=secure_doc href=/sites/default/files/docs/2022-12/educauseitsvccat_0.pdf>educause_it_svc_cat.pdf2</a></span><li class=list_item><span><a class=secure_doc href=/sites/default/files/docs/2022-12/educauseitsvccat.pdf>educause_it_svc_cat.pdf</a></span></ul></div>"
},
"8": {
"content": "<div class=\"paragraph paragraph--type--para-heading paragraph--view-mode--default\"><h2>This is a heading two</h2></div>"
},
"9": {
"content": "<div class=\"paragraph paragraph--type--para-heading paragraph--view-mode--default\"><h3>This is a heading three</h3></div>"
},
"10": {
"content": "<div class=\"paragraph paragraph--type--para-heading paragraph--view-mode--default\"><h4>This is a heading four</h4></div>"
},
"11": {
"content": "<div class=\"paragraph paragraph--type--para-heading paragraph--view-mode--default\"><h5>This is a heading five</h5></div>"
},
"12": {
"content": "<div class=\"paragraph paragraph--type--para-heading paragraph--view-mode--default\"><h6>This is a heading six</h6></div>"
},
"13": {
"content": "<div class=\"fifteenW image_w_text right\"><div class=image_w_text-image><div class=image_w_text-img><div class=\"is-b-loaded media media--blazy media--image media--responsive\"><img src=\"/img/lava-2.jpg\" alt=\"hot lava\" /></div><div class=image_w_text-caption><p>This is the caption.</div></div></div><div class=image_w_text-txt><div class=\"clearfix field field--label-hidden field--name-field-image-text-text field--type-text-long field__item text-formatted\"><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam eget maximus nisl. Etiam nec metus neque. Donec purus sem, vehicula quis sapien id, gravida imperdiet purus. Duis id dignissim ipsum. Curabitur commodo velit sit amet libero dapibus, sed porta lorem pretium. Donec accumsan tristique justo ut feugiat. Nunc a odio erat.</div></div></div>"
},
"14": {
"content": "<div class=group_list><ul class=unordered-list><li class=list_item><span><p>List item is a long list item is very long.</span><li class=list_item><span><p>This is a list item</span></ul></div>"
},
"15": {
"content": "<div class=group_list><ol class=ordered-list><li class=list_item><span><p>List item one</span><li class=list_item><span><p>List item 2</span><li class=list_item><span><p>List item 3</span></ol></div>"
},
"16": {
"content": "<div class=\"paragraph paragraph--type--para-people paragraph--view-mode--default\"><div class=\"erd-list--person-teaser field field--label-hidden field--name-field-people-person field--type-entity-reference field__items\"><div class=field__item><article class=\"contextual-region node node--view-mode-person-teaser node--type-faculty\"role=article><h2><a href=/faculty/faculty rel=bookmark>Faculty</a></h2><div class=contextual data-contextual-id=\"node:node=106:changed=1667579686&langcode=en\"data-contextual-token=JVrx0wrRaQ5sq4b-SflWkY9xJDDq6T_5tLyNx5Vh5xQ data-once=contextual-render><button aria-pressed=false class=\"focusable trigger visually-hidden\"type=button>Open Faculty configuration options</button><ul class=contextual-links hidden><li class=entitynodeedit-form><a href=\"/node/106/edit?destination=/node/139\">Edit</a><li class=entitynodedelete-form><a href=\"/node/106/delete?destination=/node/139\">Delete</a></ul></div><div class=\"container-fluid person-profile\"><div class=\"row person-name\"><div class=\"col person-profile_name\"><h2></h2></div></div><div class=\"row person-details\"><div class=\"col-md-3 person-profile_left\"><div class=preview-img><div class=\"media media--blazy media--image media--responsive is-b-loaded\"><div class=\"profile-square\"><img src=\"/img/silhoutte.jpg\" alt=\"silhoutte profile\" /></div></div></div><div class=person-email><span class=\"fa-envelope fas\"aria-hidden=true><span class=sr-only>Email address:</span></span> <a href=mailto:abc123@lehigh.edu class=mailto data-extlink=\"\">abc123@lehigh.edu<span class=\"extlink fa-mailto\"><span class=\"fa fa-envelope-o\"aria-hidden=true aria-label=\"(link sends email)\"></span></span></a></div><div class=\"col-md-9 col-12 col-xl-10 person-titles\"><div class=person-position><div class=positions></div></div></div></div><div class=\"col-md-9 person-profile_right\"></div></div></div><div class=node__content></div><style>ed11y-element-panel,ed11y-element-result{opacity:1;outline:0!important}.ed11y-hidden-highlight{box-shadow:inset 0 0 0 1px #fad859,inset 0 0 0 2px #276499,0 0 0 1px #fad859,0 0 0 3px #276499,0 0 1px 3px!important}.ed11y-ring-red{box-shadow:0 0 0 1px #fff,inset 0 0 0 2px #b80519,0 0 0 3px #b80519,0 0 1px 3px;outline:2px solid #b80519;outline-offset:1px}.ed11y-ring-yellow{box-shadow:0 0 0 1px #fff,inset 0 0 0 2px #fad859,0 0 0 3px #fad859,0 0 1px 3px;outline:2px solid #fad859;outline-offset:1px}</style><style></style></article></div><div class=field__item><article class=\"contextual-region node node--view-mode-person-teaser node--type-person\"role=article><h2><a href=/pages/person rel=bookmark>Person</a></h2><div class=contextual data-contextual-id=\"node:node=124:changed=1680877654&langcode=en\"data-contextual-token=f5rsgDKKUbgEkfQMv43xSkoY3CL4x-4apQFMyDrrBYo data-once=contextual-render><button aria-pressed=false class=\"focusable trigger visually-hidden\"type=button>Open Person configuration options</button><ul class=contextual-links hidden><li class=entitynodeedit-form><a href=\"/node/124/edit?destination=/node/139\">Edit</a><li class=entitynodedelete-form><a href=\"/node/124/delete?destination=/node/139\">Delete</a></ul></div><div class=\"container-fluid person-profile\"><div class=\"row person-name\"><div class=\"col person-profile_name\"><h2></h2></div></div><div class=\"row person-details\"><div class=\"col-md-3 person-profile_left\"><div class=preview-img><div class=\"media media--blazy media--image media--responsive is-b-loading\"><div class=\"profile-square\"><img src=\"/img/silhoutte.jpg\" alt=\"silhoutte profile\" /></div></div></div><div class=person-email><span class=\"fa-envelope fas\"aria-hidden=true><span class=sr-only>Email address:</span></span> <a href=mailto:abc123@lehigh.edu class=mailto data-extlink=\"\">abc123@lehigh.edu<span class=\"extlink fa-mailto\"><span class=\"fa fa-envelope-o\"aria-hidden=true aria-label=\"(link sends email)\"></span></span></a></div><div class=\"col-md-9 col-12 col-xl-10 person-titles\"><div class=person-position><div class=positions></div></div><div class=person-position><div class=positions></div></div></div></div><div class=\"col-md-9 person-profile_right\"></div></div></div><div class=node__content></div><style>ed11y-element-panel,ed11y-element-result{opacity:1;outline:0!important}.ed11y-hidden-highlight{box-shadow:inset 0 0 0 1px #fad859,inset 0 0 0 2px #276499,0 0 0 1px #fad859,0 0 0 3px #276499,0 0 1px 3px!important}.ed11y-ring-red{box-shadow:0 0 0 1px #fff,inset 0 0 0 2px #b80519,0 0 0 3px #b80519,0 0 1px 3px;outline:2px solid #b80519;outline-offset:1px}.ed11y-ring-yellow{box-shadow:0 0 0 1px #fff,inset 0 0 0 2px #fad859,0 0 0 3px #fad859,0 0 1px 3px;outline:2px solid #fad859;outline-offset:1px}</style><style></style></article></div></div></div>"
},
"17": {
"content": "<section class=photo_gallery><div class=gallery_item><a class=gallery href=/img/lava.jpg rel=group1 title=\"hot lava caption\"><img alt=\"hot lava\"src=/img/lava.jpg></a></div><div class=gallery_item><a class=gallery href=/img/lava-2.jpg rel=group1 title=\"hot lava caption 2\"><img alt=\"hot lava\"src=/img/lava-2.jpg></a></div><div class=gallery_item><a class=gallery href=/img/maxresdefault.jpg rel=group1 title=\"hot lava caption 3\"><img alt=\"hot lava\"src=/img/maxresdefault.jpg></a></div><div class=gallery_item><a class=gallery href=/img/lava.jpg rel=group1 title=\"hot lava caption 4\"><img alt=\"hot lava\"src=/img/lava.jpg></a></div></section>"
},
"18": {
"content": "<div class=\"paragraph paragraph--type--para-quote paragraph--view-mode--default\"><blockquote class=quote><div class=\"clearfix field field--label-hidden field--name-field-quote-text field--type-text-long field__item text-formatted\"><p>He aha kaʻu e ʻōlelo ai koe wale nō, \"Aloha ʻoe\" No ke au, ka la, ka lani ʻEā, ʻaʻohe, ʻaʻohe He mea iki He kanaka demi-kāne maʻamau wau</div><p class=source>Maui</blockquote></div>"
}
}
}
.content_grid {
&-col {
margin: $spacer 0;
}
.button-list {
margin: 0 !important;
.btn {
margin: 0 $space_one_half $space_one_half 0;
}
}
.cta {
margin: 0;
padding: $spacer;
}
.profile_pic_name {
@include media-breakpoint-up(md) {
@include media-breakpoint-down(md) {
flex-direction: column;
}
}
.preview-img {
flex: unset;
max-width: 100%;
padding-left: 0;
}
.person {
flex: 0 0 30%;
max-width: 30%;
align-items: flex-start;
@include media-breakpoint-up(md) {
@include media-breakpoint-down(md) {
flex: unset;
max-width: 100%;
}
}
}
.person-titles {
flex: unset;
max-width: 70%;
@include media-breakpoint-up(md) {
@include media-breakpoint-down(md) {
max-width: 100%;
}
}
.person-position {
max-width: unset;
}
}
}
.card-group {
&.people {
grid-template-columns: 1fr !important;
flex-direction: column !important;
.profile_pic_name {
@include media-breakpoint-up(md) {
@include media-breakpoint-down(md) {
flex-direction: row;
}
}
.preview-img {
flex: 0 0 30%;
max-width: 30%;
@include media-breakpoint-up(md) {
@include media-breakpoint-down(md) {
flex: unset;
max-width: 100%;
}
}
img {
margin: unset;
max-width: 100%;
width: unset;
}
}
.person-titles {
flex: 0 0 70%;
max-width: 70%;
@include media-breakpoint-up(md) {
@include media-breakpoint-down(md) {
max-width: 100%;
}
}
}
}
.person-position {
margin: $space_one_half 0;
padding: 0;
max-width: 100%;
}
}
}
.preview_content {
.preview-img {
width: 150px;
}
}
.list_item {
max-width: 100%;
}
.image_w_text {
margin: 0;
&.fifteenW,
&.twentyfiveW,
&.fiftyW,
&.sixtyW {
.image_w_text-image {
max-width: 70vw !important;
}
}
}
.accordion,
.document_list,
.group_list,
.photo_gallery,
.preview_content,
.quote {
margin: 0;
}
.list,
.ordered-list,
.unordered-list {
.list_item {
padding: 0;
margin: 0 0 $space_one_half 0;
&:last-of-type {
margin: 0;
}
}
}
}
Display the layout for side-by-side content. There are many different types of content types available within Drupal. The content stacks on mobile screen sizes.