<div class="context-section context-section--align-center background--default">
<div class="context-section__inner grid">
<div class="context-section__main">
<div class="context context--large context--align-center context--default">
<h2 class="context__heading">UH Innovation Building an Unstoppable Momentum.</h2>
<p>Advancing solutions for sustainable energy, the drug discovery process, interdisciplinary health care and student stability allows UH to make lasting solutions to pressing problems across industries and communities.</p>
</div>
</div>
</div>
<svg class="context-section__dots" viewBox="0 0 438.1 230.9">
<g>
<circle cx="5" cy="225.8" r="5" />
<circle cx="85.3" cy="225.8" r="5" />
<circle cx="25.1" cy="225.8" r="5" />
<circle cx="105.4" cy="225.8" r="5" />
<circle cx="45.2" cy="225.8" r="5" />
<circle cx="125.5" cy="225.8" r="5" />
<circle cx="65.2" cy="225.8" r="5" />
<circle cx="145.5" cy="225.8" r="5" />
<circle cx="165.6" cy="225.8" r="5" />
<circle cx="245.9" cy="225.8" r="5" />
<circle cx="185.7" cy="225.8" r="5" />
<circle cx="266" cy="225.8" r="5" />
<circle cx="205.8" cy="225.8" r="5" />
<circle cx="286.1" cy="225.8" r="5" />
<circle cx="225.8" cy="225.8" r="5" />
<circle cx="306.1" cy="225.8" r="5" />
<circle cx="74.3" cy="105.4" r="5" />
<circle cx="154.6" cy="105.4" r="5" />
<circle cx="94.4" cy="105.4" r="5" />
<circle cx="174.7" cy="105.4" r="5" />
<circle cx="114.4" cy="105.4" r="5" />
<circle cx="194.7" cy="105.4" r="5" />
<circle cx="134.5" cy="105.4" r="5" />
<circle cx="214.8" cy="105.4" r="5" />
<circle cx="234.9" cy="105.4" r="5" transform="rotate(-80.8 234.834 105.445)" />
<circle cx="315.2" cy="105.4" r="5" />
<circle cx="254.9" cy="105.4" r="5" />
<circle cx="335.2" cy="105.4" r="5" />
<circle cx="275" cy="105.4" r="5" />
<circle cx="355.3" cy="105.4" r="5" />
<circle cx="295.1" cy="105.4" r="5" />
<circle cx="375.4" cy="105.4" r="5" />
<circle cx="39.6" cy="165.6" r="5" />
<circle cx="119.9" cy="165.6" r="5" />
<circle cx="59.7" cy="165.6" r="5" />
<circle cx="140" cy="165.6" r="5" />
<circle cx="79.8" cy="165.6" r="5" />
<circle cx="160.1" cy="165.6" r="5" />
<circle cx="99.9" cy="165.6" r="5" />
<circle cx="180.2" cy="165.6" r="5" />
<circle cx="200.2" cy="165.6" r="5" />
<circle cx="280.5" cy="165.6" r="5" />
<circle cx="220.3" cy="165.6" r="5" />
<circle cx="300.6" cy="165.6" r="5" />
<circle cx="240.4" cy="165.6" r="5" transform="rotate(-80.8 240.334 165.64)" />
<circle cx="320.7" cy="165.6" r="5" />
<circle cx="260.5" cy="165.6" r="5" />
<circle cx="340.8" cy="165.6" r="5" />
<circle cx="108.9" cy="45.2" r="5" />
<circle cx="189.2" cy="45.2" r="5" />
<circle cx="129" cy="45.2" r="5" />
<circle cx="209.3" cy="45.2" r="5" />
<circle cx="149.1" cy="45.2" r="5" />
<circle cx="229.4" cy="45.2" r="5" />
<circle cx="169.1" cy="45.2" r="5" />
<circle cx="249.4" cy="45.2" r="5" />
<circle cx="269.5" cy="45.2" r="5" />
<circle cx="349.8" cy="45.2" r="5" />
<circle cx="289.6" cy="45.2" r="5" />
<circle cx="369.9" cy="45.2" r="5" />
<circle cx="309.7" cy="45.2" r="5" />
<circle cx="390" cy="45.2" r="5" />
<circle cx="329.7" cy="45.2" r="5" />
<circle cx="410" cy="45.2" r="5" />
<circle cx="16.6" cy="205.8" r="5" />
<circle cx="96.9" cy="205.8" r="5" />
<circle cx="36.6" cy="205.8" r="5" />
<circle cx="116.9" cy="205.8" r="5" />
<circle cx="56.7" cy="205.8" r="5" />
<circle cx="137" cy="205.8" r="5" />
<circle cx="76.8" cy="205.8" r="5" />
<circle cx="157.1" cy="205.8" r="5" />
<circle cx="177.2" cy="205.8" r="5" />
<circle cx="257.5" cy="205.8" r="5" />
<circle cx="197.2" cy="205.8" r="5" />
<circle cx="277.5" cy="205.8" r="5" />
<circle cx="217.3" cy="205.8" r="5" />
<circle cx="297.6" cy="205.8" r="5" />
<circle cx="237.4" cy="205.8" r="5" transform="rotate(-80.8 237.27 205.782)" />
<circle cx="317.7" cy="205.8" r="5" />
<circle cx="85.8" cy="85.3" r="5" />
<circle cx="166.1" cy="85.3" r="5" />
<circle cx="105.9" cy="85.3" r="5" />
<circle cx="186.2" cy="85.3" r="5" />
<circle cx="126" cy="85.3" r="5" />
<circle cx="206.3" cy="85.3" r="5" />
<circle cx="146" cy="85.3" r="5" />
<circle cx="226.3" cy="85.3" r="5" />
<circle cx="246.4" cy="85.3" r="5" />
<circle cx="326.7" cy="85.3" r="5" />
<circle cx="266.5" cy="85.3" r="5" />
<circle cx="346.8" cy="85.3" r="5" />
<circle cx="286.6" cy="85.3" r="5" />
<circle cx="366.9" cy="85.3" r="5" />
<circle cx="306.6" cy="85.3" r="5" />
<circle cx="386.9" cy="85.3" r="5" />
<circle cx="51.2" cy="145.5" r="5" />
<circle cx="131.5" cy="145.5" r="5" />
<circle cx="71.3" cy="145.5" r="5" />
<circle cx="151.6" cy="145.5" r="5" />
<circle cx="91.3" cy="145.5" r="5" />
<circle cx="171.6" cy="145.5" r="5" />
<circle cx="111.4" cy="145.5" r="5" />
<circle cx="191.7" cy="145.5" r="5" />
<circle cx="211.8" cy="145.5" r="5" />
<circle cx="292.1" cy="145.5" r="5" />
<circle cx="231.9" cy="145.5" r="5" transform="rotate(-80.8 231.82 145.529)" />
<circle cx="312.2" cy="145.5" r="5" />
<circle cx="251.9" cy="145.5" r="5" />
<circle cx="332.2" cy="145.5" r="5" />
<circle cx="272" cy="145.5" r="5" />
<circle cx="352.3" cy="145.5" r="5" />
<circle cx="120.4" cy="25.1" r="5" />
<circle cx="200.7" cy="25.1" r="5" />
<circle cx="140.5" cy="25.1" r="5" />
<circle cx="220.8" cy="25.1" r="5" />
<circle cx="160.6" cy="25.1" r="5" />
<circle cx="240.9" cy="25.1" r="5" transform="rotate(-80.8 240.853 25.17)" />
<circle cx="180.7" cy="25.1" r="5" />
<circle cx="261" cy="25.1" r="5" />
<circle cx="281" cy="25.1" r="5" />
<circle cx="361.3" cy="25.1" r="5" />
<circle cx="301.1" cy="25.1" r="5" />
<circle cx="381.4" cy="25.1" r="5" />
<circle cx="321.2" cy="25.1" r="5" />
<circle cx="401.5" cy="25.1" r="5" />
<circle cx="341.3" cy="25.1" r="5" />
<circle cx="421.6" cy="25.1" r="5" />
<circle cx="28.1" cy="185.7" r="5" />
<circle cx="108.4" cy="185.7" r="5" />
<circle cx="48.2" cy="185.7" r="5" />
<circle cx="128.5" cy="185.7" r="5" />
<circle cx="68.3" cy="185.7" r="5" />
<circle cx="148.6" cy="185.7" r="5" />
<circle cx="88.3" cy="185.7" r="5" />
<circle cx="168.6" cy="185.7" r="5" />
<circle cx="188.7" cy="185.7" r="5" />
<circle cx="269" cy="185.7" r="5" />
<circle cx="208.8" cy="185.7" r="5" />
<circle cx="289.1" cy="185.7" r="5" />
<circle cx="228.9" cy="185.7" r="5" />
<circle cx="309.2" cy="185.7" r="5" />
<circle cx="248.9" cy="185.7" r="5" />
<circle cx="329.2" cy="185.7" r="5" />
<circle cx="97.4" cy="65.2" r="5" />
<circle cx="177.7" cy="65.2" r="5" />
<circle cx="117.4" cy="65.2" r="5" />
<circle cx="197.7" cy="65.2" r="5" />
<circle cx="137.5" cy="65.2" r="5" />
<circle cx="217.8" cy="65.2" r="5" />
<circle cx="157.6" cy="65.2" r="5" />
<circle cx="237.9" cy="65.2" r="5" transform="rotate(-80.8 237.84 65.253)" />
<circle cx="258" cy="65.2" r="5" />
<circle cx="338.3" cy="65.2" r="5" />
<circle cx="278" cy="65.2" r="5" />
<circle cx="358.3" cy="65.2" r="5" />
<circle cx="298.1" cy="65.2" r="5" />
<circle cx="378.4" cy="65.2" r="5" />
<circle cx="318.2" cy="65.2" r="5" />
<circle cx="398.5" cy="65.2" r="5" />
<circle cx="62.7" cy="125.5" r="5" />
<circle cx="143" cy="125.5" r="5" />
<circle cx="82.8" cy="125.5" r="5" />
<circle cx="163.1" cy="125.5" r="5" />
<circle cx="102.9" cy="125.5" r="5" />
<circle cx="183.2" cy="125.5" r="5" />
<circle cx="123" cy="125.5" r="5" />
<circle cx="203.3" cy="125.5" r="5" />
<circle cx="223.3" cy="125.5" r="5" />
<circle cx="303.6" cy="125.5" r="5" />
<circle cx="243.4" cy="125.5" r="5" />
<circle cx="323.7" cy="125.5" r="5" />
<circle cx="263.5" cy="125.5" r="5" />
<circle cx="343.8" cy="125.5" r="5" />
<circle cx="283.6" cy="125.5" r="5" />
<circle cx="363.9" cy="125.5" r="5" />
<circle cx="132" cy="5" r="5" />
<circle cx="212.3" cy="5" r="5" />
<circle cx="152.1" cy="5" r="5" />
<circle cx="232.4" cy="5" r="5" transform="rotate(-80 232.39 5.011)" />
<circle cx="172.1" cy="5" r="5" />
<circle cx="252.4" cy="5" r="5" />
<circle cx="192.2" cy="5" r="5" />
<circle cx="272.5" cy="5" r="5" />
<circle cx="292.6" cy="5" r="5" />
<circle cx="372.9" cy="5" r="5" />
<circle cx="312.7" cy="5" r="5" />
<circle cx="393" cy="5" r="5" />
<circle cx="332.7" cy="5" r="5" />
<circle cx="413" cy="5" r="5" />
<circle cx="352.8" cy="5" r="5" />
<circle cx="433.1" cy="5" r="5" />
</g>
</svg>
</div>
{% import "icons.twig" as icons %}
{% if in_component_library %}
{% set context = '@context' %}
{% else %}
{% set context = 'context.twig' %}
{% endif %}
<div class="context-section context-section--align-{{ align|default('left') }} background--{{ background|default('default') }}">
<div class="context-section__inner grid">
<div class="context-section__main">
{% include context with {
size: 'large',
align: align,
heading: heading,
subheading: subheading,
paragraphs: paragraphs,
button: {
type: background == 'dark' ? 'inverse' : 'default',
title: button.title,
url: button.url
},
} %}
</div>
</div>
{{ icons.icon('dots', 'context-section__dots') }}
</div>
{
"in_component_library": true,
"heading": "UH Innovation Building an Unstoppable Momentum.",
"paragraphs": "<p>Advancing solutions for sustainable energy, the drug discovery process, interdisciplinary health care and student stability allows UH to make lasting solutions to pressing problems across industries and communities.</p>",
"align": "center"
}
.context-section {
position: relative;
padding: 80px 0;
overflow: hidden;
@include breakpoint(medium) {
padding: 120px 0;
}
&__inner {
z-index: 2;
position: relative;
}
&__main {
grid-column: span 12 / span 12;
@include breakpoint(large) {
grid-column: span 10 / span 10;
}
}
&--align-center {
.context-section__main {
@include breakpoint(large) {
grid-column-start: 2;
}
}
}
&--background-dark {
background-color: $black;
color: $white;
}
&__dots {
position: absolute;
top: 50%;
left: 0;
width: 420px;
opacity: 0.2;
transform: translateY(-50%) translateX(-50%);
.background--gray & {
fill: $white;
}
.background--black & {
fill: $red;
right: 0;
left: auto;
opacity: 0.5;
transform: translateY(-50%) translateX(50%);
}
}
+ .article-grid {
padding-top: 0;
}
}
No notes defined.